Add component library sample project

Author: TwitchBronBron

component-library-and-project/.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "brightscript",
+            "request": "launch",
+            "name": "Debug",
+            "rootDir": "${workspaceFolder}/app",
+            "stopOnEntry": false,
+            "files": [
+                "**/*"
+            ],
+            "componentLibrariesPort": 8080,
+            "componentLibraries": [
+                {
+                    "rootDir": "${workspaceFolder}/complib/",
+                    "outFile": "complib.zip",
+                    "files": [
+                        "**/*"
+                    ]
+                }
+            ]
+        }
+    ]
+}

component-library-and-project/app/components/MainScene.brs

@@ -0,0 +1,37 @@
+sub init()
+    loadComplib()
+end sub
+
+sub loadComplib()
+    componentLibrary = m.top.createChild("ComponentLibrary")
+    componentLibrary.observeFieldScoped("loadStatus", "onComponentLibraryLoadStatusChange")
+    'get the complib url from the manifest
+    componentLibrary.uri = createObject("roAppInfo").GetValue("complib_url")
+end sub
+
+' observe the ComponentLibrary's loadStatus
+sub onComponentLibraryLoadStatusChange(event as object)
+    status = event.getData()
+    component = event.getRoSgNode()
+    print "Complib loadStatus: ", status
+
+    'complib has started loading (but isn't ready yet)
+    if status = "loading" then return
+
+    if status = "ready" then
+        'Complib has loaded and is ready to use
+        render()
+    else
+        'there was an error loading the complib
+        m.dialog = createObject("roSGNode", "Dialog")
+        'show a popup explaining that the complib failed to load
+        dialog.update({
+            title: "Error!",
+            message: "Failed to load component library"
+        })
+    end if
+end sub
+
+sub render()
+    m.top.createChild("SampleComplib:RedditViewer")
+end sub

component-library-and-project/app/components/MainScene.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="MainScene" extends="Scene">
+	<script uri="MainScene.brs" />
+</component>

component-library-and-project/app/manifest

@@ -0,0 +1,10 @@
+# Channel Details
+title=app
+major_version=1
+minor_version=0
+build_version=0
+splash_color=#808080
+splash_min_time=0
+ui_resolutions=fhd
+bs_const=DEBUG=true
+complib_url=http://192.168.1.22:8080/complib.zip

component-library-and-project/app/source/main.brs

@@ -0,0 +1,19 @@
+sub Main(inputArguments as object)
+  screen = createObject("roSGScreen")
+  m.port = createObject("roMessagePort")
+  screen.setMessagePort(m.port)
+  scene = screen.CreateScene("MainScene")
+  screen.show()
+  scene.setFocus(true)
+
+  while true
+    msg = wait(0, m.port)
+    msgType = type(msg)
+
+    if msgType = "roSGScreenEvent" then
+      if msg.isScreenClosed() then
+        return
+      end if
+    end if
+  end while
+end sub

component-library-and-project/complib/components/RedditViewer.brs

@@ -0,0 +1,56 @@
+sub init()
+  m.list = m.top.FindNode("list")
+  m.list.observeField("itemSelected", "onItemSelected")
+  updateList()
+end sub
+
+sub updateList()
+  if m.progress = invalid then
+    m.progress = createObject("roSGNode", "ProgressDialog")
+    m.progress.title = "Loading..."
+    m.progress.message = "Did you know:" + chr(10) + "You can use the replay key to update the list!"
+    m.dialog = m.progress
+  end if
+
+  if m.subRedditRequest <> invalid then
+    m.subRedditRequest.unobserveField("content")
+  end if
+  m.subRedditRequest = createObject("roSGNode", "GetSubReddit")
+  m.subRedditRequest.subReddit = "/r/Roku"
+  m.subRedditRequest.observeField("content", "onSubRedditRequestContentChange")
+  m.subRedditRequest.control = "RUN"
+end sub
+
+sub onSubRedditRequestContentChange(event as object)
+  content = event.getData()
+  m.list.content = content
+  m.list.setFocus(true)
+
+  if m.progress <> invalid then
+    m.progress.close = true
+    m.progress = invalid
+  end if
+
+end sub
+
+sub onItemSelected(event as object)
+  post = event.getRoSGNode().content.getChild(event.getData())
+
+  m.dialog = createObject("roSGNode", "Dialog")
+  m. dialog.title = post.title
+  m.dialog.message = post.description
+  print post
+end sub
+
+function onKeyEvent(key as string, press as boolean) as boolean
+  handled = false
+  if not press then return handled
+
+  if key = "back" then
+    m.top.appExit = true
+  else if key = "replay" then
+    updateList()
+  end if
+
+  return handled
+end function

