Begin work for making variables sizes

components/MovieItem.xml

@@ -3,15 +3,11 @@
   <children>
     <Poster id="moviePoster"
       translation="[2, 0]"
-      width="196"
-      height="294"
       />
     <Label id="title"
       horizAlign="center"
-      translation="[0,319]"
-      font="font:MediumSystemFont"
-      width="196"
-      height="65" />
+      font="font:SmallSystemFont"
+      />
   </children>
   <interface>
     <field id="itemContent" type="node" onChange="itemContentChanged"/>
@@ -22,7 +18,15 @@
   sub Init()
     m.title = m.top.findNode("title")
     m.poster = m.top.findNode("moviePoster")
-    m.title.text = "Loading..."
+
+    maxSize = m.top.getParent().itemSize
+
+    m.poster.width = int(maxSize[0]) - 4
+    m.poster.height = m.poster.width * 1.5
+
+    m.title.width = m.poster.width
+    m.title.height = int(maxSize[1]) - m.poster.height
+    m.title.translation = [0, m.poster.height]
   end sub
 
   function itemContentChanged() as void

components/MovieItemDetails.brs

@@ -0,0 +1,88 @@
+sub itemContentChanged()
+  itemData = m.top.itemJson
+
+  m.top.findNode("moviePoster").uri = ImageURL(itemData.id)
+
+  ' Handle all "As Is" fields
+  setFieldText("title", itemData.name)
+  setFieldText("releaseYear", itemData.productionYear)
+  setFieldText("officialRating", itemData.officialRating)
+  setFieldText("communityRating", str(itemData.communityRating))
+  setFieldText("overview", itemData.overview)
+
+  setFieldText("runtime", stri(getRuntime()) + " mins")
+  setFieldText("ends-at", "Ends at " + getEndTime())
+
+  if itemData.genres.count() > 0
+    setFieldText("genres", itemData.genres.join(", "))
+  end if
+  director = invalid
+  for each person in itemData.people
+    if person.type = "Director"
+      director = person.name
+      exit for
+    end if
+  end for
+  if director <> invalid
+    setFieldText("director", "Director: " + director)
+  end if
+  setFieldText("video_codec", "Video: " + itemData.mediaStreams[0].displayTitle)
+  setFieldText("audio_codec", "Audio: " + itemData.mediaStreams[1].displayTitle)
+  ' TODO - cmon now. these are buttons, not words
+  setFieldText("buttons", "Play, Delete, Watched, Favorite, ...")
+  if itemData.taglines.count() > 0
+    setFieldText("tagline", itemData.taglines[0])
+  end if
+end sub
+
+sub setFieldText(field as string, value)
+  node = m.top.findNode(field)
+  if node = invalid then return
+
+  node.text = value
+end sub
+
+function getRuntime() as Integer
+  itemData = m.top.itemJson
+
+  ' A tick is .1ms, so 1/10,000,000 for ticks to seconds,
+  ' then 1/60 for seconds to minutess... 1/600,000,000
+  return round(itemData.RunTimeTicks / 600000000.0)
+end function
+
+function getEndTime() as string
+  itemData = m.top.itemJson
+
+  date = CreateObject("roDateTime")
+  duration_s = int(itemData.RunTimeTicks / 10000000.0)
+  date.fromSeconds(date.asSeconds() + duration_s)
+  date.toLocalTime()
+  hours = date.getHours()
+  meridian = "AM"
+  if hours = 0
+    hours = 12
+    meridian = "AM"
+  else if hours = 12
+    hours = 12
+    meridian = "PM"
+  else if hours > 12
+    hours = hours - 12
+    meridian = "PM"
+  end if
+
+  return Substitute("{0}:{1} {2}", stri(hours), stri(date.getMinutes()), meridian)
+end function
+
+function round(f as Float) as Integer
+  ' BrightScript only has a "floor" round
+  ' This compares floor to floor + 1 to find which is closer
+  m = int(f)
+  n = m + 1
+  x = abs(f - m)
+  y = abs(f - n)
+  if y > x
+    return m
+  else
+    return n
+  end if
+end function

components/MovieItemDetails.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <component name="MovieItemDetailScene" extends="Scene">
   <children>
-    <LayoutGroup layoutDirection="horiz">
+    <LayoutGroup id="main_group" layoutDirection="horiz" translation="[50, 50]">
       <Poster id="moviePoster"
         translation="[150,150]"
         width="196" height="294" />
@@ -30,79 +30,15 @@
   </interface>
   <script type="text/brightscript" uri="pkg:/source/config.brs" />
   <script type="text/brightscript" uri="pkg:/source/JellyfinAPI.brs" />
