Rework Artist layout. Use square cover art

components/ItemGrid/GridItem.brs

@@ -60,6 +60,17 @@ sub itemContentChanged()
     else if itemData.type = "MusicArtist"
         m.itemPoster.uri = itemData.PosterUrl
         m.itemText.text = itemData.Title
+
+        m.itemPoster.height = 300
+        m.itemPoster.width = 300
+
+        m.itemText.translation = [0, m.itemPoster.height + 7]
+
+        m.backdrop.height = 300
+        m.backdrop.width = 300
+
+        m.posterText.height = 200
+        m.posterText.width = 290
     else
         print "Unhandled Grid Item Type: " + itemData.type
     end if

components/ItemGrid/ItemGrid.brs

@@ -104,6 +104,8 @@ sub loadInitialItems()
         m.loadItemsTask.itemType = "MusicArtist,MusicAlbum"
         m.loadItemsTask.fallbackType = "MusicAlbum"
         m.loadItemsTask.recursive = false
+        m.itemGrid.itemSize = "[300, 300]"
+        m.itemGrid.itemSpacing = "[ 0, 20 ]"
     else if m.top.parentItem.collectionType = "livetv"
         m.loadItemsTask.itemType = "LiveTV"
 

components/ListPoster.brs

@@ -51,8 +51,12 @@ sub itemContentChanged() as void
     m.poster = m.top.findNode("poster")
     itemData = m.top.itemContent
     m.title.text = itemData.title
+
     if itemData.json.lookup("Type") = "Episode" and itemData.json.IndexNumber <> invalid
         m.title.text = StrI(itemData.json.IndexNumber) + ". " + m.title.text
+    else if itemData.json.lookup("Type") = "MusicAlbum"
+        m.title.font = "font:SmallestSystemFont"
+        m.staticTitle.font = "font:SmallestSystemFont"
     end if
     m.staticTitle.text = m.title.text
 

components/music/MusicArtistAlbumRow.brs

@@ -11,13 +11,13 @@ sub init()
 end sub
 
 sub updateSize()
-    itemWidth = 200
-    itemHeight = 320 ' width * 1.5 + text
+    itemWidth = 250
+    itemHeight = 250
 
     m.top.visible = true
 
     ' size of the whole row
-    m.top.itemSize = [1700, (itemHeight + 40)]
+    m.top.itemSize = [1650, 290]
 
     ' spacing between rows
     m.top.itemSpacing = [0, 0]

components/music/MusicArtistDetails.brs

@@ -2,6 +2,11 @@ sub init()
     m.top.optionsAvailable = false
     setupMainNode()
 
+    ' Load background image
+    m.LoadBackdropImageTask = CreateObject("roSGNode", "LoadItemsTask")
+    m.LoadBackdropImageTask.itemsToLoad = "backdropImage"
+
+    m.backDrop = m.top.findNode("backdrop")
     m.artistImage = m.top.findNode("artistImage")
     m.dscr = m.top.findNode("overview")
     m.dscr.observeField("isTextEllipsized", "onEllipsisChanged")
@@ -17,6 +22,11 @@ end sub
 sub pageContentChanged()
     item = m.top.pageContent
 
+    ' Use metadata to load backdrop image
+    m.LoadBackdropImageTask.itemId = item.json.id
+    m.LoadBackdropImageTask.observeField("content", "onBackdropImageLoaded")
+    m.LoadBackdropImageTask.control = "RUN"
+
     ' Populate scene data
     setScreenTitle(item.json)
     setPosterImage(item.posterURL)
@@ -35,6 +45,23 @@ sub setPosterImage(posterURL)
     end if
 end sub
 
+sub onBackdropImageLoaded()
+    data = m.LoadBackdropImageTask.content[0]
+    m.LoadBackdropImageTask.unobserveField("content")
+    if isValid(data) and data <> ""
+        setBackdropImage(data)
+    end if
+end sub
+
+' Add backdrop image to screen
+sub setBackdropImage(data)
+    if isValid(data)
+        if m.backDrop.uri <> data
+            m.backDrop.uri = data
+        end if
+    end if
+end sub
+
 ' Populate on screen text variables
 sub setOnScreenTextValues(json)
     if isValid(json)

components/music/MusicArtistDetails.xml

@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="MusicArtistDetails" extends="JFGroup">
   <children>
-    <LayoutGroup id="toplevel" layoutDirection="vert" itemSpacings="[-10]" >
+    <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="8" width="1250" ellipsisText=" ...  (Press * to read more)" />
+        <Label id="overview" wrap="true" maxLines="9" width="1250" ellipsisText=" ...  (Press * to read more)" />
       </LayoutGroup>
-      <MusicArtistAlbumRow id="albums" />
+      <Rectangle id='albumRect' translation="[0, 0]" width="1720" height="325" color="0x00000066">
+        <MusicArtistAlbumRow id="albums" translation="[35, 10]" rowLabelColor="#999999" rowLabelFont="font:SmallestSystemFont" />
+      </Rectangle>
     </LayoutGroup>
   </children>
   <interface>