Change Movie Detail buttons to scrolling list

components/Buttons/ButtonData.bs

@@ -0,0 +1,2 @@
+sub init()
+end sub

components/Buttons/ButtonData.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="ButtonData" extends="ContentNode">
+  <interface>
+    <field id="background" type="color" value="" />
+    <field id="focusBackground" type="color" value="" />
+    <field id="iconBlendColor" type="color" value="" />
+    <field id="textColor" type="color" value="" />
+    <field id="focusTextColor" type="color" value="" />
+    <field id="text" type="string" value="" />
+    <field id="padding" type="integer" value="-1" />
+    <field id="height" type="integer" value="" />
+    <field id="width" type="integer" value="" />
+    <field id="fontSize" type="integer" value="35" />
+    <field id="icon" type="string" value="" />
+    <field id="focusIcon" type="string" value="" />
+    <field id="iconSide" type="string" value="left" />
+    <field id="selected" type="boolean" value="false" />
+    <field id="focus" type="boolean" />
+    <field id="escape" type="string" value="" />
+  </interface>
+</component>

components/MovieDetailButton.bs

@@ -0,0 +1,88 @@
+import "pkg:/source/enums/ColorPalette.bs"
+
+sub init()
+    m.buttonBackground = m.top.findNode("buttonBackground")
+    m.buttonIcon = m.top.findNode("buttonIcon")
+    m.buttonText = m.top.findNode("buttonText")
+end sub
+
+sub itemContentChanged()
+    itemData = m.top.itemContent
+
+    m.buttonText.color = ColorPalette.WHITE
+    m.buttonText.font.size = itemData.fontSize
+    m.buttonBackground.blendColor = ColorPalette.TRANSPARENT
+    m.buttonIcon.uri = itemData.icon
+    m.buttonIcon.blendcolor = itemData.iconBlendColor
+    m.buttonText.text = itemData.text
+    m.buttonBackground.height = itemData.height
+    m.buttonBackground.width = itemData.width
+
+    m.focusTextColor = ColorPalette.WHITE
+    m.textColor = ColorPalette.WHITE
+    m.focusBackground = ColorPalette.HIGHLIGHT
+    m.focusIcon = itemData.focusIcon
+    m.icon = itemData.icon
+    m.background = ColorPalette.TRANSPARENT
+    m.height = itemData.height
+    m.width = itemData.width
+    m.padding = itemData.padding
+    m.iconSide = itemData.iconSide
+
+    setIconSize()
+
+    m.top.focus = itemData.focus
+    onFocusChanged()
+end sub
+
+
+sub onFocusChanged()
+    if m.top.focus
+        m.buttonText.color = m.focusTextColor
+        m.buttonIcon.uri = m.focusIcon <> "" ? m.focusIcon : m.icon
+    else
+        m.buttonText.color = m.textColor
+        m.buttonIcon.uri = m.icon
+    end if
+end sub
+
+sub setIconSize()
+    height = m.buttonBackground.height
+    width = m.buttonBackground.width
+    if height > 0 and width > 0
+        ' TODO: Use smallest number between them
+        m.buttonIcon.height = m.height
+
+        if m.padding > 0
+            m.buttonIcon.height = m.buttonIcon.height - m.padding
+        end if
+
+        m.buttonIcon.width = m.buttonIcon.height
+
+        ' Set Icon translation
+        if LCase(m.iconSide) = "right"
+            m.buttonIcon.translation = [m.buttonBackground.width - m.padding - m.buttonIcon.width, ((height - m.buttonIcon.height) / 2)]
+            m.buttonText.translation = [m.padding, ((height - m.buttonText.font.size) / 2)]
+        else
+            m.buttonIcon.translation = [m.padding, ((height - m.buttonIcon.height) / 2)]
+            m.buttonText.translation = [m.padding + m.buttonIcon.width + 20, ((height - m.buttonText.font.size) / 2)]
+        end if
+
+        ' Set text max width
+        m.buttonText.maxWidth = m.width - m.padding - m.buttonIcon.width - 40
+    end if
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+    if not press then return false
+
+    if key = "right" and m.top.focus
+        m.top.escape = "right"
+    end if
+
+    if key = "left" and m.top.focus
+        m.top.escape = "left"
+    end if
+
+    return false
+end function

components/MovieDetailButton.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="MovieDetailButton" extends="Group">
+  <children>
+    <Poster id="buttonBackground" uri="pkg:/images/white.9.png" />
+    <Poster id="buttonIcon" />
+    <ScrollingLabel id="buttonText" font="font:MediumSystemFont" horizAlign="left" />
+  </children>
+  <interface>
+    <field id="itemContent" type="node" onChange="itemContentChanged" />
+
+    <field id="background" type="color" value="" />
+    <field id="focusBackground" type="color" value="" />
+    <field id="iconBlendColor" type="color" value="" />
+    <field id="textColor" type="color" value="" />
+    <field id="focusTextColor" type="color" value="" />
+    <field id="text" type="string" value="" />
+    <field id="padding" type="integer" value="-1" />
+    <field id="height" type="integer" value="" />
+    <field id="width" type="integer" value="" />
+    <field id="fontSize" type="integer" value="35" />
+    <field id="icon" type="string" value="" />
+    <field id="focusIcon" type="string" value="" />
+    <field id="iconSide" type="string" value="left" />
+    <field id="selected" type="boolean" value="false" />
+    <field id="focus" type="boolean" value="false" />
+    <field id="escape" type="string" value="" />
+  </interface>
+</component>

