From e4954caec1336bf227a4970caf723a380dd7d0b5 Mon Sep 17 00:00:00 2001
From: 1hitsong <3330318+1hitsong@users.noreply.github.com>
Date: Mon, 18 Jul 2022 20:42:22 -0400
Subject: [PATCH 1/2] Improve Object Names

---
 .../music/{MusicArtistAlbumRow.brs => AlbumRow.brs}    |  0
 .../music/{MusicAlbumSongList.xml => AlbumRow.xml}     |  4 ++--
 .../{MusicAlbumSongList.brs => AlbumTrackList.brs}     |  0
 .../{MusicArtistAlbumRow.xml => AlbumTrackList.xml}    |  4 ++--
 .../music/{MusicAlbumDetails.brs => AlbumView.brs}     |  0
 .../music/{MusicAlbumDetails.xml => AlbumView.xml}     |  6 +++---
 .../music/{MusicArtistDetails.brs => ArtistView.brs}   |  0
 .../music/{MusicArtistDetails.xml => ArtistView.xml}   |  6 +++---
 source/Main.brs                                        |  6 +++---
 source/ShowScenes.brs                                  | 10 +++++-----
 10 files changed, 18 insertions(+), 18 deletions(-)
 rename components/music/{MusicArtistAlbumRow.brs => AlbumRow.brs} (100%)
 rename components/music/{MusicAlbumSongList.xml => AlbumRow.xml} (55%)
 rename components/music/{MusicAlbumSongList.brs => AlbumTrackList.brs} (100%)
 rename components/music/{MusicArtistAlbumRow.xml => AlbumTrackList.xml} (55%)
 rename components/music/{MusicAlbumDetails.brs => AlbumView.brs} (100%)
 rename components/music/{MusicAlbumDetails.xml => AlbumView.xml} (88%)
 rename components/music/{MusicArtistDetails.brs => ArtistView.brs} (100%)
 rename components/music/{MusicArtistDetails.xml => ArtistView.xml} (80%)

diff --git a/components/music/MusicArtistAlbumRow.brs b/components/music/AlbumRow.brs
similarity index 100%
rename from components/music/MusicArtistAlbumRow.brs
rename to components/music/AlbumRow.brs
diff --git a/components/music/MusicAlbumSongList.xml b/components/music/AlbumRow.xml
similarity index 55%
rename from components/music/MusicAlbumSongList.xml
rename to components/music/AlbumRow.xml
index 16cdcbd4..99bca2a2 100644
--- a/components/music/MusicAlbumSongList.xml
+++ b/components/music/AlbumRow.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="MusicAlbumSongList" extends="LabelList">
+<component name="AlbumRow" extends="RowList">
   <interface>
     <field id="MusicArtistAlbumData" type="assocarray" onChange="getData" />
   </interface>
-  <script type="text/brightscript" uri="MusicAlbumSongList.brs" />
+  <script type="text/brightscript" uri="AlbumRow.brs" />
 </component>
diff --git a/components/music/MusicAlbumSongList.brs b/components/music/AlbumTrackList.brs
similarity index 100%
rename from components/music/MusicAlbumSongList.brs
rename to components/music/AlbumTrackList.brs
diff --git a/components/music/MusicArtistAlbumRow.xml b/components/music/AlbumTrackList.xml
similarity index 55%
rename from components/music/MusicArtistAlbumRow.xml
rename to components/music/AlbumTrackList.xml
index 144fda79..d20f434d 100644
--- a/components/music/MusicArtistAlbumRow.xml
+++ b/components/music/AlbumTrackList.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="MusicArtistAlbumRow" extends="RowList">
+<component name="AlbumTrackList" extends="LabelList">
   <interface>
     <field id="MusicArtistAlbumData" type="assocarray" onChange="getData" />
   </interface>
-  <script type="text/brightscript" uri="MusicArtistAlbumRow.brs" />
+  <script type="text/brightscript" uri="AlbumTrackList.brs" />
 </component>
diff --git a/components/music/MusicAlbumDetails.brs b/components/music/AlbumView.brs
similarity index 100%
rename from components/music/MusicAlbumDetails.brs
rename to components/music/AlbumView.brs
diff --git a/components/music/MusicAlbumDetails.xml b/components/music/AlbumView.xml
similarity index 88%
rename from components/music/MusicAlbumDetails.xml
rename to components/music/AlbumView.xml
index d2ad590a..d779af1c 100644
--- a/components/music/MusicAlbumDetails.xml
+++ b/components/music/AlbumView.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="MusicAlbumDetails" extends="JFScreen">
+<component name="AlbumView" extends="JFScreen">
   <children>
     <LayoutGroup id="toplevel" layoutDirection="vert" itemSpacings="[-10]" >
       <LayoutGroup id="main_group" layoutDirection="horiz" itemSpacings="[15]" >
@@ -15,7 +15,7 @@
         <LayoutGroup id="infoGroup" layoutDirection="vert" itemSpacings="[15]">
           <Label id="overview" wrap="true" height="310" width="1250" ellipsisText=" ...  (Press * to read more)" />
           <Rectangle id='songListRect' translation="[-30, 0]" width="1260" height="510" color="0x202020ff">
