Merge pull request #698 from 1hitsong/add-info-songlist

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.brs

@@ -9,6 +9,7 @@ sub init()
     m.infoGroup = m.top.FindNode("infoGroup")
     m.songListRect = m.top.FindNode("songListRect")
 
+    m.songList.observeField("doneLoading", "onDoneLoading")
     m.spinner = m.top.findNode("spinner")
     m.spinner.visible = true
 
@@ -24,7 +25,6 @@ end sub
 ' Set values for displayed values on screen
 sub pageContentChanged()
     item = m.top.pageContent
-    m.spinner.visible = false
 
     setPosterImage(item.posterURL)
     setScreenTitle(item.json)
@@ -165,6 +165,11 @@ sub createDialogPallete()
     }
 end sub
 
+sub onDoneLoading()
+    m.songList.unobservefield("doneLoading")
+    m.spinner.visible = false
+end sub
+
 sub OnScreenHidden()
     m.spinner.visible = false
 end sub

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

@@ -13,11 +13,13 @@ 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
 
+    m.top.doneLoading = true
+
     return data
 end function

components/music/MusicAlbumSongList.xml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<component name="MusicAlbumSongList" extends="LabelList">
+<component name="MusicAlbumSongList" extends="MarkupList">
   <interface>
     <field id="MusicArtistAlbumData" type="assocarray" onChange="getData" />
+    <field id="doneLoading" type="boolean" value="false"/>
   </interface>
   <script type="text/brightscript" uri="MusicAlbumSongList.brs" />
 </component>

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>