components/movies/MovieDetails.bs

@@ -28,6 +28,8 @@ sub init()
     m.infoGroup = m.top.findNode("infoGroup")
 
     m.buttonGrp = m.top.findNode("buttons")
+    m.buttonGrp.observeField("itemFocused", "onButtonItemFocused")
+    m.buttonGrp.observeField("itemUnfocused", "onButtonItemUnfocused")
     m.buttonGrp.setFocus(true)
     m.top.lastFocus = m.buttonGrp
 
@@ -39,7 +41,7 @@ sub init()
     if not m.global.session.user.policy.EnableSubtitleManagement
         editSubtitleButton = m.top.findNode("editSubtitlesButton")
         if isValid(editSubtitleButton)
-            m.buttonGrp.removeChild(editSubtitleButton)
+            m.buttonGrp.content.removeChild(editSubtitleButton)
         end if
     end if
 
@@ -54,20 +56,8 @@ sub onMovieExtrasHasItems()
 end sub
 
 sub setButtonColors()
-    buttonList = ["play-button", "options-button", "watched-button", "favorite-button", "editSubtitlesButton", "trailer-button", "part-button"]
-
-    for each button in buttonList
-        buttonNode = m.top.findNode(button)
-        buttonNode.background = ColorPalette.TRANSPARENT
-        buttonNode.textColor = ColorPalette.WHITE
-        buttonNode.focusBackground = ColorPalette.HIGHLIGHT
-        buttonNode.focusTextColor = ColorPalette.WHITE
-    end for
-
-    firstButton = m.top.findNode(buttonList[0])
-    firstButton.setFocus(true)
-
-    firstButton.focus = true
+    m.buttonGrp.focusBitmapUri = "pkg:/images/white.9.png"
+    m.buttonGrp.focusBitmapBlendColor = ColorPalette.HIGHLIGHT
 end sub
 
 ' OnScreenShown: Callback function when view is presented on screen
@@ -103,7 +93,7 @@ end sub
 
 sub trailerAvailableChanged()
     if not m.top.trailerAvailable
-        m.buttonGrp.removeChild(m.top.findNode("trailer-button"))
+        m.buttonGrp.content.removeChild(m.top.findNode("trailer-button"))
         return
     end if
 end sub
@@ -112,13 +102,13 @@ sub additionalPartsChanged()
     partButton = m.top.findNode("part-button")
     if not isValidAndNotEmpty(m.top.additionalParts)
         if isValid(partButton)
-            m.buttonGrp.removeChild(partButton)
+            m.buttonGrp.content.removeChild(partButton)
         end if
     end if
 
     if m.top.additionalParts.parts.TotalRecordCount = 0
         if isValid(partButton)
-            m.buttonGrp.removeChild(partButton)
+            m.buttonGrp.content.removeChild(partButton)
         end if
         return
     end if
@@ -680,6 +670,15 @@ sub onButtonGroupEscape()
     end if
 end sub
 
+sub onButtonItemFocused()
+    button = m.buttonGrp.content.getChild(m.buttonGrp.itemFocused)
+    button.focus = true
+end sub
+sub onButtonItemUnfocused()
+    button = m.buttonGrp.content.getChild(m.buttonGrp.itemUnfocused)
+    button.focus = false
+end sub
+
 function onKeyEvent(key as string, press as boolean) as boolean
 
     if key = KeyCode.UP and m.extrasGrid.isInFocusChain()
@@ -689,7 +688,9 @@ function onKeyEvent(key as string, press as boolean) as boolean
             m.top.findNode("extrasFader").reverse = true
             m.top.findNode("pplAnime").control = AnimationControl.START
             m.buttonGrp.setFocus(true)
-            m.buttonGrp.getChild(m.buttonGrp.getChildCount() - 1).focus = true
+
+            m.buttonGrp.content.getChild(m.buttonGrp.content.getChildCount() - 1).focus = true
+
             group = m.global.sceneManager.callFunc("getActiveScene")
             group.lastFocus = m.buttonGrp
             return true
@@ -703,7 +704,7 @@ function onKeyEvent(key as string, press as boolean) as boolean
     if key = KeyCode.OK and m.buttonGrp.hasFocus()
         m.loadStatus = ViewLoadStatus.RELOAD
 
-        buttonList = m.buttonGrp.getChildren(-1, 0)
+        buttonList = m.buttonGrp.content.getChildren(-1, 0)
 
         i = 0
         for each button in buttonList
