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.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
danielFav
Channel Surfer

Re: How to Set Custom Progress Bar in Roku?

You should be able to do it by positioning two Rectangles, one below and one above in the xml. Note that if you want a more customisable progress bar you should create one using a design tool like figma or marvel and adding it to the project as a Poster. Then, in your .brs file you add a observer to the video position and set video.enableUi = false. Something like this:

m.emptyProgressBar = m.top.findNode("emptyProgressBar")
m.colorizedProgressBar = m.top.findNode("colorizedProgressBar")

m.video = m.top.findNode("myVideoNode")
m.video.enableUi = false
m.video.notificationInterval = 1
m.video.seekMode = "accurate"

m.video.observeField("position", "onPositionChanged")

sub onPositionChanged()

     position = m.video.position
     m.colorizedProgressBar.width = ((m.video.position + 1) / m.video.duration) * m.emptyProgressBar.width

end sub

And then add a indicator that follows the current position

0 Kudos