UI updates on Live TV Channel Guide

components/liveTv/ChannelInfo.bs

@@ -0,0 +1,32 @@
+import "pkg:/source/enums/ColorPalette.bs"
+import "pkg:/source/utils/misc.bs"
+
+sub init()
+    m.backdrop = m.top.findNode("backdrop")
+    m.backdrop.color = "#383838"
+
+    m.channelTitle = m.top.findNode("channelTitle")
+    m.channelTitle.font.size = 27
+    m.channelTitle.color = "#eeeeee"
+end sub
+
+sub onWidthChanged()
+    m.backdrop.width = m.top.width
+    m.channelTitle.maxWidth = m.top.width
+end sub
+
+sub onHeightChanged()
+    m.backdrop.height = m.top.height
+    m.channelTitle.height = m.top.height
+end sub
+
+sub contentChanged()
+
+    itemData = m.top.content
+
+    if not isValid(itemData) then return
+
+    if isValid(itemData.title)
+        m.channelTitle.text = itemData.LookupCI("title")
+    end if
+end sub

components/liveTv/ChannelInfo.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component name="ChannelInfo" extends="Group">
+  <children>
+    <Rectangle id="backdrop" />
+    <ScrollingLabel id="channelTitle" horizAlign="center" vertAlign="center" />
+  </children>
+  <interface>
+    <field id="content" type="node" onChange="contentChanged" />
+    <field id="width" type="integer" onChange="onWidthChanged" />
+    <field id="height" type="integer" onChange="onHeightChanged" />
+  </interface>
+</component>

components/liveTv/ProgramDetails.bs

@@ -1,8 +1,12 @@
+import "pkg:/source/enums/ColorPalette.bs"
 import "pkg:/source/utils/config.bs"
 import "pkg:/source/utils/misc.bs"
 
 sub init()
 
+    backdrop = m.top.findNode("backdrop")
+    backdrop.color = ColorPalette.ELEMENTBACKGROUND
+
     ' Max "Overview" lines to show in Preview and Detail
     m.maxPreviewLines = 5
     m.maxDetailLines = 14

components/liveTv/ProgramDetails.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <component name="ProgramDetails" extends="JFGroup">
     <children>
+        <Rectangle id="backdrop" height="1080" width="1920" />
 
         <!-- Selected Item Details -->
         <maskGroup id="backgroundMask" maskUri="pkg:/images/backgroundmask.png" translation="[1320, 150]" maskSize="[500,375]">

components/liveTv/schedule.bs

@@ -21,6 +21,8 @@ sub init()
 
     m.scheduleGrid.focusBitmapBlendColor = ColorPalette.HIGHLIGHT
     m.scheduleGrid.programTitleFocusedColor = ColorPalette.WHITE
+    m.scheduleGrid.timeLabelColor = ColorPalette.LIGHTGREY
+    m.scheduleGrid.timeLabelFont.size = 30
 
     m.gridMoveAnimation = m.top.findNode("gridMoveAnimation")
     m.gridMoveAnimationPosition = m.top.findNode("gridMoveAnimationPosition")

components/liveTv/schedule.xml

@@ -8,6 +8,7 @@
 
     <TimeGrid
       id="scheduleGrid"
+      channelInfoComponentName="ChannelInfo"
       translation="[0,600]"
       automaticLoadingDataFeedback="false"
       showLoadingDataFeedback="true"