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: 
jamilou
Visitor

Need help about the "CustomPlaybackScreen" template

Hello,

I need someone's help please (and first of all sorry about my english. And note that I'm not a developper, just a regular guy trying to use Roku with its full capacity).
I found this template that does exactly what I want. It launches a video and displays a list of links while the video is still playing (if the user presses the OK button).
The only thing not working properly is when I add new entries to the video list, the new entries are outside the screen (since i add a dozen) and I can't see them when I scroll down (the list doesn't move in a way that the first link disappears so as the second becomes the first link visible in the list and a new one appears as the last one).
The code below makes the focus moves from a link to an another and when it reaches the last visible one it continues outside the screen.

The template uses these 2 files :


Sub RunUserInterface()
o = Setup()
o.setup()
o.paint()
o.eventloop()
End Sub

Sub Setup() As Object
this = {
port: CreateObject("roMessagePort")
progress: 0 'buffering progress
position: 0 'playback position (in seconds)
paused: false 'is the video currently paused?
feedData: invalid
playing: 0
playingPrev: 0
playlistSize: 10
canvas: CreateObject("roImageCanvas") 'user interface
player: CreateObject("roVideoPlayer")
load: LoadFeed
setup: SetupFullscreenCanvas
paint: PaintFullscreenCanvas
create_playlist_text: CreatePlaylistText
drawtext: false
eventloop: EventLoop
}

this.targetRect = this.canvas.GetCanvasRect()
this.textRect = {x: 520, y: 480, w: 300, h:200}

this.load()
'Setup image canvas:
this.canvas.SetMessagePort(this.port)
this.canvas.SetLayer(0, { Color: "#D8D8D8" })
this.canvas.Show()

this.player.SetMessagePort(this.port)
this.player.SetLoop(true)
this.player.SetPositionNotificationPeriod(1)
this.player.SetDestinationRect(this.targetRect)

this.player.Play()
this.playingPrev = this.playing

return this
End Sub

Sub EventLoop()
while true
msg = wait(0, m.port)
if msg <> invalid
if msg.isStatusMessage() and msg.GetMessage() = "startup progress"
m.paused = false
print "Raw progress: " + stri(msg.GetIndex())
progress% = msg.GetIndex() / 10
if m.progress <> progress%
m.progress = progress%
m.paint()
end if

'Playback progress (in seconds):
else if msg.isPlaybackPosition()
m.position = msg.GetIndex()
print "Playback position: " + stri(m.position)

else if msg.isRemoteKeyPressed()
index = msg.GetIndex()
print "Remote button pressed: " + index.tostr()
if index = 4 '<LEFT>
m.playing = m.playing - 1
if (m.playing < 0)
m.playing = 2
endif
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
else if index = 8 '<REV>
m.position = m.position - 60
m.player.Seek(m.position * 1000)
else if index = 5 '<RIGHT>
m.playing = m.playing + 1
if (m.playing > 2)
m.playing = 0
endif
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
else if index = 9 '<REV>
m.position = m.position + 60
m.player.Seek(m.position * 1000)
else if index = 2 '<Up>
if m.drawtext
m.playing = m.playing - 1
if (m.playing < 0)
m.playing = m.playlistSize-1
endif
m.paint()
endif
else if index = 3 '<Down>
if m.drawtext
m.playing = m.playing + 1
if (m.playing > m.playlistSize-1)
m.playing = 0
endif
m.paint()
endif
else if index = 13 '<PAUSE/PLAY>
if m.paused m.player.Resume() else m.player.Pause()
else if index = 6 'OK
if m.drawtext
m.drawtext = false
if m.playing <> m.playingPrev
m.player.SetNext(m.playing)
m.player.Play()
m.playingPrev = m.playing
endif
else
m.drawtext = true
endif
m.paint()
end if

else if msg.isPaused()
m.paused = true
m.paint()

else if msg.isResumed()
m.paused = false
m.paint()

end if
endif
end while
End Sub

Sub SetupFullscreenCanvas()
m.canvas.AllowUpdates(false)
m.paint()
m.canvas.AllowUpdates(true)
End Sub

Sub PaintFullscreenCanvas()
splash = []
list = []

if m.progress < 100
progress_bar = {TargetRect: {x: 350, y: 500, w: 598, h: 37}, url: "pkg:/images/progress_bar.png"}
color = "#00a0a0a0"
splash.Push({
url: "pkg:/images/splash.png"
TargetRect: m.targetRect
})
list.Push({
Text: "Loading..."
TextAttrs: { font: "large", color: "#707070" }
TargetRect: m.textRect
})
if m.progress >= 0 AND m.progress < 20
progress_bar.url = "pkg:/images/progress_bar_1.png"
print progress_bar.url
else if m.progress >= 20 AND m.progress < 40
progress_bar.url = "pkg:/images/progress_bar_2.png"
print progress_bar.url
else if m.progress >= 40 AND m.progress < 75
progress_bar.url = "pkg:/images/progress_bar_3.png"
print progress_bar.url
else
progress_bar.url = "pkg:/images/progress_bar_4.png"
print progress_bar.url
endif
list.Push(progress_bar)

end if

if m.drawtext
textArr = m.create_playlist_text()
yTxt = 50
color = "#00000000"
index = 0
for each str in textArr
if index = m.playing
textColor = "#00ff00"
else
textColor = "#dddddd"
endif
list.Push({
Text: str
TextAttrs: {color: textColor, font: "medium"}
TargetRect: {x:0, y:yTxt, w: 500, h: 100}
})
yTxt = yTxt + 100
index = index + 1
end for
else
color = "#00000000"
list.Push({
Text: ""
TextAttrs: {font: "medium"}
TargetRect: {x:100, y:600, w: 300, h: 100}
})
endif

