Made the interface to exchange information from item to hero

.gitignore

@@ -1,2 +1,3 @@
 out/
 out/roku-deploy.zip
+.vscode/

components/rowListContent.brs

@@ -1,11 +1,25 @@
 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("ContentNode")
+            itemData.setFields({
+                title: data.title
+                HDPosterURL: data.thumbnail
+                description: data.longDescription
+            })
+        end for
+        m.top.appendChild(itemNode)
+    end for
 end sub

components/rowListItem.brs

@@ -3,6 +3,7 @@ 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()
 end sub
 
 sub showContent()
@@ -26,6 +27,16 @@ end sub
 sub handleFocus()
     scale = 1 + (m.top.focusPercent * 0.15)
     m.itemPoster.scale = [scale, scale]
+    if m.top.focusPercent = 1
+        m.parentComponent.backgroundURI = m.itemPoster.uri
+        m.parentComponent.HeroDetails = {
+            MainBoldLabel: m.itemTitle.text
+            DateAndDurationLabel: "21 Sep 21 | 3m"
+            DescriptionLabel: m.itemDescription.text
+            CategoryLabel: "World"
+            focus: m.itemPoster.uri
+        }
+    end if
 end sub
 
 sub handleRowFocus()

components/rowListScene.brs

@@ -1,12 +1,20 @@
 sub init()
-    m.global.addField("http", "node", FALSE)
     m.global.addField("ratio", "float", FALSE)
-    m.global.http = createObject("roSGNode", "httpTask")
-    m.global.http.control = "RUN"
+    m.flag = true
     m.global.ratio = 1
     m.rowList = m.top.findNode("mainRowList")
+    m.currFocus = invalid
+    m.MainBoldLabel = m.top.findNode("MainBoldLabel")
+    m.DateAndDurationLabel = m.top.findNode("DateAndDurationLabel")
+    m.DescriptionLabel = m.top.findNode("DescriptionLabel")
+    m.CategoryLabel = m.top.findNode("CategoryLabel")
+    m.fadeInAnimation = m.top.findNode("fadeInAnimation")
+    m.fadeOutAnimation = m.top.findNode("fadeOutAnimation")
     m.rowList.content = createObject("roSGNode", "RowListContent")
     m.rowList.setFocus(true)
+    m.rowList.findNode("RowListItem")
+    m.top.observeField("HeroDetails", "handleHeroDetails")
+    m.fadeOutAnimation.observeField("state", "handleAnimationDone")
     videoMode = createObject("roDeviceInfo")
     if videoMode.GetVideoMode() = "720p"
         m.global.ratio = 0.66
@@ -21,3 +29,30 @@ sub init()
         m.rowList.itemSize = [1400, INT(m.rowList.itemSize[1] * m.global.ratio)]
     end if
 end sub
+
+sub handleHeroDetails()
+    if m.flag
+        m.flag = false
+        handleUpdate()
+    else
+        handleItemFocusChange()
+    end if
+end sub
+
+sub handleAnimationDone(event)
+    if event.getData() = "stopped"
+        handleUpdate()
+        m.fadeInAnimation.control = "start"
+    end if
+end sub
+
+sub handleItemFocusChange()
+    m.fadeOutAnimation.control = "start"
+end sub
+
+sub handleUpdate()
+    m.MainBoldLabel.text = m.top.HeroDetails.MainBoldLabel
+    m.DateAndDurationLabel.text = m.top.HeroDetails.DateAndDurationLabel
+    m.DescriptionLabel.text = m.top.HeroDetails.DescriptionLabel
+    m.CategoryLabel.text = m.top.HeroDetails.CategoryLabel
+end sub

components/rowListScene.xml

@@ -1,7 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
 <component name="rowListScene" extends="Scene" initialFocus="mainRowList">
   <script type="text/brightscript" uri="rowListScene.brs" />
+  <interface>
+    <field id="HeroDetails" type="assocarray" />
+  </interface>
   <children>
+    <Poster id="mainOverlay" opacity="1.0" uri="https://besthqwallpapers.com/Uploads/3-2-2018/39425/4k-material-design-art-lollipop-geometric-shapes.jpg" loadHeight="1080" loadWidth="1920" loadDisplayMode="limitSize"></Poster>
+    <Group id="heroDetailsId" 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 id="textAnimationInterp1" key="[0.0, 1.0]" keyValue="[ [60,0], [70,0] ]" fieldToInterp="heroDetailsId.translation" />
+      <FloatFieldInterpolator id="textAnimationInterp2" key="[0.0 , 1.0]" keyValue="[ 0.0, 1 ]" fieldToInterp="heroDetailsId.opacity" />
+    </Animation>
+    <Animation id="fadeOutAnimation" duration="0.4" repeat="false" easeFunction="linear">
+      <Vector2DFieldInterpolator id="textAnimationInterp3" key="[0.0, 1.0]" keyValue="[ [70,0], [60,0] ]" fieldToInterp="heroDetailsId.translation" />
+      <FloatFieldInterpolator id="textAnimationInterp4" key="[0.0 , 1.0]" keyValue="[ 1, 0.0 ]" fieldToInterp="heroDetailsId.opacity" />
+      <FloatFieldInterpolator id="overlayAnimationInterp" key="[ 0.0, 0.25, 0.5, 0.75, 1 ]" keyValue="[ 1.0, 1.0, 1.0, 0.5, 0.0 ]" fieldToInterp="mainOverlay.opacity" />
+    </Animation>
     <RowList id="mainRowList" rowSpacings="[0.0]" focusXOffset="[-150.0]" translation="[ 0, 330 ]" 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>