Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
out/
out/roku-deploy.zip
.vscode/
19 changes: 0 additions & 19 deletions .vscode/launch.json

This file was deleted.

21 changes: 21 additions & 0 deletions components/ItemDetailsScreen.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<component name="ItemDetailsScreen" extends="Group" initialFocus="ButtonGroup">
<script type="text/brightscript" uri="itemDetailsScreen.brs" />
<interface>
<field id="content" type="node" />
<function name="focusWatch" />
<function name="focusPlus" />
</interface>
<children>
<LayoutGroup id="mainContent" translation="[640,400]" layoutDirection="vert" itemSpacings="20" vertAlignment="center" horizAlignment="center">
<Label id="itemTitle" />
<Label id="itemDescription" />
<Label id="itemTags" />
<Label id="itemTime" />
<ButtonGroup id="ButtonGroup" layoutDirection="horiz" itemSpacings="16">
<Button id="watch" text="WATCH" iconUri="" focusedIconUri="" minWidth="120" maxWidth="260" />
<Button id="plus" iconUri="pkg:/components/icons/plusicon.png" focusedIconUri="pkg:/components/icons/plus.png" minWidth="50" maxWidth="80" />
</ButtonGroup>
</LayoutGroup>
</children>
</component>
11 changes: 11 additions & 0 deletions components/RowItemDataContent.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<component name="RowItemDataContent" extends="ContentNode">
<interface>
<field id="title" type="string" />
<field id="hdPosterURL" type="string" />
<field id="description" type="string" />
<field id="tags" type="array" />
<field id="time" type="integer" />
</interface>
<children></children>
</component>
File renamed without changes.
2 changes: 1 addition & 1 deletion components/rowListItem.xml → components/RowListItem.xml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</interface>
<script type="text/brightscript" uri="pkg:/components/rowListItem.brs" />
<children>
<Poster scaleRotateCenter="[ 160.0, 90.0 ]" id="itemPoster" width="320" height="180" translation="[0,20]">
<Poster id="itemPoster" scaleRotateCenter="[ 160.0, 90.0 ]" width="320" height="180" translation="[0,20]">
<Rectangle id="itemMask" width="320" height="180" scaleRotateCenter="[ 256.0, 144.0 ]" color="0x101010FF" opacity="0.75" />
<Label id="itemTitle" translation="[ 0, 12 ]" scaleRotateCenter="[ 160.0, 90.0 ]" horizAlign="center" width="320" maxLines="1" opacity="0.75" />
<Label id="itemDescription" scaleRotateCenter="[ 160.0, 90.0 ]" translation="[ 0, 120 ]" wrap="true" width="320" maxLines="2" opacity="0.75" />
Expand Down
25 changes: 25 additions & 0 deletions components/RowListScene.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<component name="RowListScene" extends="Scene" initialFocus="mainRowList">
<script type="text/brightscript" uri="rowListScene.brs" />
<children>
<Poster id="mainOverlay" opacity="1.0" uri="https://besthqwallpapers.com/Uploads/3-2-2018/39425/4k-material-design-art-lollipop-geometric-shapes.jpg" height="1080" width="1920" loadDisplayMode="limitSize" />
<Group id="heroDetails" translation="[50,0]" opacity="0.0">
<Poster id="providerLogo" translation="[0,20]" />
<Label id="mainBoldLabel" translation="[0,80]" width="540" wrap="true" maxLines="2" font="font:LargeBoldSystemFont" />
<Label id="dateAndDurationLabel" translation="[0,160]" font="font:MediumBoldSystemFont" />
<Label id="descriptionLabel" translation="[0,210]" width="540" wrap="true" maxLines="2" font="font:MediumSystemFont" />
<Label id="categoryLabel" translation="[0,300]" font="font:LargeBoldSystemFont" />
</Group>
<Animation id="fadeInAnimation" duration="0.4" repeat="false" easeFunction="linear">
<!-- <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[ [60,0], [70,0] ]" fieldToInterp="heroDetails.translation" /> -->
<FloatFieldInterpolator key="[0.0, 0.25, 0.5, 0.75, 1.0]" keyValue="[0.0, 0.25, 0.5, 0.75, 1.0]" fieldToInterp="heroDetails.opacity" />
<FloatFieldInterpolator key="[0.0, 0.25, 0.5, 0.75, 1.0]" keyValue="[0.0, 0.25, 0.5, 0.75, 1.0]" fieldToInterp="mainOverlay.opacity" />
</Animation>
<Animation id="fadeOutAnimation" duration="0.4" repeat="false" easeFunction="linear">
<!-- <Vector2DFieldInterpolator key="[0.0, 1.0]" keyValue="[ [70,0], [60,0] ]" fieldToInterp="heroDetails.translation" /> -->
<FloatFieldInterpolator key="[0.0, 0.25, 0.5, 0.75, 1.0]" keyValue="[1.0, 0.75, 0.5, 0.25, 0.0]" fieldToInterp="heroDetails.opacity" />
<FloatFieldInterpolator key="[0.0, 0.25, 0.5, 0.75, 1.0]" keyValue="[1.0, 0.75, 0.5, 0.25, 0.0]" fieldToInterp="mainOverlay.opacity" />
</Animation>
<RowList id="mainRowList" rowSpacings="[0.0]" focusXOffset="[-150.0]" translation="[ 0, 480 ]" rowLabelOffset="[[220.0,-6.0]]" itemComponentName="RowListItem" numRows="2" itemSize="[ 1608, 250 ]" rowItemSize="[ [368, 250] ]" rowHeights="[250.0]" vertFocusAnimationStyle="fixedFocusWrap" rowFocusAnimationStyle="fixedFocusWrap" showRowLabel="[true]" rowItemSpacing="[[0.0,0.0]]" drawFocusFeedback="false" rowLabelFont="font:LargeBoldSystemFont" />
</children>
</component>
36 changes: 24 additions & 12 deletions components/data.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,17 @@
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
"title": "Sample Item3",
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
Expand Down Expand Up @@ -65,15 +67,17 @@
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
"title": "Sample Item3",
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
Expand Down Expand Up @@ -113,15 +117,17 @@
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
"title": "Sample Item3",
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
Expand Down Expand Up @@ -161,15 +167,17 @@
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
"title": "Sample Item3",
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
Expand Down Expand Up @@ -209,15 +217,17 @@
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
"title": "Sample Item3",
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
Expand Down Expand Up @@ -257,15 +267,17 @@
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
"title": "Sample Item3",
"thumbnail": "https://dummyimage.com/320x180/000/fff",
"brandedThumbnail": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"shortDescription": "A live description",
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing."
"longDescription": "Dolor occaecat esse non non Lorem velit proident duis cupidatat sit elit sit ea adipisicing.",
"tags": ["linear", "news", "celebrity"]
},
{
"id": "1509428502953",
Expand Down
Binary file added components/icons/plus.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added components/icons/plusIcon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions components/itemDetailsScreen.brs
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
sub init()
m.mainContent = m.top.findNode("mainContent")
m.itemTitle = m.mainContent.findNode("itemTitle")
m.itemDescription = m.mainContent.findNode("itemDescription")
m.itemTags = m.mainContent.findNode("itemTags")
m.itemTime = m.mainContent.findNode("itemTime")
m.ButtonGroup = m.mainContent.findNode("ButtonGroup")
m.top.ObserveField("content", "handleItemDetails")
m.ButtonGroup.focusedTextFont = "font:LargeBoldSystemFont"
m.ButtonGroup.textFont = "font:LargeBoldSystemFont"
m.ButtonGroup.vertAlignment = "center"
m.ButtonGroup.horizAlignment = "center"
Comment thread
mcherri marked this conversation as resolved.


ratio = m.global.ratio

m.mainContent.translation = [cint(m.mainContent.translation[0] * ratio), cint(m.mainContent.translation[1] * ratio)]

m.watch = m.ButtonGroup.findNode("watch")
m.plus = m.ButtonGroup.findNode("plus")
end sub

sub handleItemDetails()
m.itemTitle.text = m.top.content.title
m.itemDescription.text = m.top.content.description
m.itemTime.text = "Duration : " + formatDuration(m.top.content.time) + " Hour(s)"
if m.top.content.tags <> invalid
seperator = ""
for each tag in m.top.content.tags
m.itemTags.text += seperator + tag
seperator = " - "
end for
else
m.itemTags.text = "No tags available"
end if
end sub

function formatDuration(duration as integer) as string
minutes = (duration \ 60).toStr()
seconds = (duration MOD 60).toStr()
if len(seconds) < 2
seconds = "0" + seconds
end if
return minutes + ":" + seconds
end function

sub focusWatch()
m.watch.setFocus(true)
end sub

sub focusPlus()
m.plus.setFocus(true)
end sub
30 changes: 25 additions & 5 deletions components/rowListContent.brs
Original file line number Diff line number Diff line change
@@ -1,11 +1,31 @@
sub init()
m.global.http.request = { payload: {
m.http = createObject("roSGNode", "httpTask")
m.http.request = {
payload: {
userId: 1,
title: "WOW, IT WORKED ^_^",
}, url: "https://jsonplaceholder.typicode.com/albums", requestType: "GET"}
m.global.http.observeFieldScoped("response", "useResponse")
},
url: "https://alghool.net/RokuDev/data.json",
requestType: "GET"
}
m.http.control = "RUN"
m.http.observeFieldScoped("response", "populateRowList")
end sub

sub useResponse()
?m.global.http.response
sub populateRowList()
for each item in m.http.response.body
itemNode = m.top.createChild("ContentNode")
itemNode.title = item.title
for each data in item.data
itemData = itemNode.createChild("rowItemDataContent")
itemData.setFields({
title: data.title
hdPosterURL: data.thumbnail
description: data.longDescription
tags: data.tags
time: data.time
})
end for
m.top.appendChild(itemNode)
end for
end sub
37 changes: 24 additions & 13 deletions components/rowListItem.brs
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,36 @@ sub init()
m.itemTitle = m.top.findNode("itemTitle")
m.itemMask = m.top.findNode("itemMask")
m.itemDescription = m.top.findNode("itemDescription")
m.parentComponent = m.top.getScene()

ratio = m.global.ratio

m.itemPoster.scaleRotateCenter = [cint(m.itemPoster.scaleRotateCenter[0] * ratio), cint(m.itemPoster.scaleRotateCenter[1] * ratio)]
m.itemPoster.width = cint(m.itemPoster.width * ratio)
m.itemPoster.height = cint(m.itemPoster.height * ratio)
m.itemPoster.translation = [cint(m.itemPoster.translation[0] * ratio), cint(m.itemPoster.translation[1] * ratio)]

m.itemMask.width = cint(m.itemMask.width * ratio)
m.itemMask.height = cint(m.itemMask.height * ratio)
m.itemMask.scaleRotateCenter = [cint(m.itemMask.scaleRotateCenter[0] * ratio), cint(m.itemMask.scaleRotateCenter[1] * ratio)]

m.itemTitle.width = cint(m.itemTitle.width * ratio)
m.itemTitle.translation = [cint(m.itemTitle.translation[0] * ratio), cint(m.itemTitle.translation[1] * ratio)]
m.itemTitle.scaleRotateCenter = [cint(m.itemTitle.scaleRotateCenter[0] * ratio), cint(m.itemTitle.scaleRotateCenter[1] * ratio)]
m.itemTitle.font.size = cint(32 * ratio)

m.itemDescription.width = cint(m.itemDescription.width * ratio)
m.itemDescription.translation = [cint(m.itemDescription.translation[0] * ratio), cint(m.itemDescription.translation[1] * ratio)]
m.itemDescription.scaleRotateCenter = [cint(m.itemDescription.scaleRotateCenter[0] * ratio), cint(m.itemDescription.scaleRotateCenter[1] * ratio)]
m.itemDescription.font.size = cint(16 * ratio)
end sub

sub showContent()
itemContent = m.top.itemContent
m.TITLE = itemContent.title
m.itemPoster.uri = itemContent.HDPosterUrl
m.itemPoster.uri = itemContent.hdPosterURL
m.itemTitle.text = itemContent.title
m.itemDescription.text = itemContent.description
m.itemTitle.font.size = INT(32 * m.global.ratio)
m.itemDescription.font.size = INT(24 * m.global.ratio)
m.itemTitle.width = INT(m.itemTitle.width * m.global.ratio)
m.itemDescription.width = INT(m.itemDescription.width * m.global.ratio)
m.itemTitle.translation = [INT(m.itemTitle.translation[0] * m.global.ratio), INT(m.itemTitle.translation[1] * m.global.ratio)]
m.itemDescription.translation = [INT(m.itemDescription.translation[0] * m.global.ratio), INT(m.itemDescription.translation[1] * m.global.ratio)]
m.itemMask.width = INT(m.itemMask.width * m.global.ratio)
m.itemMask.height = INT(m.itemMask.height * m.global.ratio)
m.itemPoster.width = INT(m.itemPoster.width * m.global.ratio)
m.itemPoster.height = INT(m.itemPoster.height * m.global.ratio)
end sub

sub handleFocus()
Expand All @@ -29,6 +41,5 @@ sub handleFocus()
end sub

sub handleRowFocus()
focusPercent = m.top.rowFocusPercent
m.itemMask.opacity = 0.85 - (focusPercent * 0.85)
m.itemMask.opacity = 0.85 - (m.top.rowFocusPercent * 0.85)
end sub
Loading