-            <MusicAlbumSongList id="songList" translation="[45, 25]" itemSize="[1170,60]" numRows="7" />
+            <AlbumTrackList id="songList" translation="[45, 25]" itemSize="[1170,60]" numRows="7" />
           </Rectangle>
         </LayoutGroup>
       </LayoutGroup>
@@ -30,5 +30,5 @@
     <field id="instantMixSelected" alias="instantMix.buttonSelected" />
   </interface>
   <script type="text/brightscript" uri="pkg:/source/utils/misc.brs" />
-  <script type="text/brightscript" uri="MusicAlbumDetails.brs" />
+  <script type="text/brightscript" uri="AlbumView.brs" />
 </component>
diff --git a/components/music/MusicArtistDetails.brs b/components/music/ArtistView.brs
similarity index 100%
rename from components/music/MusicArtistDetails.brs
rename to components/music/ArtistView.brs
diff --git a/components/music/MusicArtistDetails.xml b/components/music/ArtistView.xml
similarity index 80%
rename from components/music/MusicArtistDetails.xml
rename to components/music/ArtistView.xml
index 94276861..85418ba0 100644
--- a/components/music/MusicArtistDetails.xml
+++ b/components/music/ArtistView.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="MusicArtistDetails" extends="JFGroup">
+<component name="ArtistView" extends="JFGroup">
   <children>
     <Poster id="backdrop" opacity=".4" loadDisplayMode="scaleToZoom" width="1920" height="1200" blendColor="#3f3f3f" />
     <LayoutGroup id="toplevel" layoutDirection="vert" itemSpacings="[35]" >
@@ -8,7 +8,7 @@
         <Label id="overview" wrap="true" maxLines="9" width="1250" ellipsisText=" ...  (Press * to read more)" />
       </LayoutGroup>
       <Rectangle id='albumRect' translation="[0, 0]" width="1720" height="325" color="0x00000066">
-        <MusicArtistAlbumRow id="albums" translation="[35, 10]" rowLabelColor="#999999" rowLabelFont="font:SmallestSystemFont" />
+        <AlbumRow id="albums" translation="[35, 10]" rowLabelColor="#999999" rowLabelFont="font:SmallestSystemFont" />
       </Rectangle>
     </LayoutGroup>
   </children>
@@ -18,5 +18,5 @@
     <field id="musicAlbumSelected" alias="albums.rowItemSelected" />
   </interface>
   <script type="text/brightscript" uri="pkg:/source/utils/misc.brs" />
-  <script type="text/brightscript" uri="MusicArtistDetails.brs" />
+  <script type="text/brightscript" uri="ArtistView.brs" />
 </component>
diff --git a/source/Main.brs b/source/Main.brs
index 0aca3c9d..9cba241d 100644
--- a/source/Main.brs
+++ b/source/Main.brs
@@ -159,9 +159,9 @@ sub Main (args as dynamic) as void
             else if selectedItem.type = "Photo"
                 ' Nothing to do here, handled in ItemGrid
             else if selectedItem.type = "MusicArtist"
-                group = CreateMusicArtistDetailsGroup(selectedItem.json)
+                group = CreateArtistView(selectedItem.json)
             else if selectedItem.type = "MusicAlbum"
-                group = CreateMusicAlbumDetailsGroup(selectedItem.json)
+                group = CreateAlbumView(selectedItem.json)
             else if selectedItem.type = "Audio"
                 group = CreateAudioPlayerGroup([selectedItem.json])
             else
@@ -189,7 +189,7 @@ sub Main (args as dynamic) as void
             ' ptr is for [row, col] of selected item... but we only have 1 row
             albums = msg.getRoSGNode()
             node = albums.musicArtistAlbumData.items[ptr[1]]
-            group = CreateMusicAlbumDetailsGroup(node)
+            group = CreateAlbumView(node)
         else if isNodeEvent(msg, "playSong")
             ' User has selected audio they want us to play
             selectedIndex = msg.getData()
diff --git a/source/ShowScenes.brs b/source/ShowScenes.brs
index 7ad1bb1b..662dba15 100644
--- a/source/ShowScenes.brs
+++ b/source/ShowScenes.brs
@@ -369,13 +369,13 @@ function CreateSeriesDetailsGroup(series)
 end function
 
 ' Shows details on selected artist. Bio, image, and list of available albums
-function CreateMusicArtistDetailsGroup(musicartist)
+function CreateArtistView(musicartist)
     musicData = MusicAlbumList(musicartist.id)
 
     ' User only has songs under artists
     if musicData = invalid or musicData.Items.Count() = 0
         ' Just songs under artists...
-        group = CreateObject("roSGNode", "MusicAlbumDetails")
+        group = CreateObject("roSGNode", "AlbumView")
         group.pageContent = ItemMetaData(musicartist.id)
         group.albumData = MusicSongList(musicartist.id)
         group.observeField("playSong", m.port)
@@ -383,7 +383,7 @@ function CreateMusicArtistDetailsGroup(musicartist)
         group.observeField("instantMixSelected", m.port)
     else
         ' User has albums under artists
