Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Streaming Star

Video screen plus episode lists


In all the scene graph video examples I have seen the video is played full screen. Is it possible to create a panel with the video and a RowList containing the episodes so that the episodes can be selected and changed?

Something like...


0 Kudos

Re: Video screen plus episode lists

Hi Andy,

First, please be aware that when you are doing this on lower end devices it will be slower. This can be worked around by changing image resolutions, removing animations, etc.

Now to answer your question this is definitely possible. Your video will take up however much space on your screen, based off the UI resolutions field in your manifest file. fhd = 1920x1080, hd = 1280x720, sd = 720x480. This means if I'm working with fhd and I want my video to take up the top-left quarter of the screen I would just set my video node fields height = "540", width = "960". This is the top left corner because translation is still defaulted at "[0,0]" starting at the top left corner of the screen. Translation can be changed to set your video wherever you like.

Now for your RowList you can set the translation field = "[0, 500]" if you want your first row to start at 500 pixels down from the top of the screen. The reason this field is not seen on the RowList SDK page is because it inherits this field from the Group SDK page because ArrayGrid extends Group and RowList extends ArrayGrid.

Now if you want to it to change episodes based off of your RowList, simply set an observer for itemSelected to play whatever content video file is in each element of your RowList.

(Done in brs after finding RowList and Video node in Scene Component)
m.RowList.observeField("itemSelected", "ChangeEpisode")

Function ChangeEpisode()
m.Video.content = m.RowList.content.getChild(m.RowList.rowItemFocused[0]).getChild(m.RowList.rowItemFocused[1])
End Function

Note that this is specific to the parse method from the S-Three SceneGraph example. rowItemFocused[0] is the first element of a 2D array that points to the row and rowItemFocused [1] is the second element of a 2D array that points to the column.
0 Kudos