Fix fullscreen toggle errors and state handling (#5275)

* Fix fullscreen toggle errors and state handling

* fixed Indentation

* Update index.html

remove unneeded comments

---------

Co-authored-by: Walter Bender <walter.bender@gmail.com>

Author: Kunal241207

index.html

@@ -737,13 +737,12 @@
 
     <script>
         var elem = document.documentElement;
+
         function openFullscreen() {
             if (elem.requestFullscreen) {
                 elem.requestFullscreen();
-                // For safari browser
             } else if (elem.webkitRequestFullscreen) {
                 elem.webkitRequestFullscreen();
-                // For IE(supported above 10)
             } else if (elem.msRequestFullscreen) {
                 elem.msRequestFullscreen();
             } else if (elem.mozRequestFullscreen) {
@@ -754,41 +753,54 @@
         function closeFullscreen() {
             if (document.exitFullscreen) {
                 document.exitFullscreen();
-            } else if (document.webkitExitFullscreen) { /* Safari */
+            } else if (document.webkitExitFullscreen) {
                 document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) { /* IE11 */
+            } else if (document.msExitFullscreen) {
                 document.msExitFullscreen();
-            } else if (document.mozExitFullscreen) { /* IE11 */
+            } else if (document.mozExitFullscreen) {
                 document.mozExitFullscreen();
             }
         }
-        var count = 0;
+
         function setIcon() {
-            var property = document.getElementById(FullScreen);
             var iconCode = document.querySelector('#FullScrIcon');
-            //Calling full Screen
-            if (count == 0) {
+            // Determine fullscreen state using the browser fullscreen API
+            // instead of relying on a manual counter. This keeps the icon
+            // in sync when fullscreen is exited via ESC or browser controls.
+            var isFullscreen =
+                document.fullscreenElement ||
+                document.webkitFullscreenElement ||
+                document.mozFullScreenElement ||
+                document.msFullscreenElement;
+
+            if (!isFullscreen) {
                 openFullscreen();
-                iconCode.textContent = '\ue5d1';
-                count = 1;
-            }
-            //Closing full Screen
-            else {
+                iconCode.textContent = '\ue5d1'; // fullscreen_exit icon
+            } else {
                 closeFullscreen();
-                iconCode.textContent = '\ue5d0';
-                count = 0;
+                iconCode.textContent = '\ue5d0'; // fullscreen icon
             }
         }
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
-        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
 
         function handleFullscreenChange() {
             var iconCode = document.querySelector('#FullScrIcon');
-            count = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement ? 1 : 0;
-            iconCode.textContent = count ? '\ue5d1' : '\ue5d0';
+            // Update fullscreen icon based on actual fullscreen state.
+            // This removes the need for a separate state variable and
+            // prevents incorrect icon state when fullscreen is toggled
+            // outside the button (e.g., ESC key).
+            var isFullscreen =
+                document.fullscreenElement ||
+                document.webkitFullscreenElement ||
+                document.mozFullScreenElement ||
+                document.msFullscreenElement;
+
+            iconCode.textContent = isFullscreen ? '\ue5d1' : '\ue5d0';
         }
+
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
     </script>
 
     <script>
@@ -866,4 +878,4 @@
 
 </body>
 
-</html>
+</html>