add better styles to podcast scene

wdwnt · Jun 8, 2019 · cce3596 · cce3596
1 parent 4d1a25d
commit cce3596
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 33 deletions.
diff --git a/components/PodcastScene.brs b/components/PodcastScene.brs
@@ -10,17 +10,13 @@ sub OnWasShown()
   ' m.global.observeField("FF", "FF")
   ' m.global.observeField("Rewind", "Rewind")
 
+  m.episode_title = m.top.findNode("episode_title")
   m.episode_description = m.top.findNode("episode_description")
 
   m.audiolist = m.top.findNode("audioLabelList")
   m.audiolist.observeField("itemFocused", "updateFocused")
   m.audiolist.observeField("itemSelected", "playaudio")
 
-  ' font = createObject("RoSGNode", "Font")
-  ' font.uri = "pkg:/components/fonts/avenir_35_light_latin.ttf"
-  ' m.audiolist.focusedFont = font
-  ' m.audiolist.font = font
-
   m.audio = createObject("RoSGNode", "Audio")
   m.audio.observeField("state", "controlaudioplay")
 
@@ -42,6 +38,7 @@ sub updateFocused()
   episode = getSelectedEpisode()
 
   m.show_art.uri = episode.hdPosterUrl
+  m.episode_title.text = episode.title
   m.episode_description.text = episode.Description
 end sub
 

diff --git a/components/PodcastScene.xml b/components/PodcastScene.xml
@@ -3,37 +3,44 @@
     <script type="text/brightscript" uri="pkg:/components/PodcastScene.brs" />
     <children>
         <Group>
-            <LabelList
-                id="audioLabelList"
-                translation="[180, 100]"
-                focusedColor="0xFFFFFFFF"
-                focusBitmapUri=""
-                focusFootprintBitmapUri=""
-                color="0x121212FF"
-                itemSize="[500, 60]">
-                <Font
-                    role="font"
+			<PosterGrid
+				id="audioLabelList"
+				translation="[20, 20]"
+				basePosterSize="[340, 340]"
+				itemSpacing="[16, 16]"
+				caption1NumLines="1"
+				numColumns="3"
+				numRows="2">
+				<Font
+                    role="caption1Font"
                     uri="pkg:/components/fonts/avenir_35_light_latin.ttf"
                     id="avenir-light"
                     size="30" />
-                <Font
-                    role="focusedFont"
-                    uri="pkg:/components/fonts/avenir_35_light_latin.ttf"
-                    id="avenir-light"
-                    size="30" />
-            </LabelList>
-            <Label
-                id="episode_description"
-                width="800"
-                wrap="true"
-                color="0xFFFFFFFF"
-                translation="[800, 100]">
-                <Font
-                    role="font"
-                    uri="pkg:/components/fonts/avenir_35_light_latin.ttf"
-                    id="avenir-light"
-                    size="30" />
-            </Label>
+			</PosterGrid>
+			<LayoutGroup itemSpacings="[0, 40]" translation="[1100, 20]">
+				<Label
+					id="episode_title"
+					width="800"
+					wrap="true"
+					color="0xFFFFFFFF">
+					<Font
+						role="font"
+						uri="pkg:/components/fonts/avenir_35_light_latin.ttf"
+						id="avenir-light"
+						size="34" />
+				</Label>
+				<Label
+					id="episode_description"
+					width="800"
+					wrap="true"
+					color="0xFFFFFFFF">
+					<Font
+						role="font"
+						uri="pkg:/components/fonts/avenir_35_light_latin.ttf"
+						id="avenir-light"
+						size="28" />
+				</Label>
+			</LayoutGroup>
         </Group>
         <Group translation="[0, -30]">
             <Rectangle

diff --git a/components/tasks/PodcastTask.brs b/components/tasks/PodcastTask.brs
@@ -10,6 +10,7 @@ function executeTask() as void
     podcast_content = content.CreateChild("ContentNode")
     podcast_content.id = podcast.id
     podcast_content.title = podcast.title
+    podcast_content.shortDescriptionLine1 = podcast.title
     podcast_content.url = podcast.media_url
     podcast_content.hdPosterUrl = podcast.featured_image