Track fullscreen for <video>

giongto35 · Mar 5, 2024 · 608da9f · 608da9f
1 parent 91ace06
commit 608da9f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/web/index.html b/web/index.html
@@ -127,7 +127,7 @@ <h1>Options</h1>
 <script src="js/env.js?v=5"></script>
 <script src="js/input/input.js?v=3"></script>
 <script src="js/gameList.js?v=3"></script>
-<script src="js/stream/stream.js?v=6"></script>
+<script src="js/stream/stream.js?v=7"></script>
 <script src="js/room.js?v=3"></script>
 <script src="js/network/ajax.js?v=3"></script>
 <script src="js/network/socket.js?v=4"></script>

diff --git a/web/js/stream/stream.js b/web/js/stream/stream.js
@@ -15,6 +15,7 @@ const stream = (() => {
             },
             state = {
                 screen: screen,
+                fullscreen: false,
                 timerId: null,
                 w: 0,
                 h: 0,
@@ -27,11 +28,7 @@ const stream = (() => {
             screen.play()
                 .then(() => log.info('Media can autoplay'))
                 .catch(error => {
-                    // Usually error happens when we autoplay unmuted video, browser requires manual play.
-                    // We already muted video and use separate audio encoding so it's fine now
-                    log.error('Media Failed to autoplay');
-                    log.error(error)
-                    // TODO: Consider workaround
+                    log.error('Media failed to play', error);
                 });
         }
 
@@ -86,7 +83,7 @@ const stream = (() => {
         }, false);
 
         screen.addEventListener('fullscreenchange', () => {
-            const fullscreen = document.fullscreenElement
+            state.fullscreen = !!document.fullscreenElement;
 
             const w = window.screen.width ?? window.innerWidth;
             const h = window.screen.height ?? window.innerHeight;
@@ -95,7 +92,7 @@ const stream = (() => {
             const hh = document.documentElement.innerHeight;
 
             screen.style.padding = '0'
-            if (fullscreen) {
+            if (state.fullscreen) {
                 const dw = (w - ww * state.aspect) / 2
                 screen.style.padding = `0 ${dw}px`
                 // chrome bug