-        group = CreateObject("roSGNode", "MusicArtistDetails")
+        group = CreateObject("roSGNode", "ArtistView")
         group.pageContent = ItemMetaData(musicartist.id)
         group.musicArtistAlbumData = musicData
         group.observeField("musicAlbumSelected", m.port)
@@ -395,8 +395,8 @@ function CreateMusicArtistDetailsGroup(musicartist)
 end function
 
 ' Shows details on selected album. Description text, image, and list of available songs
-function CreateMusicAlbumDetailsGroup(album)
-    group = CreateObject("roSGNode", "MusicAlbumDetails")
+function CreateAlbumView(album)
+    group = CreateObject("roSGNode", "AlbumView")
     m.global.sceneManager.callFunc("pushScene", group)
 
     group.pageContent = ItemMetaData(album.id)

From 1b490f599ff73aee92e9f07234e180b0caa99b26 Mon Sep 17 00:00:00 2001
From: 1hitsong <3330318+1hitsong@users.noreply.github.com>
Date: Mon, 18 Jul 2022 22:28:06 -0400
Subject: [PATCH 2/2] Update Artist view

---
 components/IconButton.brs                     |  79 ++++++++++++++++
 components/IconButton.xml                     |  19 ++++
 components/music/AlbumGrid.brs                |  44 +++++++++
 .../music/{AlbumRow.xml => AlbumGrid.xml}     |   5 +-
 components/music/AlbumRow.brs                 |  50 -----------
 components/music/ArtistView.brs               |  85 +++++++++++++++++-
 components/music/ArtistView.xml               |  46 ++++++++--
 components/music/NowPlaying.brs               |   8 +-
 images/icons/instantMix.png                   | Bin 0 -> 3228 bytes
 images/icons/play.png                         | Bin 0 -> 1662 bytes
 images/missingArtist.png                      | Bin 0 -> 2697 bytes
 source/Main.brs                               |  18 +++-
 source/ShowScenes.brs                         |  26 ++++++
 source/api/Items.brs                          |  18 +++-
 14 files changed, 326 insertions(+), 72 deletions(-)
 create mode 100644 components/IconButton.brs
 create mode 100644 components/IconButton.xml
 create mode 100644 components/music/AlbumGrid.brs
 rename components/music/{AlbumRow.xml => AlbumGrid.xml} (51%)
 delete mode 100644 components/music/AlbumRow.brs
 create mode 100644 images/icons/instantMix.png
 create mode 100644 images/icons/play.png
 create mode 100644 images/missingArtist.png