@@ -724,18 +725,12 @@ function onKeyEvent(key as string, press as boolean) as boolean
     end if
 
     if key = KeyCode.DOWN and m.buttonGrp.hasFocus()
-        buttonList = m.buttonGrp.getChildren(-1, 0)
+        buttonList = m.buttonGrp.content.getChildren(-1, 0)
 
         i = 0
         for each button in buttonList
             if button.focus
-                if i + 1 < m.buttonGrp.getChildCount()
-                    button.focus = false
-                    nextButton = m.buttonGrp.getChild(i + 1)
-                    if isValid(nextButton)
-                        nextButton.focus = true
-                    end if
-                else
+                if i + 1 >= m.buttonGrp.content.getChildCount()
                     if not m.movieExtras.visible then return false
 
                     button.focus = false
@@ -755,27 +750,6 @@ function onKeyEvent(key as string, press as boolean) as boolean
         return true
     end if
 
-    if key = KeyCode.UP and m.buttonGrp.hasFocus()
-        buttonList = m.buttonGrp.getChildren(-1, 0)
-
-        i = 0
-        for each button in buttonList
-            if button.focus
-                if i - 1 >= 0
-                    button.focus = false
-                    nextButton = m.buttonGrp.getChild(i - 1)
-                    if isValid(nextButton)
-                        nextButton.focus = true
-                    end if
-                end if
-                exit for
-            end if
-            i++
-        end for
-
-        return true
-    end if
-
     if key = KeyCode.BACK
         if m.options.visible = true
             m.options.visible = false
@@ -790,7 +764,7 @@ function onKeyEvent(key as string, press as boolean) as boolean
             m.top.findNode("extrasFader").reverse = true
             m.top.findNode("pplAnime").control = AnimationControl.START
             m.buttonGrp.setFocus(true)
-            m.buttonGrp.getChild(m.buttonGrp.getChildCount() - 1).focus = true
+            m.buttonGrp.content.getChild(m.buttonGrp.content.getChildCount() - 1).focus = true
             group = m.global.sceneManager.callFunc("getActiveScene")
             group.lastFocus = m.buttonGrp
             return true

components/movies/MovieDetails.xml

@@ -40,15 +40,24 @@
           </LayoutGroup>
         </LayoutGroup>
 
-        <LayoutGroup id="buttons" layoutDirection="vert" itemSpacings="[10]">
-          <TextButton id="play-button" text="Play" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/play.png" height="75" width="600" />
-          <TextButton id="part-button" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/puzzle.png" height="75" width="600" />
-          <TextButton id="options-button" text="Options" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/options.png" height="75" width="600" />
-          <TextButton id="trailer-button" text="Play Trailer" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/play.png" height="75" width="600" />
-          <TextButton id="watched-button" text="Watched" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/check.png" height="75" width="600" />
-          <TextButton id="favorite-button" text="Favorite" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/heart.png" height="75" width="600" />
-          <TextButton id="editSubtitlesButton" text="Manage Subtitles" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/cc.png" height="75" width="600" />
-        </LayoutGroup>
+        <MarkupList
+          id="buttons"
+          itemComponentName="MovieDetailButton"
+          focusFootprintBitmapUri=""
+          itemSpacing="[0, 10]"
+          itemSize="[600, 75]"
+          numRows="5"
+          vertFocusAnimationStyle="floatingFocus">
+          <ContentNode role="content">
+            <ButtonData id="play-button" focus="true" text="Play" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/play.png" height="75" width="600" />
+            <ButtonData id="part-button" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/puzzle.png" height="75" width="600" />
+            <ButtonData id="options-button" text="Options" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/options.png" height="75" width="600" />
+            <ButtonData id="trailer-button" text="Play Trailer" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/play.png" height="75" width="600" />
+            <ButtonData id="watched-button" text="Watched" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/check.png" height="75" width="600" />
+            <ButtonData id="favorite-button" text="Favorite" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/heart.png" height="75" width="600" />
+            <ButtonData id="editSubtitlesButton" text="Manage Subtitles" iconSide="left" fontSize="35" padding="35" icon="pkg:/images/icons/cc.png" height="75" width="600" />
+          </ContentNode>
+        </MarkupList>
       </LayoutGroup>
     </LayoutGroup>
 

source/static/whatsNew/1.1.4.json

@@ -3,6 +3,10 @@
     "description": "Pressing back on home screen focuses 1st item in row, or exits channel if already there",
     "author": "jimdogx"
   },
+  {
+    "description": "Create My List - a personal queue",
+    "author": "1hitsong"
+  },
   {
     "description": "Fix issue that could prevent changing audio & subtitle tracks",
     "author": "jimdogx"
@@ -15,10 +19,6 @@
     "description": "Fix possible crash when refreshing movie detail data",
     "author": "1hitsong"
   },
-  {
-    "description": "Create My List - a personal queue",
-    "author": "1hitsong"
-  },
   {
     "description": "Fix default sort after changing view of boxset items",
     "author": "1hitsong"