From c699455b580e676cd6e1c056f22cbb7cc5004f75 Mon Sep 17 00:00:00 2001
From: Sergey Stepanov <sergystepanov@gmail.com>
Date: Sun, 25 Feb 2024 12:51:37 +0300
Subject: [PATCH] Hide video element controls in fullscreen

---
 web/css/main.css        |  6 ++++++
 web/index.html          |  4 ++--
 web/js/stream/stream.js | 23 ++++++++++++++++-------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/web/css/main.css b/web/css/main.css
index b47047fbc..10d98e2eb 100644
--- 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
index bc673e5e2..a760c3fc2 100644
--- 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
index 5652b36ec..e1a0ef4b8 100644
--- 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)