Hide mobile viewer chrome on fullscreen tap and restore it on page tap.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/CatalogViewer.vue

@@ -107,9 +107,12 @@ function togglePlay() {
   }
 }
 
-function onFab() {
+function onTapExit() {
   hideChrome.value = false;
-  if (playing.value) togglePlay();
+  waiting.value = false;
+  if (!playing.value) return;
+  playing.value = false;
+  stopLoop();
 }
 
 function onKey(ev: KeyboardEvent) {
@@ -132,7 +135,8 @@ function fullscreenElement() {
 
 async function toggleFullscreen() {
   if (singlePage.value) {
-    hideChrome.value = !hideChrome.value;
+    hideChrome.value = true;
+    waiting.value = false;
     return;
   }
   const el = stage.value as
@@ -227,14 +231,11 @@ watch(
       </div>
     </div>
 
-    <button
+    <div
       v-if="immersive"
-      class="fab-pause"
+      class="tap-exit"
-      type="button"
+      @click.prevent="onTapExit"
-      @click="onFab"
+    ></div>
-    >
-      {{ playing ? "توقف" : "منو" }}
-    </button>
 
     <div v-if="waiting && playing" class="auto-hint">
       <span>تا لحظه‌ای دیگر خودبه‌خود ورق می‌خورد</span>

client/src/styles.css

@@ -410,15 +410,23 @@ a {
 .stage-page.immersive > .page-chrome,
 .viewer-wrap.immersive > .page-chrome,
 .viewer-wrap.immersive .thumbs,
-.viewer-wrap.immersive .auto-hint {
+.viewer-wrap.immersive .auto-hint,
-  display: none;
+.viewer-wrap.immersive .fab-pause {
+  display: none !important;
 }
 
 .stage-page.immersive .viewer-wrap {
-  padding: 0;
+  padding: 0 !important;
   border-radius: 0;
 }
 
+.tap-exit {
+  position: absolute;
+  inset: 0;
+  z-index: 15;
+  touch-action: manipulation;
+}
+
 @media (max-width: 900px) {
   .stage-bar {
     gap: 8px;
@@ -442,7 +450,7 @@ a {
     display: inline;
   }
 
-  .viewer-wrap.cinematic > .stage-bar {
+  .viewer-wrap.cinematic:not(.immersive) > .stage-bar {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -459,7 +467,7 @@ a {
     margin-inline-start: 0;
   }
 
-  .viewer-wrap {
+  .viewer-wrap:not(.immersive) {
     padding: 10px 8px 16px;
   }
 }