track fullscreen state manually, don't rely on fullscreenchange

templates/slideshow.html

@@ -203,14 +203,15 @@
             z_drag=null;
             if(document.fullscreenElement && z_scale>1) img.style.cursor='grab';
         });
+        let is_fullscreen = false;
         let t_start_x = 0, t_start_y = 0;
         img.addEventListener('touchstart', e => {
-            if (!document.fullscreenElement) return;
+            if (!is_fullscreen) return;
             t_start_x = e.touches[0].clientX;
             t_start_y = e.touches[0].clientY;
         }, { passive: true });
         img.addEventListener('touchend', e => {
-            if (!document.fullscreenElement) return;
+            if (!is_fullscreen) return;
             const dx = e.changedTouches[0].clientX - t_start_x;
             const dy = e.changedTouches[0].clientY - t_start_y;
             if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
@@ -218,11 +219,12 @@
             }
         }, { passive: true });
         img.addEventListener('click', e => {
-            if (!document.fullscreenElement) return;
+            if (!is_fullscreen) return;
             e.clientX < window.innerWidth / 2 ? prev() : next();
         });
         document.addEventListener('fullscreenchange', ()=>{
-            if(!document.fullscreenElement) reset_zoom();
+            is_fullscreen = !!document.fullscreenElement;
+            if(!is_fullscreen) reset_zoom();
         });
 
         const PRELOAD_AHEAD = 3;
@@ -288,10 +290,12 @@
         };
 
         btnF.onclick=()=>{
-            if(!document.fullscreenElement){
-                img.requestFullscreen();
+            if(!is_fullscreen){
+                img.requestFullscreen().catch(()=>{});
+                is_fullscreen = true;
             }else{
-                document.exitFullscreen();
+                document.exitFullscreen().catch(()=>{});
+                is_fullscreen = false;
             }
         };