Hide video element controls in fullscreen

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%;

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 @@
 <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>

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)