Hide video element controls in fullscreen

giongto35 · Feb 25, 2024 · c699455 · c699455
1 parent 000bc4f
commit c699455
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/web/css/main.css b/web/css/main.css
@@ -3,6 +3,12 @@
     src: url('/fonts/6809-Chargen.woff2');
 }
 
+
+.no-media-controls::-webkit-media-controls {
+    display: none !important;
+}
+
+
 html {
     /* force full size for Firefox */
     width: 100%;

diff --git a/web/index.html b/web/index.html
@@ -37,7 +37,7 @@
             There is still audio because current audio flow is not from media but it is manually encoded (technical webRTC challenge). Later, when we can integrate audio to media, we can face the issue with mute again .
             https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
         -->
-        <video id="stream" class="game-screen" hidden muted playsinline preload="none"></video>
+        <video id="stream" class="game-screen" hidden muted preload="none"></video>
 
         <div id="menu-screen">
             <div id="menu-container"></div>
@@ -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=4"></script>
+<script src="js/stream/stream.js?v=5"></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
@@ -18,7 +18,7 @@ const stream = (() => {
                 timerId: null,
                 w: 0,
                 h: 0,
-                aspect: 4/3
+                aspect: 4 / 3
             };
 
         const mute = (mute) => screen.muted = mute
@@ -88,22 +88,33 @@ const stream = (() => {
         screen.addEventListener('fullscreenchange', () => {
             const fullscreen = document.fullscreenElement
 
+            const w = window.screen.width ?? window.innerWidth;
+            const h = window.screen.height ?? window.innerHeight;
+
+            const ww = document.documentElement.innerWidth;
+            const hh = document.documentElement.innerHeight;
 
             screen.style.padding = '0'
             if (fullscreen) {
-                const dw = (window.innerWidth - fullscreen.clientHeight * state.aspect) / 2
+                const dw = (w - ww * state.aspect) / 2
                 screen.style.padding = `0 ${dw}px`
                 // chrome bug
                 setTimeout(() => {
-                    const dw = (window.innerHeight - fullscreen.clientHeight * state.aspect) / 2
+                    const dw = (h - hh * state.aspect) / 2
                     screen.style.padding = `0 ${dw}px`
                 }, 1)
+                makeFullscreen(true);
+            } else {
+                makeFullscreen(false);
             }
 
             // !to flipped
-
         })
 
+        const makeFullscreen = (make = false) => {
+            screen.classList.toggle('no-media-controls', make)
+        }
+
         const useCustomScreen = (use) => {
             if (use) {
                 if (screen.paused || screen.ended) return;
@@ -170,9 +181,7 @@ const stream = (() => {
 
             const a2 = w / h
 
-            const attr = a.toFixed(6) !== a2.toFixed(6) ? 'fill' : fit
-            state.screen.style['object-fit'] = attr
-
+            state.screen.style['object-fit'] = a.toFixed(6) !== a2.toFixed(6) ? 'fill' : fit
             state.h = payload.h
             state.w = Math.floor(payload.h * payload.a)
             // payload.a > 0 && (state.aspect = payload.a)