'Clear previous contents
m.canvas.ClearLayer(0)
m.canvas.ClearLayer(1)
m.canvas.ClearLayer(2)
m.canvas.SetLayer(0, { Color: color, CompositionMode: "Source" })
if (splash.Count() > 0)
m.canvas.SetLayer(1, splash)
m.canvas.SetLayer(2, list)
else
m.canvas.SetLayer(1, list)
endif
list.Clear()
splash.Clear()
End Sub

Function LoadFeed() as void
jsonAsString = ReadAsciiFile("pkg:/json/feed.json")
m.feedData = ParseJSON(jsonAsString)
m.playlistSize = m.feedData.Videos.Count()
contentList = []
for each video in m.feedData.Videos
contentList.Push({
Stream: { url: video.url }
StreamFormat: "ts"
})
end for
m.player.SetContentList(contentList)
End Function

Function CreatePlaylistText() as object
textArr = []
for each video in m.feedData.Videos
textArr.Push(video.title)
end for
return textArr
End Function


{
"Videos" : [
{
"Title" : "Jeff Han Demos his Breakthrough Touchscreen",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/JeffHan.jpg",
"Url" : "http://mylink"
},
{
"Title" : "Jeff Han Demos his Breakthrough Touchscreen",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/JeffHan.jpg",
"Url" : "http://mylink"
},
{
"Title" : "Jeff Han Demos his Breakthrough Touchscreen",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/JeffHan.jpg",
"Url" : "http://mylink"
},
{
"Title" : "Jeff Han Demos his Breakthrough Touchscreen",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/JeffHan.jpg",
"Url" : "http://mylink"
},
{
"Title" : "Jeff Han Demos his Breakthrough Touchscreen",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/JeffHan.jpg",
"Url" : "http://mylink"
},
{
"Title" : "David Kelley on Human-Centered Design",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/DavidKelley.jpg",
"Url" : "http://video.ted.com/talks/podcast/DavidKelley_2002_480.mp4"
},
{
"Title" : "Imogen Heap Plays 'Wait It Out'",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/ImogenHeap.jpg",
"Url" : "http://video.ted.com/talks/podcast/ImogenHeap_WaitItOut_2009G_480.mp4"
},
{
"Title" : "Naturally 7 Beatboxes a Whole Band",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/Naturally7.jpg",
"Url" : "http://video.ted.com/talks/podcast/Naturally7FLYBABY_2009_480.mp4"
},
{
"Title" : "Juan Enriquez Wants to Grow Energy",
"Image" : "http://rokudev.roku.com/rokudev/examples/videoplayer/images/JuanEnriquez.jpg",
"Url" : "http://video.ted.com/talks/podcast/JuanEnriquez_2007S_480.mp4"
}
]
}
0 Kudos
9 REPLIES 9
jamilou
Visitor

Re: Need help about the "CustomPlaybackScreen" template

I'm willing to pay someone to help me do this. please PM
0 Kudos
jamilou
Visitor

Re: Need help about the "CustomPlaybackScreen" template

No one ?
0 Kudos
jamilou
Visitor

Re: Need help about the "CustomPlaybackScreen" template

No one willing to help ?
0 Kudos
RokuLeoW
Visitor

Re: Need help about the "CustomPlaybackScreen" template

This question has been resolved -- I have made a scrollable CustomPlaybackScreen template here: https://github.com/LeoWW/custom-playback-channel.
0 Kudos
RIDGELINETV
Visitor

Re: Need help about the "CustomPlaybackScreen" template

"RokuLeoW" wrote:
This question has been resolved -- I have made a scrollable CustomPlaybackScreen template here: https://github.com/LeoWW/custom-playback-channel.


Interesting channel, but perhaps there would be more functionality if the videos played sequentially instead of stopping after each. Or have the list pop up after each video plays.
0 Kudos
EnTerr
Roku Guru

Re: Need help about the "CustomPlaybackScreen" template

"RIDGELINETV" wrote:
Interesting channel, but perhaps there would be more functionality if the videos played sequentially instead of stopping after each. Or have the list pop up after each video plays.

Then perhaps you should make it so 😛

HHOS (only half-joking): one of the advantages of github is one can contribute. Fork the project, make the changes and if proud with the result, send pull request and LeoWW may merge it.
0 Kudos
RIDGELINETV
Visitor

Re: Need help about the "CustomPlaybackScreen" template

"EnTerr" wrote:
"RIDGELINETV" wrote:
Interesting channel, but perhaps there would be more functionality if the videos played sequentially instead of stopping after each. Or have the list pop up after each video plays.

Then perhaps you should make it so 😛

HHOS (only half-joking): one of the advantages of github is one can contribute. Fork the project, make the changes and if proud with the result, send pull request and LeoWW may merge it.


Right now I'm struggling to learn BrightScript so that's a bit above my competency level. But hopefully I will get to the point where I can share projects with others.
0 Kudos
calengineer
Visitor

Re: Need help about the "CustomPlaybackScreen" template

Hi,
Can you please share the template. I'll really appreciate it. The github isn't working anymore.
0 Kudos
EnTerr
Roku Guru

Re: Need help about the "CustomPlaybackScreen" template

"calengineer" wrote:
Can you please share the template. I'll really appreciate it. The github isn't working anymore.

try contacting the author at the email shown in https://github.com/LeoWW - he might not be manning "RokuLeoW" account here anymore
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.