fix viewport for tv

raphamorim · raphamorim · commit 12b1a238921c · 2022-06-16T21:38:12.000+02:00
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -2,17 +2,21 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-  <style>
+  <meta name="viewport" content="width=1280, height=720, user-scalable=no" />
+  <title>App</title>
+   <style>
+    body {
+      width: 1280px;
+      height: 720px;
+    }
     canvas {
-      width: 100%;
-      height: 100%;
+      width: 1280px;
+      height: 720px;
       position: absolute;
       top: 0;
       left: 0;
     }
   </style>
-</head>
 <body>
   <canvas id="root"></canvas>
   <script src="bundle.js"></script>
diff --git a/packages/app/src/Grid.js b/packages/app/src/Grid.js
@@ -27,8 +27,8 @@ const styles = StyleSheet.create({
     top: 520,
   },
   image: {
-    height: 328,
-    width: 248,
+    height: 228,
+    width: 148,
   },
 });
 
diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
@@ -8,7 +8,7 @@ import {
   withFocus,
 } from '../../react-ape/reactApeEntry';
 
-const {height} = Dimensions.get('screen');
+const {height} = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   sidebar: {
diff --git a/packages/app/src/Slideshow.js b/packages/app/src/Slideshow.js
@@ -7,15 +7,15 @@ import {
   StyleSheet,
 } from '../../react-ape/reactApeEntry';
 
-const {width} = Dimensions.get('screen');
+const {width} = Dimensions.get('window');
 
 const styles = StyleSheet.create({
   slideshow: {
     position: 'absolute',
     left: 280,
     top: 0,
     backgroundColor: '#080808',
-    width: width,
+    width: width - 280,
     height: 420,
     overflow: 'hidden',
   },