diff --git a/components/IconButton.brs b/components/IconButton.brs
new file mode 100644
index 00000000..ed328cf1
--- /dev/null
+++ b/components/IconButton.brs
@@ -0,0 +1,79 @@
+sub init()
+    m.buttonBackground = m.top.findNode("buttonBackground")
+    m.buttonIcon = m.top.findNode("buttonIcon")
+    m.buttonText = m.top.findNode("buttonText")
+
+    m.top.observeField("background", "onBackgroundChanged")
+    m.top.observeField("icon", "onIconChanged")
+    m.top.observeField("text", "onTextChanged")
+    m.top.observeField("height", "onHeightChanged")
+    m.top.observeField("width", "onWidthChanged")
+    m.top.observeField("padding", "onPaddingChanged")
+    m.top.observeField("focusedChild", "onFocusChanged")
+end sub
+
+sub onFocusChanged()
+    if m.top.hasFocus()
+        m.buttonBackground.blendColor = m.top.focusBackground
+    else
+        m.buttonBackground.blendColor = m.top.background
+    end if
+end sub
+
+sub onBackgroundChanged()
+    m.buttonBackground.blendColor = m.top.background
+    m.top.unobserveField("background")
+end sub
+
+sub onIconChanged()
+    m.buttonIcon.uri = m.top.icon
+end sub
+
+sub onTextChanged()
+    m.buttonText.text = m.top.text
+end sub
+
+sub setIconSize()
+    height = m.buttonBackground.height
+    width = m.buttonBackground.width
+    if height > 0 and width > 0
+        ' TODO: Use smallest number between them
+        m.buttonIcon.height = m.top.height
+
+        if m.top.padding > 0
+            m.buttonIcon.height = m.buttonIcon.height - m.top.padding
+        end if
+
+        m.buttonIcon.width = m.buttonIcon.height
+
+        m.buttonIcon.translation = [((width - m.buttonIcon.width) / 2), ((height - m.buttonIcon.height) / 2)]
+        m.buttonText.translation = [0, height + 10]
+        m.buttonText.width = width
+    end if
+end sub
+
+sub onHeightChanged()
+    m.buttonBackground.height = m.top.height
+    setIconSize()
+end sub
+
+sub onWidthChanged()
+    m.buttonBackground.width = m.top.width
+    setIconSize()
+end sub
+
+sub onPaddingChanged()
+    setIconSize()
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    if not press then return false
+
+    if key = "OK" and m.top.hasFocus()
+        ' Simply toggle the selected field to trigger the next event
+        m.top.selected = not m.top.selected
+        return true
+    end if
+
+    return false
+end function
diff --git a/components/IconButton.xml b/components/IconButton.xml
new file mode 100644
index 00000000..d8d0f51c
--- /dev/null
+++ b/components/IconButton.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="IconButton" extends="Group">
+  <children>
+      <Poster id="buttonBackground" uri="pkg:/images/white.9.png" />
+      <Poster id="buttonIcon" />
+      <Label id="buttonText" color="#aaaaaa" font="font:SmallestSystemFont" horizAlign="center" />
+  </children>
+  <interface>
+    <field id="background" type="color" value="" />
+    <field id="focusBackground" type="color" value="" />
+    <field id="text" type="string" value="" />
+    <field id="padding" type="integer" value="-1" />
+    <field id="height" type="integer" value="" />
+    <field id="width" type="integer" value="" />
+    <field id="icon" type="string" value="" />
+    <field id="selected" type="boolean" value="false" />
+  </interface>
+  <script type="text/brightscript" uri="IconButton.brs" />
+</component>
diff --git a/components/music/AlbumGrid.brs b/components/music/AlbumGrid.brs
new file mode 100644
index 00000000..d3d5eb17
--- /dev/null
+++ b/components/music/AlbumGrid.brs
@@ -0,0 +1,44 @@
+sub init()
+    getData()
+    m.top.infocus = false
+end sub
+
+function getData()
+
+    ' If we have no album data, return a blank node
+    if m.top.MusicArtistAlbumData = invalid
+        data = CreateObject("roSGNode", "ContentNode")
+        return data
+    end if
+
+    albumData = m.top.MusicArtistAlbumData
+    data = CreateObject("roSGNode", "ContentNode")
+
+    for each album in albumData.items
+        gridAlbum = CreateObject("roSGNode", "ContentNode")
+        gridAlbum.shortdescriptionline1 = album.title
+        gridAlbum.HDGRIDPOSTERURL = album.posterURL
+        gridAlbum.hdposterurl = album.posterURL
+        gridAlbum.SDGRIDPOSTERURL = album.SDGRIDPOSTERURL
+        gridAlbum.sdposterurl = album.posterURL
+
+        data.appendChild(gridAlbum)
+    end for
+
+    m.top.content = data
+
+    return data
+end function
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    if not press then return false
+
+    if key = "up"
+        if m.top.itemFocused <= 4
+            m.top.infocus = false
+            return true
+        end if
+    end if
+
+    return false
+end function
diff --git a/components/music/AlbumRow.xml b/components/music/AlbumGrid.xml
similarity index 51%
rename from components/music/AlbumRow.xml
rename to components/music/AlbumGrid.xml
index 99bca2a2..e277b1aa 100644
--- a/components/music/AlbumRow.xml
+++ b/components/music/AlbumGrid.xml
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="AlbumRow" extends="RowList">
+<component name="AlbumGrid" extends="PosterGrid">
   <interface>
     <field id="MusicArtistAlbumData" type="assocarray" onChange="getData" />
+    <field id="infocus" type="boolean" />
   </interface>
-  <script type="text/brightscript" uri="AlbumRow.brs" />
+  <script type="text/brightscript" uri="AlbumGrid.brs" />
 </component>
diff --git a/components/music/AlbumRow.brs b/components/music/AlbumRow.brs
deleted file mode 100644
index 9da3156d..00000000
--- a/components/music/AlbumRow.brs
+++ /dev/null
@@ -1,50 +0,0 @@
-sub init()
-    m.top.itemComponentName = "ListPoster"
-    m.top.rowFocusAnimationStyle = "fixedFocusWrap"
-    m.top.showRowLabel = [false]
-    m.top.showRowCounter = [true]
-
-    getData()
-    updateSize()
-
-    m.top.setfocus(true)
-end sub
-
-sub updateSize()
-    itemWidth = 250
-    itemHeight = 250
-
-    m.top.visible = true
-
-    ' size of the whole row
-    m.top.itemSize = [1650, 290]
-
-    ' spacing between rows
-    m.top.itemSpacing = [0, 0]
-
-    ' size of the item in the row
-    m.top.rowItemSize = [itemWidth, itemHeight]
-
-    ' spacing between items in a row
-    m.top.rowItemSpacing = [10, 0]
-end sub
-
-function getData()
-    ' If we have no album data, return a blank node
-    if m.top.MusicArtistAlbumData = invalid
-        data = CreateObject("roSGNode", "ContentNode")
-        return data
-    end if
-
-    albumData = m.top.MusicArtistAlbumData
-    data = CreateObject("roSGNode", "ContentNode")
-    row = data.CreateChild("ContentNode")
-
-    for each album in albumData.items
-        row.appendChild(album)
-    end for
-
-    m.top.content = data
-
-    return data
-end function
diff --git a/components/music/ArtistView.brs b/components/music/ArtistView.brs
index 24faecac..5eedef27 100644
--- a/components/music/ArtistView.brs
+++ b/components/music/ArtistView.brs
@@ -1,6 +1,19 @@
 sub init()
     m.top.optionsAvailable = false
     setupMainNode()