+  <script type="text/brightscript" uri="pkg:/components/MovieItemDetails.brs" />
   <script type="text/brightscript">
   <![CDATA[
   sub init()
-
-
+    main = m.top.findNode("main_group")
+    dimensions = m.top.getScene().currentDesignResolution
   end sub
 
-  sub setFieldText(field as string, value)
-    node = m.top.findNode(field)
-    if node = invalid then return
 
-    node.text = value
-  end sub
-
-  function round(f as Float) as Integer
-    ' BrightScript only has a "floor" round
-    ' This compares floor to floor + 1 to find which is closer
-    m = int(f)
-    n = m + 1
-    x = abs(f - m)
-    y = abs(f - n)
-    if y > x
-      return m
-    else
-      return n
-    end if
-  end function
-
-  sub itemContentChanged()
-    itemData = m.top.itemJson
-
-    m.top.findNode("moviePoster").uri = ImageURL(itemData.id)
-    setFieldText("title", itemData.name)
-    setFieldText("releaseYear", itemData.productionYear)
-
-    ' A tick is .1ms, so 1/10,000,000 for ticks to seconds,
-    ' then 1/60 for seconds to minutess... 1/600,000,000
-    duration = round(itemData.RunTimeTicks / 600000000.0)
-    setFieldText("runtime", stri(duration) + " mins")
-
-    setFieldText("officialRating", itemData.officialRating)
-    setFieldText("communityRating", str(itemData.communityRating))
-
-    date = CreateObject("roDateTime")
-    duration_s = int(itemData.RunTimeTicks / 10000000.0)
-    date.fromSeconds(date.asSeconds() + duration_s)
-    date.toLocalTime()
-    d = date.toISOString()
-    ' TODO - not full ISO format
-    setFieldText("ends-at", "Ends at " + d)
-
-    if itemData.genres.count() > 0
-      setFieldText("genres", itemData.genres.join(", "))
-    end if
-    director = invalid
-    for each person in itemData.people
-      if person.type = "Director"
-        director = person.name
-        exit for
-      end if
-    end for
-    if director <> invalid
-      setFieldText("director", "Director: " + director)
-    end if
-    setFieldText("video_codec", "Video: " + itemData.mediaStreams[0].displayTitle)
-    setFieldText("audio_codec", "Audio: " + itemData.mediaStreams[1].displayTitle)
-    ' TODO - cmon now. these are buttons, not words
-    setFieldText("buttons", "Play, Delete, Watched, Favorite, ...")
-    if itemData.taglines.count() > 0
-      setFieldText("tagline", itemData.taglines[0])
-    end if
-    setFieldText("overview", itemData.overview)
-  end sub
   ]]>
   </script>
 </component>

components/MovieList.xml

@@ -13,15 +13,29 @@
     m.top.content = getData()
 
     m.top.numrows = 1
-    m.top.rowSize = 4
+    m.top.rowSize = 5
+
+    dimensions = m.top.getScene().currentDesignResolution
+
+    border = 75
+    m.top.translation = [border, border]
+
+    textHeight = 50
+    ' Do we decide width by rowSize, or rowSize by width...
+    itemWidth = (dimensions["width"] - border*2) / m.top.rowSize
+    itemHeight = itemWidth * 1.5 + textHeight
 
     m.top.visible = true
-    m.top.itemSize = [200 * 4 + 20 * 3, 400]
-    m.top.rowHeights = [400]
-    m.top.rowItemSize = [ [200, 400] ]
-    m.top.itemSpacing = [ 0, 50 ]
-    m.top.rowItemSpacing = [ [20, 0] ]
-    m.top.rowLabelOffset = [ [0, 30] ]
+
+    ' size of the whole row
+    m.top.itemSize = [dimensions["width"] - border*2, itemHeight]
+    ' spacing between rows
+    m.top.itemSpacing = [ 0, 10 ]
+
+    ' size of the item in the row
+    m.top.rowItemSize = [ itemWidth, itemHeight ]
+    ' spacing between items in a row
+    m.top.rowItemSpacing = [ 0, 0 ]
 
     m.top.rowFocusAnimationStyle = "floatingFocus"
     'm.top.vertFocusAnimationStyle = "floatingFocus"

components/Movies.xml

@@ -4,7 +4,6 @@
     <MovieRow
       id="MovieSelect"
       visible="true"
-      translation="[150,150]"
       />
   </children>
 </component>

manifest

@@ -17,5 +17,7 @@ splash_screen_sd=pkg:/images/splash-screen_sd.jpg
 
 splash_min_time=1500
 
+ui_resolutions=hd,fhd
+
 screensaver_private=0
 screensaver_title=Jellyfin