I'm building off the Hero Channel sample code. I have added a rectangle node to the customItem component that is attached to the RowList.
I'm using the Rectangle object to function as a "progress bar" based on the item's bookmark value by varying the width of the Rectangle using a simple Bookmark/Duration formula. When I load up all the content the rectangles show the appropriate progress.
However, if the user watches some more of the video and then exits the video, I need to update the width setting of the rectangle.
I have been unable to figure how to write to the rectangle's width field after the initial. The trigger code is located in the "Hero Screen.brs", but the rectangle is a node attached to a component called "customItem.xml" which is itself declared in the RowList.xml. Below is the relevant xml code (there is no corresponding brs file for the customItem.xml file)
Is it possible to change a field value in the rectangle that's part of the customitem.xml component from a subroutine in the HeroScreen.brs file? I can access RowList from there, but haven't been able to figure out how to "address" the field in the rectangle.
I want to be able to execute something like:
m.progressrectangle.width = progressvalue
Any help would be greatly appreciated.
Thanks.
<?xml version="1.0" encoding="utf-8" ?>
<!-- Copyright 2016 Roku Corp. All Rights Reserved. -->
<component name="HeroScreen" extends="Group" initialFocus="RowList">
<children>
<!-- For transition animation -->
<FadingBackground
id="Background"
width="1920"
height="1080"
color="0x000000"
ShadeOpacity="0.8" />
<!-- The main content -->
<!-- rowItemSize="[[1600,700],[375,197],[375,526],[375,197],[375,197]" -->
<RowList
id="RowList"
itemComponentName="customItem"
focusXOffset="[165]"
itemSize="[1920,220]"
numRows="25"
rowFocusAnimationStyle="FixedFocusWrap"
rowHeights="[800,
300,300,300,300,300,
300,300,300,300,300,
300,300,300,300,300,
300,300,300,300,300,
300,300,300,300]"
rowItemSize="[[1400,700],
[375,197],[375,197],[375,197],[375,197],[375,197],
[375,197],[375,197],[375,197],[375,197],[375,197],
[375,197],[375,197],[375,197],[375,197],[375,197],
[375,197],[375,197],[375,197],[375,197],[375,197],
[375,197],[375,197],[375,197],[375,197]
]"
rowItemSpacing="[[30,0]]"
rowLabelOffset="[[165,8]]"
showRowLabel="[true,true,true,true,true]"
showRowCounter="[true,true,true,false]"
translation="[0,155]"
/>
<!-- For transition animation -->
<Poster
translation="[0,1000]"
uri="pkg:/images/BG_dark_down.png"
width="2000"
height="95" />
<Video
id = "Video"
height = "1080"
width = "1920"
loop = "false"
visible = "false"
/>
</children>
<interface>
<!-- Grid Content Node -->
<field id="content" type="node" alias="RowList.content" />
<!-- Row item selection handler -->
<field id="rowItemSelected" type="intarray" alias="RowList.rowItemSelected" alwaysnotify="true"/>
<!-- Row item focused handler - sets background image uri and focusedContent field -->
<field id="itemFocused" type="intarray" alias="RowList.rowItemFocused" onChange="OnItemFocused"/>
<!-- Interface to focused item (Content Node) -->
<field id="focusedContent" type="node"/>
<!-- # of requests that have bad/no content (not a 200 response) -->
<field id="numBadRequests" type="integer"/>
<!-- video interface -->
<field id="state" type="string"/>
</interface>
<script type="text/brightscript" uri="pkg:/components/HeroScreen/HeroScreen.brs" />
</component>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Copyright 2016 Roku Corp. All Rights Reserved. -->
<component name="customItem" extends="Group">
<interface>
<field id="width" type="float" onChange="updateLayout"/>
<field id="height" type="float" onChange="updateLayout"/>
<field id="itemContent" type="node" onChange="itemContentChanged" />
</interface>
<script type="text/brightscript">
<![CDATA[
sub Init()
m.Poster = m.top.findNode("poster")
[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif] m.ProgressRectangle = m.top.FindNode("ProgressRectangle")[/font][/size]
[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif] success = m.poster.appendChild(m.ProgressRectangle)[/font][/size]
[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif] end sub[/font][/size]
sub itemContentChanged()
m.Poster.loadDisplayMode = "scaleToZoom"
if m.top.height < 400 and m.top.width < 400
m.Poster.loadWidth = 300
m.Poster.loadHeight = 150
end if
updateLayout()
m.Poster.uri = m.top.itemContent.HDPOSTERURL
m.ProgressRectangle = m.poster.getchild(0)
thisBookmark = GetBookmarkData(m.top.itemcontent.guid)
' ? "thisBookmark = ";
' ? thisbookmark
' stop
if thisBookmark > 0
progress = thisBookmark/m.top.itemcontent.duration
m.progressrectangle.width = m.top.itemcontent.ProgressWidth * progress
m.progressrectangle.translation = [0, m.top.itemcontent.ProgressY]
m.progressrectangle.visible = true
' print "progress"
else
m.progressrectangle.visible = false
end if
end sub
sub updateLayout()
if m.top.height > 0 And m.top.width > 0 then
m.Poster.width = m.top.width
m.Poster.height = m.top.height
end if
end sub
function GetBookmarkData(id as Object) As Integer
' ?"GetBookmarkData(" id ")"
sec = CreateObject("roRegistrySection", "Bookmarks")
' check whether bookmark for this item exists
if sec.Exists("Bookmark_" + id.ToStr())
return sec.Read("Bookmark_" + id.ToStr()).ToInt()
end if
return 0
end function
]]>
</script>
<children>
<Poster id="poster" />
<Rectangle
id="ProgressRectangle"
color="0x880088FF"
width="0"
height="15"
translation="[0,0]"
visible = "false" />
</children>
</component>
