Transition TV show details to panels

components/ButtonGroupHoriz.xml

@@ -13,11 +13,15 @@
     if not press then return false
     if key = "right"
       i = m.top.buttonFocused
-      m.top.focusButton = i + 1
+      target = i + 1
+      if target >= m.top.getChildCount() then return false
+      m.top.focusButton = target
       return true
     else if key = "left"
       i = m.top.buttonFocused
-      m.top.focusButton = i - 1
+      target = i - 1
+      if target < 0 then return false
+      m.top.focusButton = target
       return true
     else if key = "up" or key = "down"
       m.top.escape = true

components/tvshows/details.brs

@@ -27,7 +27,7 @@ sub itemContentChanged()
   if itemData.taglines.count() > 0
     setFieldText("tagline", itemData.taglines[0])
   end if
-  m.top.findNode("TVSeasonSelect").TVSeasonData = m.top.itemContent.seasons
+  ' m.top.findNode("TVSeasonSelect").TVSeasonData = m.top.itemContent.seasons
 end sub
 
 sub setFieldText(field as string, value)

components/tvshows/details.xml

@@ -1,50 +1,51 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="TVShowItemDetailScene" extends="Scene">
   <children>
-    <LayoutGroup id="main_group" layoutDirection="horiz" >
-      <Poster id="tvshowPoster"
-        translation="[150,150]"
-        width="400" height="600" />
-      <LayoutGroup layoutDirection="vert" translation="[355, 150]" itemSpacings="[25]">
-        <Label id="title" font="font:LargeBoldSystemFont" />
-        <LayoutGroup layoutDirection="horiz" itemSpacings="[150]">
-          <Label id="releaseYear" />
-          <Label id="officialRating" />
-          <Label id="communityRating" />
-        </LayoutGroup>
-        <Label id="genres" />
-        <ButtonGroupHoriz id="buttons" itemSpacings="[10]">
-          <Button text="Play" id="play-button" />
-          <Button text="Shuffle" id="shuffle-button" />
-          <Button text="Watched" id="watched-button" />
-          <Button text="Favorite" id="favorite-button" />
-        </ButtonGroupHoriz>
-        <Label id="tagline" />
-        <Label id="overview" />
-        <Label id="history" />
-
-      </LayoutGroup>
-    </LayoutGroup>
-    <!-- We need some element to move focus (and shift elements up and down) -->
-    <TVSeasonRow id="TVSeasonSelect" visible="true" />
+    <PanelSet id="panelset">
+      <Panel id="panel-desc">
+        <TVShowDescription id="description" />
+      </Panel>
+      <Panel id="panel-seasons">
+        <TVSeasonRow id="seasons" />
+      </Panel>
+    </PanelSet>
   </children>
   <interface>
-    <field id="itemContent" type="node" onChange="itemContentChanged" />
+    <field id="itemData" type="node" onChange="dataChanged" />
+    <field id="seasonData" type="associativearray" onChange="seasonChanged" />
+    <field id="focus" type="node" onChange="focusChanged" alias="panelset.focusedChild" alwaysNotify="false" />
   </interface>
-  <script type="text/brightscript" uri="pkg:/components/tvshows/details.brs" />
   <script type="text/brightscript">
   <![CDATA[
-  sub init()
-    main = m.top.findNode("main_group")
-    seasons = m.top.findNode("TVSeasonSelect")
-    dimensions = m.top.getScene().currentDesignResolution
+    sub init()
+      set = m.top.findNode("panelset")
+      set.height = 1080
 
-    main.translation = [50, 50]
-    ' TODO - validate this height against the height of main
-    seasons.translation = [50, 800]
+      panel = set.findNode("panel-desc")
+      panel.panelSize = "full"
+      panel.hasNextPanel = true
+      panel.isFullScreen = true
+      panel.leftPosition = 150
 
-    m.top.findNode("buttons").setFocus(true)
-  end sub
+      panel2 = set.findNode("panel-seasons")
+      panel2.panelSize = "full"
+      panel2.hasNextPanel = false
+      panel2.isFullScreen = true
+    end sub
+
+    sub dataChanged()
+      m.top.findNode("description").itemContent = m.top.itemData
+    end sub
+
+    sub seasonChanged()
+      m.top.findNode("seasons").TVSeasonData = m.top.seasonData
+    end sub
+
+    sub focusChanged()
+      if m.top.focus.id = "panel-desc"
+        m.top.focus.findNode("buttons").setFocus(true)
+      end if
+    end sub
   ]]>
   </script>
 </component>

components/tvshows/group-description.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="TVShowDescription" extends="Group">
+  <children>
+    <LayoutGroup id="main_group" layoutDirection="horiz" itemSpacings="[15]" >
+      <Poster id="tvshowPoster" width="400" height="600" />
+      <LayoutGroup layoutDirection="vert" itemSpacings="[25]">
+        <Label id="title" font="font:LargeBoldSystemFont" />
+        <LayoutGroup layoutDirection="horiz" itemSpacings="[150]">
+          <Label id="releaseYear" />
+          <Label id="officialRating" />
+          <Label id="communityRating" />
+        </LayoutGroup>
+        <Label id="genres" />
+        <ButtonGroupHoriz id="buttons" itemSpacings="[10]">
+          <Button text="Play" id="play-button" />
+          <Button text="Shuffle" id="shuffle-button" />
+          <Button text="Favorite" id="favorite-button" />
+        </ButtonGroupHoriz>
+        <Label id="tagline" />
+        <Label id="overview" wrap="true" width="900" maxLines="4" />
+        <Label id="history" />
+      </LayoutGroup>
+    </LayoutGroup>
+  </children>
+  <interface>
+    <field id="itemContent" type="node" onChange="itemContentChanged" />
+    <field id="focused" type="boolean" onChange="focusChanged" />
+  </interface>
+  <script type="text/brightscript" uri="pkg:/components/tvshows/details.brs" />
+  <script type="text/brightscript">
+  <![CDATA[
+    sub init()
+      buttons = m.top.findNode("buttons")
+
+      buttons.iconUri = ""
+
+      for each button in buttons.getChildren(-1, 0)
+        button.maxWidth = 350
+        button.minWidth = 350
+      end for
+    end sub
+
+    sub focusChanged()
+      print "HI"
+
+      print m.top.focused
+
+    end sub
+  ]]>
+  </script>
+</component>

source/ShowScenes.brs

@@ -385,13 +385,15 @@ sub ShowTVShowDetails(show_id)
 
   content = createObject("roSGNode", "TVShowData")
   content.full_data = ItemMetaData(show_id)
-  scene.itemContent = content
-  x = TVSeasons(show_id)
-  scene.itemContent.seasons = TVSeasons(show_id)
+  scene.itemData = content
+  scene.seasonData = TVSeasons(show_id)
+
+  scene.findNode("panel-desc").findNode("buttons").setFocus(true)
 
   'buttons = scene.findNode("buttons")
   'buttons.observeField("buttonSelected", port)
 
+
   while true
     msg = wait(0, port)
     if type(msg) = "roSGScreenEvent" and msg.isScreenClosed() then