+    setupButtons()
+
+    m.albumHeader = m.top.findNode("albumHeader")
+    m.albumHeader.text = tr("Albums")
+
+    m.albums = m.top.findNode("albums")
+    m.albums.observeField("infocus", "onAlbumFocusChange")
+
+    m.pageLoadAnimation = m.top.findNode("pageLoad")
+    m.pageLoadAnimation.control = "start"
+
+    m.showAlbumsAnimation = m.top.findNode("showAlbums")
+    m.hideAlbumsAnimation = m.top.findNode("hideAlbums")
 
     ' Load background image
     m.LoadBackdropImageTask = CreateObject("roSGNode", "LoadItemsTask")
@@ -13,9 +26,34 @@ sub init()
     createDialogPallete()
 end sub
 
+' Setup playback buttons, default to Play button selected
+sub setupButtons()
+    m.buttonGrp = m.top.findNode("buttons")
+    m.buttonCount = m.buttonGrp.getChildCount()
+
+    m.playButton = m.top.findNode("play")
+    m.previouslySelectedButtonIndex = -1
+
+    m.top.observeField("selectedButtonIndex", "onButtonSelectedChange")
+    m.top.selectedButtonIndex = 0
+end sub
+
+' Event handler when user selected a different playback button
+sub onButtonSelectedChange()
+    ' Change previously selected button back to default image
+    if m.previouslySelectedButtonIndex > -1
+        selectedButton = m.buttonGrp.getChild(m.previouslySelectedButtonIndex)
+        selectedButton.setFocus(false)
+    end if
+
+    ' Change selected button image to selected image
+    selectedButton = m.buttonGrp.getChild(m.top.selectedButtonIndex)
+    selectedButton.setFocus(true)
+end sub
+
 sub setupMainNode()
-    main = m.top.findNode("toplevel")
-    main.translation = [96, 175]
+    m.main = m.top.findNode("toplevel")
+    m.main.translation = [96, 175]
 end sub
 
 ' Event fired when page data is loaded
@@ -40,9 +78,11 @@ sub setScreenTitle(json)
 end sub
 
 sub setPosterImage(posterURL)
-    if isValid(posterURL)
-        m.artistImage.uri = posterURL
+    if not isValid(posterURL) or posterURL = ""
+        posterURL = "pkg:/images/missingArtist.png"
     end if
+
+    m.artistImage.uri = posterURL
 end sub
 
 sub onBackdropImageLoaded()
@@ -75,6 +115,21 @@ sub onEllipsisChanged()
     end if
 end sub
 
+sub onAlbumFocusChange()
+    if m.albums.infocus
+        m.albums.setFocus(true)
+        m.showAlbumsAnimation.control = "start"
+        return
+    end if
+
+    ' Change selected button image to selected image
+    selectedButton = m.buttonGrp.getChild(m.top.selectedButtonIndex)
+    selectedButton.setFocus(true)
+
+    m.albums.setFocus(false)
+    m.hideAlbumsAnimation.control = "start"
+end sub
+
 sub dscrShowFocus()
     if m.dscr.isTextEllipsized
         m.dscr.setFocus(true)
@@ -116,6 +171,28 @@ sub createDialogPallete()
 end sub
 
 function onKeyEvent(key as string, press as boolean) as boolean
+    if m.buttonGrp.isInFocusChain()
+        if key = "down"
+            m.albums.infocus = true
+            return true
+        else if key = "left"
+            if m.top.pageContent.count() = 1 then return false
+
+            if m.top.selectedButtonIndex > 0
+                m.previouslySelectedButtonIndex = m.top.selectedButtonIndex
+                m.top.selectedButtonIndex = m.top.selectedButtonIndex - 1
+            end if
+            return true
+        else if key = "right"
+            if m.top.pageContent.count() = 1 then return false
+
+            m.previouslySelectedButtonIndex = m.top.selectedButtonIndex
+            if m.top.selectedButtonIndex < m.buttonCount - 1 then m.top.selectedButtonIndex = m.top.selectedButtonIndex + 1
+
+            return true
+        end if
+    end if
+
     if not press then return false
 
     if key = "options"
diff --git a/components/music/ArtistView.xml b/components/music/ArtistView.xml
index 85418ba0..4c0ab996 100644
--- a/components/music/ArtistView.xml
+++ b/components/music/ArtistView.xml
@@ -2,20 +2,50 @@
 <component name="ArtistView" extends="JFGroup">
   <children>
     <Poster id="backdrop" opacity=".4" loadDisplayMode="scaleToZoom" width="1920" height="1200" blendColor="#3f3f3f" />
