diff --git a/client/src/components/CatalogViewer.vue b/client/src/components/CatalogViewer.vue
index d2d8ea9..40a8ca3 100644
--- a/client/src/components/CatalogViewer.vue
+++ b/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(
-
+ class="tap-exit"
+ @click.prevent="onTapExit"
+ >
تا لحظهای دیگر خودبهخود ورق میخورد
diff --git a/client/src/styles.css b/client/src/styles.css
index 47ddde4..6f64d17 100644
--- a/client/src/styles.css
+++ b/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 {
- display: none;
+.viewer-wrap.immersive .auto-hint,
+.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;
}
}