Make stuff look a touch nicer

components/LibItem.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="LibItem" extends="Group">
   <children>
-    <Label id="itemText" horizAlign="center" translation="[0,25]" font="font:MediumSystemFont" width="196" height="65" />
+    <Label id="itemText" horizAlign="center" font="font:MediumSystemFont" height="75" />
   </children>
   <interface>
     <field id="itemContent" type="node" onChange="itemContentChanged"/>
@@ -12,6 +12,12 @@
   sub Init()
     m.itemText = m.top.findNode("itemText")
     m.itemText.text = "Loading..."
+
+    maxSize = m.top.getParent().itemSize
+    m.itemText.width = maxSize[0]
+
+    m.itemText.translation = [0, (maxSize[1] / 2) - 15]
+
   end sub
 
   function itemContentChanged() as void

components/LibList.xml

@@ -13,15 +13,27 @@
     m.top.content = getData()
 
     m.top.numrows = 1
-    m.top.rowSize = 4
+    m.top.rowSize = 5
+
+    dimensions = m.top.getScene().currentDesignResolution
+
+    border = 200
+    m.top.translation = [border, border]
+
+    itemWidth = (dimensions["width"] - border*2) / m.top.rowSize
+    itemHeight = 75
 
     m.top.visible = true
-    m.top.itemSize = [200 * 4 + 20 * 3, 70]
-    m.top.rowHeights = [70]
-    m.top.rowItemSize = [ [200, 70] ]
-    m.top.itemSpacing = [ 0, 70 ]
-    m.top.rowItemSpacing = [ [20, 0] ]
-    m.top.rowLabelOffset = [ [0, 30] ]
+
+    ' size of the whole row
+    m.top.itemSize = [dimensions["width"] - border*2, itemHeight]
+    ' spacing between rows
+    m.top.itemSpacing = [ 0, 10 ]
+
+    ' size of the item in the row
+    m.top.rowItemSize = [ itemWidth, itemHeight ]
+    ' spacing between items in a row
+    m.top.rowItemSpacing = [ 0, 0 ]
 
     m.top.rowFocusAnimationStyle = "floatingFocus"
     m.top.vertFocusAnimationStyle = "floatingFocus"

components/Library.xml

@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="Library" extends="Scene">
   <children>
-    <LibraryRow
-      id="LibrarySelect"
-      visible="true"
-      translation="[150,150]"
-      />
+    <LibraryRow id="LibrarySelect" />
   </children>
 </component>

source/HelperUtils.brs

@@ -1,24 +1,17 @@
-sub itemSelectedQ(msg) as boolean
-  ' "Q" stands for "Question mark" since itemSelected? wasn't acceptable
-  ' Probably needs a better name, but unique for now
-  return type(msg) = "roSGNodeEvent" and msg.getField() = "itemSelected"
-end sub
+' "Q" stands for "Question mark" since nodeEvent? wasn't acceptable
+' Probably needs a better name, but unique for now
+function nodeEventQ(msg, field) as boolean
+  return type(msg) = "roSGNodeEvent" and msg.getField() = field
+end function
 
-sub itemFocusedQ(msg) as boolean
-  ' "Q" stands for "Question mark" since itemSelected? wasn't acceptable
-  ' Probably needs a better name, but unique for now
-  return type(msg) = "roSGNodeEvent" and msg.getField() = "itemFocused"
-end sub
-
-sub buttonSelectedQ(msg) as boolean
-  ' "Q" stands for "Question mark" since buttonSelected? wasn't acceptable
-  ' Probably needs a better name, but unique for now
-  return type(msg) = "roSGNodeEvent" and msg.getField() = "buttonSelected"
-end sub
-
-sub getMsgRowTarget(msg) as object
+function getMsgRowTarget(msg) as object
   node = msg.getRoSGNode()
   coords = node.rowItemSelected
   target = node.content.getChild(coords[0]).getChild(coords[1])
   return target
+end function
+
+sub themeScene(scene)
+  scene.backgroundColor = "#101010"
+  scene.backgroundURI = ""
 end sub

source/ShowScenes.brs

@@ -5,6 +5,7 @@ sub ShowServerSelect()
   scene = screen.CreateScene("ConfigScene")
   screen.show()
 
+  themeScene(scene)
   scene.findNode("prompt").text = "Connect to Serviette"
 
   config = scene.findNode("configOptions")
@@ -42,6 +43,7 @@ sub ShowSignInSelect()
   scene = screen.CreateScene("ConfigScene")
   screen.show()
 
+  themeScene(scene)
   scene.findNode("prompt").text = "Sign In"
 
   config = scene.findNode("configOptions")
@@ -83,6 +85,8 @@ sub ShowLibrarySelect()
 
   screen.show()
 
+  themeScene(scene)
+
   library = scene.findNode("LibrarySelect")
   libs = LibraryList()
   library.libList = libs
@@ -93,7 +97,7 @@ sub ShowLibrarySelect()
     msg = wait(0, port)
     if type(msg) = "roSGScreenEvent" and msg.isScreenClosed() then
       exit while
-    else if itemSelectedQ(msg)
+    else if nodeEventQ(msg, "itemSelected")
       target = getMsgRowTarget(msg)
       if target.libraryType = "movies"
         ShowMovieOptions(target.libraryID)
@@ -112,6 +116,8 @@ sub ShowMovieOptions(library_id)
 
   screen.show()
 
+  themeScene(scene)
+
   options = scene.findNode("MovieSelect")
   options_list = ItemList(library_id, {"limit": 30,
     "page": 1,
@@ -126,11 +132,11 @@ sub ShowMovieOptions(library_id)
     msg = wait(0, port)
     if type(msg) = "roSGScreenEvent" and msg.isScreenClosed() then
       return
-    else if itemSelectedQ(msg)
+    else if nodeEventQ(msg, "itemSelected")
       target = getMsgRowTarget(msg)
       ShowMovieDetails(target.movieID)
       'showVideoPlayer(target.movieID)
-    else if itemFocusedQ(msg)
+    else if nodeEventQ(msg, "itemFocused")
       'print "Selected " + msg.getNode()
     end if
   end while
@@ -144,6 +150,8 @@ sub ShowMovieDetails(movie_id)
 
   screen.show()
 
+  themeScene(scene)
+
   scene.itemJson = ItemMetaData(movie_id)
 
   buttons = scene.findNode("buttons")
@@ -153,7 +161,7 @@ sub ShowMovieDetails(movie_id)
     msg = wait(0, port)
     if type(msg) = "roSGScreenEvent" and msg.isScreenClosed() then
       return
-    else if buttonSelectedQ(msg)
+    else if nodeEventQ(msg, "buttonSelected")
       button = msg.getROSGNode()
       if button.buttonSelected = 0
         showVideoPlayer(movie_id)
@@ -173,6 +181,8 @@ sub showVideoPlayer(id)
 
   screen.show()
 
+  themeScene(scene)
+
   VideoPlayer(scene, id)
 
   while true