-    <LayoutGroup id="toplevel" layoutDirection="vert" itemSpacings="[35]" >
-      <LayoutGroup id="main_group" layoutDirection="horiz" itemSpacings="[15]" >
-        <Poster id="artistImage" width="450" height="450" />
-        <Label id="overview" wrap="true" maxLines="9" width="1250" ellipsisText=" ...  (Press * to read more)" />
+    <LayoutGroup id="toplevel" layoutDirection="vert" itemSpacings="[75]" >
+      <LayoutGroup id="main_group" layoutDirection="horiz" itemSpacings="[125]" >
+        <LayoutGroup layoutDirection="vert" itemSpacings="[75]" >
+          <Label id="overview" wrap="true" lineSpacing="25" maxLines="6" width="1100" ellipsisText=" ...  (Press * to read more)" />
+          <ButtonGroupHoriz id="buttons" itemSpacings="[20]">
+            <IconButton id="play" background="#070707" focusBackground="#00a4dc" padding="35" icon="pkg:/images/icons/play.png" text="Play" height="85" width="150" />
+            <IconButton id="instantMix" background="#070707" focusBackground="#00a4dc" padding="35" icon="pkg:/images/icons/instantMix.png" text="Instant Mix" height="85" width="150" />
+          </ButtonGroupHoriz>
+        </LayoutGroup>
+        <Poster id="artistImage" width="500" height="500" />
       </LayoutGroup>
-      <Rectangle id='albumRect' translation="[0, 0]" width="1720" height="325" color="0x00000066">
-        <AlbumRow id="albums" translation="[35, 10]" rowLabelColor="#999999" rowLabelFont="font:SmallestSystemFont" />
-      </Rectangle>
     </LayoutGroup>
+    <Rectangle id='albumRect' translation="[0, 1050]" width="1920" height="1080" color="#000000" opacity=".75" />
+    <Label id="albumHeader" translation="[100, 1100]" font="font:LargeSystemFont" />
+    <AlbumGrid id="albums" translation="[100, 1200]" vertFocusAnimationStyle="fixedFocus" basePosterSize="[300, 300]" numColumns="5" numRows="99" caption1NumLines="1" itemSpacing="[50, 50]" />
+
+    <Animation id="pageLoad" duration=".5" repeat="false">
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[0, 1050], [0, 750]]" fieldToInterp="albumRect.translation" />
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[100, 1100], [100, 800]]" fieldToInterp="albumHeader.translation" />
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[100, 1200], [100, 900]]" fieldToInterp="albums.translation" />
+    </Animation>
+
+    <Animation id="showAlbums" duration="0.5" repeat="false">
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[0, 750], [0, 0]]" fieldToInterp="albumRect.translation" />
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[100, 800], [100, 175]]" fieldToInterp="albumHeader.translation" />
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[100, 900], [100, 275]]" fieldToInterp="albums.translation" />
+      <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[0.75, 0.95]" fieldToInterp="albumRect.opacity" />
+    </Animation>
+
+    <Animation id="hideAlbums" duration="0.5" repeat="false">
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[0, 0], [0, 750]]" fieldToInterp="albumRect.translation" />
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[100, 175], [100, 800]]" fieldToInterp="albumHeader.translation" />
+      <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[[100, 275], [100, 900]]" fieldToInterp="albums.translation" />
+      <FloatFieldInterpolator key="[0.0, 1.0]" keyValue="[0.95, 0.75]" fieldToInterp="albumRect.opacity" />
+    </Animation>
+
   </children>
   <interface>
     <field id="pageContent" type="node" onChange="pageContentChanged" />
     <field id="musicArtistAlbumData" type="assocarray" alias="albums.MusicArtistAlbumData" />
-    <field id="musicAlbumSelected" alias="albums.rowItemSelected" />
+    <field id="musicAlbumSelected" alias="albums.itemSelected" />
+    <field id="playArtistSelected" alias="play.selected" />
+    <field id="instantMixSelected" alias="instantMix.selected" />
+    <field id="selectedButtonIndex" type="integer" value="-1" />
   </interface>
   <script type="text/brightscript" uri="pkg:/source/utils/misc.brs" />
   <script type="text/brightscript" uri="ArtistView.brs" />
diff --git a/components/music/NowPlaying.brs b/components/music/NowPlaying.brs
index 8bbc5d2d..05157ab8 100644
--- a/components/music/NowPlaying.brs
+++ b/components/music/NowPlaying.brs
@@ -382,9 +382,11 @@ sub onMetaDataLoaded()
     if data <> invalid and data.count() > 0
 
         ' Use metadata to load backdrop image
-        m.LoadBackdropImageTask.itemId = data.json.ArtistItems[0].id
-        m.LoadBackdropImageTask.observeField("content", "onBackdropImageLoaded")
-        m.LoadBackdropImageTask.control = "RUN"
+        if isvalid(data?.json?.ArtistItems?[0].id)
+            m.LoadBackdropImageTask.itemId = data.json.ArtistItems[0].id
+            m.LoadBackdropImageTask.observeField("content", "onBackdropImageLoaded")
+            m.LoadBackdropImageTask.control = "RUN"
+        end if
 
         setPosterImage(data.posterURL)
         setScreenTitle(data.json)
