Move content into Roku Safe Zones

components/ItemGrid.brs

@@ -17,15 +17,16 @@ sub updateSize()
 
   dimensions = m.top.getScene().currentDesignResolution
 
-  border = 75
-  topSpace = border + 105
-  m.top.translation = [border, topSpace]
+  topBorder = 75
+  border = 96
+  topSpace = topBorder + 105
+  m.top.translation = [96, topSpace]
 
   textHeight = 100
   itemWidth = (dimensions["width"] - border*2) / m.top.itemsPerRow -20
   itemHeight = itemWidth * 1.5 + textHeight
 
-  if itemHeight*m.top.rowsPerPage > (dimensions["height"] - border - 115) then
+  if itemHeight*m.top.rowsPerPage > (dimensions["height"] - topBorder - 115) then
     ratio = (itemHeight*m.top.rowsPerPage) / (981 - topSpace - 15)
     itemHeight = itemHeight / ratio
     itemWidth = itemWidth / ratio

components/movies/MovieDetails.brs

@@ -2,10 +2,10 @@ sub init()
   m.top.optionsAvailable = false
 
   main = m.top.findNode("main_group")
-  main.translation = [50, 175]
+  main.translation = [96, 175]
 
   overview = m.top.findNode("overview")
-  overview.width = 1920 - 100 - 400
+  overview.width = 1920 - 96 - 300 - 96 - 30
 
   m.top.findNode("buttons").setFocus(true)
 end sub

components/movies/MovieDetails.xml

@@ -4,7 +4,7 @@
     <LayoutGroup id="main_group" layoutDirection="horiz" itemSpacings="[30]">
       <Poster id="moviePoster"
         translation="[250,150]"
-        width="400" height="600" />
+        width="300" height="450" />
       <LayoutGroup layoutDirection="vert" translation="[455, 150]" itemSpacings="[25]">
         <LayoutGroup layoutDirection="horiz" itemSpacings="[100]" id="infoGroup">
           <Label id="releaseYear" />

components/options/OptionsSlider.brs

@@ -3,7 +3,7 @@ sub init()
 
     panel = m.top.findNode("panel")
     panel.panelSize = "small"
-    panel.leftPosition = 0
+    panel.leftPosition = 96
     panel.focusable = true
     panel.hasNextPanel = false
     panel.leftOnly = true

components/tvshows/TVEpisodeRow.brs

@@ -14,8 +14,8 @@ end sub
 sub updateSize()  
   dimensions = m.top.getScene().currentDesignResolution
 
-  border = 75
-  m.top.translation = [border, border + 115]
+  border = 96
+  m.top.translation = [border, 75 + 115]
 
   textHeight = 80
   itemWidth = (dimensions["width"] - border*2) 

components/tvshows/TVSeasonRow.brs

@@ -22,7 +22,7 @@ sub updateSize()
     m.top.visible = true
 
     ' size of the whole row
-    m.top.itemSize = [1720, itemHeight]
+    m.top.itemSize = [1700, itemHeight]
     ' spacing between rows
     m.top.itemSpacing = [ 0, 0 ]
 

components/tvshows/TVShowDetails.brs

@@ -1,7 +1,7 @@
 sub init()
   m.top.optionsAvailable = false
   main = m.top.findNode("toplevel")
-  main.translation = [50, 175]
+  main.translation = [96, 175]
 end sub
 
 sub itemContentChanged()

components/tvshows/TVShowDetails.xml

@@ -15,7 +15,7 @@
           </LayoutGroup>
           <Label id="genres" />
           <Label id="tagline" />
-          <Label id="overview" wrap="true" width="1420" maxLines="4" />
+          <Label id="overview" wrap="true" width="1400" maxLines="4" />
           <Label id="history" />
         </LayoutGroup>
       </LayoutGroup>