Artist view UI and UX improvement

[1hitsong]

Changes
Improvements to the UI and UX of the music artist view. The albums are now presented in a grid instead of a single row, making it easier to get to albums in fewer keypresses and seeing more on the screen at once.

This change also gives us room for new functionality in the future.

This PR includes a new component, Icon Button. Instead of text, it uses an icon as the primary button content and centers the text below the button.

There are 2 new functions:

1. Adding a Play button to the artist screen that will play all songs by the artists, mimicking functionality from the web view.
2. Adding an Instant Mix button that creates a mix playlist of songs based on the current artist, mimicking functionality from the web view.

Initial View

Album Grid

[lakerssuperman]

Looks awesome!!

[candry7731]

I'm getting an error when trying to view an album, I hope that helps. Let me know if you need any other info.

DebugServer: Creating zip archive from project sources
DebugServer: Connecting to Roku via telnet at 192.168.1.242
07-21 02:45:01.016 [beacon.signal] |AppLaunchInitiate ---------> TimeBase(0 ms)
07-21 02:45:01.016 [beacon.signal] |AppCompileInitiate --------> TimeBase(1 ms)
Error: Translation file load failed: pkg:/locale/en_US/translations.ts: XML parse failed.
Error: Translation file load failed: pkg:/locale/en_US/translations.ts: XML parse failed.
Error: Translation file load failed: pkg:/locale/en_US/translations.ts: XML parse failed.
07-21 02:45:01.034 [scrpt.cmpl] Compiling 'Jellyfin', id 'dev'
07-21 02:45:01.050 [scrpt.load.mkup] Loading markup dev 'Jellyfin'
07-21 02:45:01.062 [scrpt.unload.mkup] Unloading markup dev 'Jellyfin'
07-21 02:45:01.136 [scrpt.parse.mkup.time] Parsed markup dev 'Jellyfin' in 85 milliseconds
------ Compiling dev 'Jellyfin' ------
BRIGHTSCRIPT: WARNING: unused variable 'tracks' in function 'selectsubtitletrack' in pkg:/source/utils/Subtitles.brs(112)
BRIGHTSCRIPT: WARNING: unused variable 'current' in function 'selectsubtitletrack' in pkg:/source/utils/Subtitles.brs(112)
BRIGHTSCRIPT: WARNING: unused variable 'id' in function 'sortsubtitles' in pkg:/source/utils/Subtitles.brs(188)
BRIGHTSCRIPT: WARNING: unused variable 'press' in function 'onkeyevent' in pkg:/components/ItemGrid/ItemGridOptions.brs(181)
BRIGHTSCRIPT: WARNING: unused variable 'key' in function 'onkeyevent' in pkg:/components/JFGroup.brs(4)
BRIGHTSCRIPT: WARNING: unused variable 'press' in function 'onkeyevent' in pkg:/components/JFMessageDialog.brs(9)
BRIGHTSCRIPT: WARNING: unused variable 'msg' in function 'onstate' in pkg:/components/JFVideo.brs(15)
BRIGHTSCRIPT: WARNING: unused variable 'msg' in function 'buffercheck' in pkg:/components/JFVideo.brs(82)
BRIGHTSCRIPT: WARNING: unused variable 'e' in function 'processclientdiscoveryresponse' in pkg:/components/config/ServerDiscoveryTask.brs(65)
BRIGHTSCRIPT: WARNING: unused variable 'size' in function 'rebuilditemarray' in pkg:/components/home/HomeRows.brs(375)
BRIGHTSCRIPT: WARNING: unused variable 'key' in function 'onkeyevent' in pkg:/components/login/UserRow.brs(49)
BRIGHTSCRIPT: WARNING: unused variable 'press' in function 'onkeyevent' in pkg:/components/movies/MovieOptions.brs(97)
BRIGHTSCRIPT: WARNING: unused variable 'key' in function 'onkeyevent' in pkg:/components/tvshows/TVEpisodeRow.brs(58)
BRIGHTSCRIPT: WARNING: unused variable 'press' in function 'onkeyevent' in pkg:/components/tvshows/TVListOptions.brs(71)
Displayed 14 of 14 warnings
07-21 02:45:01.633 [scrpt.ctx.cmpl.time] Compiled 'Jellyfin', id 'dev' in 496 milliseconds (BCVer:0)
07-21 02:45:01.636 [scrpt.proc.mkup.time] Processed markup dev 'Jellyfin' in 1 milliseconds
------ Compiling dev 'Jellyfin' ------
BRIGHTSCRIPT: WARNING: unused variable 'tracks' in function 'selectsubtitletrack' in pkg:/source/utils/Subtitles.brs(112)
BRIGHTSCRIPT: WARNING: unused variable 'current' in function 'selectsubtitletrack' in pkg:/source/utils/Subtitles.brs(112)
BRIGHTSCRIPT: WARNING: unused variable 'id' in function 'sortsubtitles' in pkg:/source/utils/Subtitles.brs(188)
Displayed 3 of 3 warnings
07-21 02:45:01.710 [scrpt.ctx.cmpl.time] Compiled 'Jellyfin', id 'dev' in 73 milliseconds (BCVer:0)
07-21 02:45:01.724 [beacon.signal] |AppCompileComplete --------> Duration(707 ms)
07-21 02:45:01.736 [ui.frm.plugin.running.enter] Entering PLUGIN_RUNNING for dev
07-21 02:45:01.736 [beacon.signal] |AppLaunchInitiate ---------> TimeBase(0 ms)
07-21 02:45:01.928 [beacon.signal] |AppSplashInitiate ---------> TimeBase(192 ms)
07-21 02:45:02.720 [beacon.signal] |AppSplashComplete ---------> Duration(792 ms)
07-21 02:45:03.088 [scrpt.ctx.run.enter] UI: Entering 'Jellyfin', id 'dev'
------ Running dev 'Jellyfin' main ------
Unhandled roDeviceInfoEvent:
<Component: roAssociativeArray> =
{
    Mode: "Off"
    Mute: false
}
07-21 02:45:04.611 [beacon.signal] |AppLaunchComplete ---------> Pending Render Pass
07-21 02:45:04.634 [beacon.signal] |AppLaunchComplete ---------> Duration(2898 ms)
Get server details
Found Jellyfin server using client discovery at http://192.168.1.120:8096
<Component: roAssociativeArray> =
{
    baseurl: "http://192.168.1.120:8096"
    iconheight: 120
    iconurl: "pkg:/images/logo-icon120.jpg"
    iconwidth: 120
    name: "DESKTOP-1J2BH7G"
}               invalid         invalid
SetServerScreen onKeyEvent      OK              true
SetServerScreen onKeyEvent      OK              false
roSGNodeEvent   <Component: roSGNodeEvent>
SetServerScreen onKeyEvent      OK              false
Unhandled roDeviceInfoEvent:
<Component: roAssociativeArray> =
{
    Mode: "Off"
    Mute: false
}
BrightScript Micro Debugger.
Enter any BrightScript statement, debug commands, or HELP.
Suspending threads...
BRIGHTSCRIPT: ERROR: roUrlTransfer.GetToString: Sync-wait interrupted: pkg:/source/api/baserequest.brs(71)
Thread selected:  1*   ...mponents/music/ArtistView.brs(17)    m.pageLoadAnimation.control = "start"
Current Function:
009:  
010:      m.albumHeader = m.top.findNode("albumHeader")
011:      m.albumHeader.text = tr("Albums")
012:  
013:      m.albums = m.top.findNode("albums")
014:      m.albums.observeField("infocus", "onAlbumFocusChange")
015:  
016:      m.pageLoadAnimation = m.top.findNode("pageLoad")
017:*     m.pageLoadAnimation.control = "start"
018:  
019:      m.showAlbumsAnimation = m.top.findNode("showAlbums")
020:      m.hideAlbumsAnimation = m.top.findNode("hideAlbums")
021:  
Source Digest(s): 
pkg: dev 1.4.12 c54833d7ff0abecf48d243558c228fd5 Jellyfin
Invalid value for left-side of expression. (runtime error &he4) in pkg:/components/music/ArtistView.brs(17)
Backtrace:
#0  Function init() As Void
   file/line: pkg:/components/music/ArtistView.brs(19)
Local Variables:
global           Interface:ifGlobal
m                roAssociativeArray refcnt=2 count:8
Threads:
ID    Location                                Source Code
 0[u] ??
 1*   ...mponents/music/ArtistView.brs(17)    m.pageLoadAnimation.control = "start"
 2    pkg:/source/api/baserequest.brs(71)     data = req.GetToString()
  *selected   [u]unattached(not debuggable)
Brightscript Debugger> 

[1hitsong]

@candry7731 Try it now.