component-library-and-project/complib/components/RedditViewer.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="RedditViewer" extends="Group">
+  <script type="text/brightscript" uri="RedditViewer.brs" />
+
+  <interface>
+    <field id="appExit" type="bool" alwaysnotify="true" value="false"/>
+  </interface>
+
+  <children>
+    <MarkupList id="list" itemComponentName="ListItem" itemSize="[1900, 250]" itemSpacing="[0, 20]" drawFocusFeedback="false" translation="[20, 20]" wrapDividerBitmapUri="" />
+  </children>
+</component>

component-library-and-project/complib/components/Tasks/GetSubReddit.brs

@@ -0,0 +1,63 @@
+sub init()
+  m.top.functionName = "fetch"
+end sub
+
+sub fetch()
+  listContent = createObject("roSGNode", "ContentNode")
+  request = createObject("roUrlTransfer")
+  request.setCertificatesFile("common:/certs/ca-bundle.crt")
+  request.initClientCertificates()
+  request.setUrl("https://www.reddit.com" + m.top.subReddit + "/.json")
+  response = request.getToString()
+  json = parseJson(response)
+
+  listItems = []
+  for each postDataContainer in json.data.children
+    postData = postDataContainer.data
+    post = {
+      title: postData.title,
+      selfText: postData.selfText,
+      thumbnail: postData.thumbnail,
+      isVideo: postData.is_video,
+      url: postData.url,
+      isSelf: postData.isSelf
+    }
+
+    itemContent = {
+      subType: "ContentNode"
+      isSelf: post.isSelf
+      title: post.title
+      description: post.selfText
+      url: post.url
+    }
+    if post.thumbnail <> "self" and post.thumbnail <> "default" and post.thumbnail <> "image" then
+      itemContent.SDPosterUrl = post.thumbnail
+    end if
+
+    if post.isVideo then
+      itemContent.videoUrl = postData.secure_media.reddit_video.hls_url
+      itemContent.streamformat = "hls"
+    end if
+
+    if postData.media <> invalid and postData.media.type = "youtube.com" then
+      itemContent.videoUrl = postData.url
+      itemContent.streamFormat = "youtube"
+    end if
+
+    extension = right(postData.url, 4)
+    if extension = ".png" or extension = ".jpg" then
+      itemContent.SDPosterUrl = postData.url
+    end if
+
+    if postData.media <> invalid and postData.media.reddit_video <> invalid then
+      itemContent.isRedditVideo = true
+    else
+      itemContent.isRedditVideo = false
+    end if
+
+    listItems.push(itemContent)
+  end for
+
+  listContent.update(listItems, true)
+  m.top.content = listContent
+end sub

component-library-and-project/complib/components/Tasks/GetSubReddit.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<component name="GetSubReddit" extends="Task">
+  <script type="text/brightscript" uri="GetSubReddit.brs" />
+
+  <interface>
+    <field id="subReddit" type="string"/>
+    <field id="content" type="Node"/>
+  </interface>
+</component>

component-library-and-project/complib/components/UI/ListItem/ListItem.brs

@@ -0,0 +1,31 @@
+sub init()
+  m.imagePoster = m.top.findNode("imagePoster")
+  m.itemCursor = m.top.findNode("itemCursor")
+  m.labelGroup = m.top.findNode("labelGroup")
+  m.titleLabel = m.top.findNode("titleLabel")
+  m.descriptionLabel = m.top.findNode("descriptionLabel")
+  m.maxWidth = 1880
+  m.top.maxLabelWidth = m.maxWidth
+end sub
+
+sub onItemContentChange()
+  m.itemContent = m.top.itemContent
+  m.titleLabel.text = m.itemContent.title
+  m.descriptionLabel.text = m.itemContent.description
+
+  image = m.top.itemContent.SDPOSTERURL
+  if image = "" then
+    m.imagePoster.visible = false
+    m.labelGroup.translation = [0, 0]
+    m.maxLabelWidth = m.maxLabelWidth
+  else
+    m.imagePoster.uri = m.top.itemContent.SDPOSTERURL
+    m.imagePoster.visible = true
+    m.labelGroup.translation = [m.imagePoster.width + 20, 0]
+    m.top.maxLabelWidth = m.maxWidth - (m.imagePoster.width + 20 + 40)
+  end if
+end sub
+
+sub onFocusPercentChange()
+  m.itemCursor.opacity = m.top.focusPercent
+end sub