Add song track number and length to album view

components/data/MusicSongData.brs

@@ -4,6 +4,8 @@ sub setFields()
     m.top.id = datum.id
     m.top.title = datum.name
     m.top.overview = datum.overview
+    m.top.trackNumber = datum.IndexNumber
+    m.top.length = datum.RunTimeTicks
 end sub
 
 sub setPoster()

components/data/MusicSongData.xml

@@ -3,6 +3,7 @@
   <interface>
     <field id="id" type="string" />
     <field id="title" type="string" />
+    <field id="trackNumber" type="integer" />
     <field id="image" type="node" onChange="setPoster" />
     <field id="posterURL" type="string" />
     <field id="overview" type="string" />

components/music/MusicAlbumDetails.xml

@@ -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" />
+            <MusicAlbumSongList itemComponentName="SongItem" id="songList" translation="[45, 25]" itemSize="[1170,60]" numRows="7" />
           </Rectangle>
         </LayoutGroup>
       </LayoutGroup>

components/music/MusicAlbumSongList.brs

@@ -1,4 +1,6 @@
 sub init()
+    m.spinner = m.top.findNode("spinner")
+
     m.top.content = getData()
     m.top.setfocus(true)
 end sub
@@ -13,11 +15,17 @@ function getData()
     data = CreateObject("roSGNode", "ContentNode")
 
     for each song in albumData.items
-        songcontent = data.createChild("ContentNode")
-        songcontent.title = song.title
+        songcontent = data.createChild("MusicSongData")
+        songcontent.json = song.json
     end for
 
     m.top.content = data
 
+    hideSpinner()
+
     return data
 end function
+
+sub hideSpinner()
+    m.spinner.visible = false
+end sub

components/music/MusicAlbumSongList.xml

@@ -1,5 +1,8 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="MusicAlbumSongList" extends="LabelList">
+<component name="MusicAlbumSongList" extends="MarkupList">
+  <children>
+    <Spinner id="spinner" translation="[485, 150]" />
+  </children>
   <interface>
     <field id="MusicArtistAlbumData" type="assocarray" onChange="getData" />
   </interface>

components/music/SongItem.brs

@@ -0,0 +1,29 @@
+sub init()
+    m.itemText = m.top.findNode("itemText")
+    m.trackNumber = m.top.findNode("trackNumber")
+    m.tracklength = m.top.findNode("tracklength")
+
+    m.defaultTextColor = m.itemText.color
+end sub
+
+sub itemContentChanged()
+    itemData = m.top.itemContent
+    if itemData = invalid then return
+    m.itemText.text = itemData.title
+    if itemData.trackNumber <> 0
+        m.trackNumber.text = itemData.trackNumber
+    end if
+    m.tracklength.text = ticksToHuman(itemData.length)
+end sub
+
+sub focusChanged()
+    if m.top.itemHasFocus
+        color = "#101010FF"
+    else
+        color = m.defaultTextColor
+    end if
+
+    m.itemText.color = color
+    m.trackNumber.color = color
+    m.tracklength.color = color
+end sub

components/music/SongItem.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="SongItem" extends="Group">
+  <children>
+    <LayoutGroup layoutDirection="horiz" horizAlignment="left" itemSpacings="[5, 0]" translation="[0, 15]"> 
+      <Label id="trackNumber" horizAlign="left" vertAlign="center" font="font:SmallBoldSystemFont" width="80" />
+      <Label id="itemText" horizAlign="left" vertAlign="center" font="font:SmallBoldSystemFont" width="930" />
+      <Label id="tracklength" horizAlign="right" vertAlign="center" font="font:SmallBoldSystemFont" width="150" />
+    </LayoutGroup>
+  </children>
+  <interface>
+    <field id="itemContent" type="node" onChange="itemContentChanged" />
+    <field id="itemHasFocus" type="boolean" onChange="focusChanged" />
+  </interface>
+  <script type="text/brightscript" uri="SongItem.brs" />
+  <script type="text/brightscript" uri="pkg:/source/utils/misc.brs" />
+</component>