diff --git a/images/icons/instantMix.png b/images/icons/instantMix.png
new file mode 100644
index 0000000000000000000000000000000000000000..4471aa86ebfe3b72fabe310cdf9257f4a6ead8b2
GIT binary patch
literal 3228
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
ItO+{$KX=~>VE_OC

literal 0
HcmV?d00001

diff --git a/images/icons/play.png b/images/icons/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a94c298735e152948d5297523a5030d37657b52
GIT binary patch
literal 1662
zcmYk7c~DbV6vl5>AR&sZ2?~wG2m(SH9Fawh5tL1(;sS$6)HG7Z4Y3X2!b2ONpk)&<
zfGl-}QmP>q#Sp~2vL-Yl7OL2?Mnpsb!?-Yl()(g%`u=$LzH`3&JKs6;-n<_|w{E6U
zY$*T$T3~?Rb^vg2ivz|)xV$|j7zcptALzGXNBrO8eWl{w2zr}7S@P-Pm&@hy&~PWB
zH6^*Rk-t<f=Y$$tCT?Y#8C&8dynSWxkw_s(P?Wb%z%-*9n-a+-C63RZdwt^}jUGro
zH86R<^wsHTM@>Ur>8Z%;DHh}L-Q3>h*pU5gURgMyx4x!^Nl2r&lx{t5%G_^T-vO66
zTa~v37fFkq9p9k_TqFJY+@*xHH5sWLDNtiRx5kc(Xk%xGzgGi?6n(0P13}%FTpI?L
zJDJhNmJD8V!eK8LE;74QJ~;sxyb7Cz#dH|`+BZ%l1X7mRs0TQZ_4T<dLYg9duGkJr
zUVO=2jr7`0|6!7Y8=gRe#YV957dp>p0pzSUb?ud94BiOm?8!nQSac>>bQmODcv)w`
zCMZ@&>%O``7HCWtqB#tE-bix}V==E;!uD7Vf<<_Rn{@5*b|J{uz5=dN6EsH(rsxs>
zB;?}4xfTf912?=$Us6xN1Vn)*1bDJNGPBEJvWXxUrWj=<9MoK(F*CCxxEl?D<8iy|
z*dD78SLxa}MOhdG{Z^x`Z+`&kL-WiDl&V_9!0=GOYprh|`Y+uCClo72XiQ!1Cxh`o
zDuX+Wr=Q6-)K$Os-PB6XV%Ho|u^7D89L5p|@<n=`YK1A}tQ$hI5!USBd)W!Yi1M|A
z2Dos+hn?vE=5W1D-2<j%CxS&WhVHqJ_N)U0b&gb=cNHgemHz&z*a2a_wi9sYDVmo_
zxXvawsR^?O+CTl+=`5+w&J2CT!G?LuN4^py#$btpbydRUh!5XcY9iR=odxGA5?N-F
zcmsBoDwy!{x;`sAfz#eojMcZ3<e_6Lp>C)zITc?vxnR}>B#ybjfTnvF93Z8ha0J&G
zwhfNor6M1a9tO~0iEDY8Ed^SlTomLkH7QHJv<Hro#juQo%f=PAU=4ED%2#wLu)UWM
zE6$^q=`ZSj3liabctMya7Q-eCvRkK=X^^=3vN@I-EffTU-aGC(Edo~Gbnkha$vc`t
z`f!j3E<RIK&e14k4?@y??3f5SOvmoV$G95#mzY`dSanXd8(b0c_9;6&KHQ_L=S`@S
z=T%+NIea+l3Pst74^L=ObyY3Jhp+e$-+jmgDQrrgu&{>j<L>XSDnNdF>R7*}8EWqG
zvA}AtwIf0b+xv7QpjAYU_YL7M7yVilz0eFTHg!%~?+4zERK9;FA#pqk^w)MK5jm^|
zU3HQ<YU}dxjMnETyy8HM>Mxxi7#JqL%~yb<A4ZSej#-30GR<fh+X86AiuYD3AgbtS
z6A<Ns4(Brqf&ld?sL|P=;$LP018~~F@ytfbV87LzY@mcH*zvgQ7(U$j%AriLi6Gf(
z?#F>*YFP=t0PIq~NT)>M!xLLn<F`lfmDQbWguQFFda$S=2Hdh%66K*v*>oKUI@7id
zTofX{{cObD>zw_hIq%Y3;cf7+eRDv0Fc8b8-$m);aC^!iY<l@kNX9JB*wuj)*|Y}q
zD|OHCOdBN;xSt%tEy14Tof5L3oN9{lZER5|`<Vs>a6Orf3#qzW9SP$8te(Al6xX|$
z8YKV))=D)<v{qsQ_{om)38RU3GN{-=MB=sz@wA`Rea6vXl#WFKcCsse=rwfE|7eS$
zl)(J{6>l5f0N;iIB^)S;0Y77hFSp9pzppdk@6>d*kf1LNWQ%4?+}sQ@Yb9z(7q?kF
z(_nei!S)%Y2CR!1bs)$)No3BAPJi-oQF#W|kih|BG5KO--dEX^^wN3D26Ip1$1Z&8
z8Ec825bbGjg}6|ogn)qEJ{NuM+uuUsTwJ?*b`LmZtqf{ExXjkUDL3!&B>b;{K>w|N
IGQQy4zf~i(&Hw-a

literal 0
HcmV?d00001

diff --git a/images/missingArtist.png b/images/missingArtist.png
new file mode 100644
index 0000000000000000000000000000000000000000..71851f132391ffb78c81060824e9fde657da4041
GIT binary patch
literal 2697
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
P1hozogawr>iP`%vHMdn5

literal 0
HcmV?d00001

diff --git a/source/Main.brs b/source/Main.brs
index 9cba241d..8e058e66 100644
--- a/source/Main.brs
+++ b/source/Main.brs
@@ -186,9 +186,8 @@ sub Main (args as dynamic) as void
         else if isNodeEvent(msg, "musicAlbumSelected")
             ' If you select a Music Album from ANYWHERE, follow this flow
             ptr = msg.getData()
-            ' ptr is for [row, col] of selected item... but we only have 1 row
             albums = msg.getRoSGNode()
-            node = albums.musicArtistAlbumData.items[ptr[1]]
+            node = albums.musicArtistAlbumData.items[ptr]
             group = CreateAlbumView(node)
         else if isNodeEvent(msg, "playSong")
             ' User has selected audio they want us to play
@@ -201,13 +200,24 @@ sub Main (args as dynamic) as void
             m.spinner = screenContent.findNode("spinner")
             m.spinner.visible = true
             group = CreateAudioPlayerGroup(screenContent.albumData.items)
+        else if isNodeEvent(msg, "playArtistSelected")
+            ' User has selected playlist of of audio they want us to play
+            screenContent = msg.getRoSGNode()
+            group = CreateArtistMixGroup(screenContent.pageContent.id)
         else if isNodeEvent(msg, "instantMixSelected")
             ' User has selected instant mix
             ' User has selected playlist of of audio they want us to play
             screenContent = msg.getRoSGNode()
             m.spinner = screenContent.findNode("spinner")
-            m.spinner.visible = true
-            group = CreateInstantMixGroup(screenContent.albumData.items)
+            if isValid(m.spinner)
+                m.spinner.visible = true
+            end if
+            if isValid(screenContent.albumData)
+                group = CreateInstantMixGroup(screenContent.albumData.items)
+            else if isValid(screenContent.pageContent)
+                print screenContent.musicArtistAlbumData.items[0].json
+                group = CreateInstantMixGroup([{ id: screenContent.musicArtistAlbumData.items[0].json.id }])
+            end if
         else if isNodeEvent(msg, "episodeSelected")
             ' If you select a TV Episode from ANYWHERE, follow this flow
             node = getMsgPicker(msg, "picker")
diff --git a/source/ShowScenes.brs b/source/ShowScenes.brs
index 662dba15..d98e7c30 100644
--- a/source/ShowScenes.brs
+++ b/source/ShowScenes.brs
@@ -387,6 +387,8 @@ function CreateArtistView(musicartist)
         group.pageContent = ItemMetaData(musicartist.id)
         group.musicArtistAlbumData = musicData
         group.observeField("musicAlbumSelected", m.port)
+        group.observeField("playArtistSelected", m.port)
+        group.observeField("instantMixSelected", m.port)
     end if
 
     m.global.sceneManager.callFunc("pushScene", group)
@@ -512,6 +514,30 @@ function CreateInstantMixGroup(audiodata)
     return group
 end function
 
+' Play Artist
+function CreateArtistMixGroup(artistID)
+
+    songList = CreateArtistMix(artistID)
+
+    group = CreateObject("roSGNode", "NowPlaying")
+    group.observeField("state", m.port)
+    songIDArray = CreateObject("roArray", 0, true)
+
+    ' All we need is an array of Song IDs the user selected to play.
+    for each song in songList.items
+        songIDArray.push(song.id)
+    end for
+
+    songIDArray.shift()
+
+    group.pageContent = songIDArray
+    group.musicArtistAlbumData = songList.items
+
+    m.global.sceneManager.callFunc("pushScene", group)
+
+    return group
+end function
+
 function CreatePersonView(personData as object) as object
     person = CreateObject("roSGNode", "PersonDetails")
     m.global.SceneManager.callFunc("pushScene", person)
diff --git a/source/api/Items.brs b/source/api/Items.brs
index 5311b0df..e499c154 100644
--- a/source/api/Items.brs
+++ b/source/api/Items.brs
@@ -167,7 +167,7 @@ function MusicAlbumList(id as string)
     results = []
     for each item in data.Items
         tmp = CreateObject("roSGNode", "MusicAlbumData")
-        tmp.image = PosterImage(item.id)
+        tmp.image = PosterImage(item.id, { "maxHeight": "500", "maxWidth": "500" })
         tmp.json = item
         results.push(tmp)
     end for
@@ -220,6 +220,22 @@ function CreateInstantMix(id as string)
     return getJson(resp)
 end function
 
+' Get Instant Mix based on item
+function CreateArtistMix(id as string)
+    url = Substitute("Users/{0}/Items", get_setting("active_user"), id)
+    resp = APIRequest(url, {
+        "UserId": get_setting("active_user"),
+        "parentId": id,
+        "Filters": "IsNotFolder",
+        "Recursive": true,
+        "SortBy": "SortName",
+        "MediaTypes": "Audio",
+        "Limit": 300
+    })
+
+    return getJson(resp)
+end function
+
 ' Get Intro Videos for an item
 function GetIntroVideos(id as string)
     url = Substitute("Users/{0}/Items/{1}/Intros", get_setting("active_user"), id)