fix: change to fullscreen mode (#376)

ttu-ttu · Oct 7, 2024 · b939df4 · b939df4
1 parent c54bcd8
commit b939df4
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 48 deletions.
diff --git a/apps/web/src/lib/components/book-reader/book-reader.svelte b/apps/web/src/lib/components/book-reader/book-reader.svelte
@@ -164,7 +164,7 @@
         furiganaStyle,
         hideSpoilerImage,
         $isMobile$ &&
-          (navigator.standalone || window.matchMedia('(display-mode: standalone)').matches)
+          (navigator.standalone || window.matchMedia('(display-mode: fullscreen)').matches)
       );
       return contentEl$.pipe(mergeMap((contentEl) => reactiveElementsFn(contentEl)));
     }),

diff --git a/apps/web/src/lib/components/book-reader/reactive-elements.ts b/apps/web/src/lib/components/book-reader/reactive-elements.ts
@@ -117,54 +117,66 @@ function openImageInNewTab(
 ) {
   return merge(
     ...[...contentEl.querySelectorAll<HTMLElement>(`${includeImgTag ? 'img,' : ''}image`)].map(
-      (elm) =>
-        fromEvent(elm, 'pointerdown').pipe(
-          switchMap((event) => {
-            const { clientX, clientY } = event as PointerEvent;
-
-            return timer(1000).pipe(
-              takeUntil(
-                race(
-                  fromEvent(elm, 'pointermove').pipe(
-                    throttleTime(200, undefined, { trailing: true }),
-                    filter((event2) => {
-                      const { clientX: newX, clientY: newY } = event2 as PointerEvent;
-
-                      return Math.abs(clientX - newX) > 5 || Math.abs(clientY - newY) > 5;
-                    })
-                  ),
-                  fromEvent(elm, 'pointerup'),
-                  fromEvent(elm, 'pointercancel')
-                )
-              )
-            );
-          }),
-          filter(
-            () =>
-              !hideSpoilerImage ||
-              elm.classList.contains('ttu-unspoilered') ||
-              !elm.closest('span[data-ttu-spoiler-img]')
+      (elm) => {
+        elm.draggable = false;
+
+        return merge(
+          fromEvent(elm, 'contextmenu').pipe(
+            tap((event) => {
+              event.preventDefault();
+            })
           ),
-          switchMap(() => {
-            pulseElement(
-              elm.parentElement && elm.tagName.toLowerCase() === 'image' ? elm.parentElement : elm,
-              'add',
-              0.5,
-              500
-            );
-
-            return merge(fromEvent(elm, 'pointerup'), fromEvent(elm, 'pointercancel')).pipe(
-              take(1),
-              tap(() => {
-                const src = elm.getAttribute('src') || elm.getAttribute('href');
-
-                if (src) {
-                  window.open(src, '_blank');
-                }
-              })
-            );
-          })
-        )
+          fromEvent(elm, 'pointerdown').pipe(
+            switchMap((event) => {
+              const { clientX, clientY } = event as PointerEvent;
+
+              return timer(1000).pipe(
+                takeUntil(
+                  race(
+                    fromEvent(elm, 'pointermove').pipe(
+                      throttleTime(200, undefined, { trailing: true }),
+                      filter((event2) => {
+                        const { clientX: newX, clientY: newY } = event2 as PointerEvent;
+
+                        return Math.abs(clientX - newX) > 5 || Math.abs(clientY - newY) > 5;
+                      })
+                    ),
+                    fromEvent(elm, 'pointerup'),
+                    fromEvent(elm, 'pointercancel')
+                  )
+                )
+              );
+            }),
+            filter(
+              () =>
+                !hideSpoilerImage ||
+                elm.classList.contains('ttu-unspoilered') ||
+                !elm.closest('span[data-ttu-spoiler-img]')
+            ),
+            switchMap(() => {
+              pulseElement(
+                elm.parentElement && elm.tagName.toLowerCase() === 'image'
+                  ? elm.parentElement
+                  : elm,
+                'add',
+                0.5,
+                500
+              );
+
+              return merge(fromEvent(elm, 'pointerup'), fromEvent(elm, 'pointercancel')).pipe(
+                take(1),
+                tap(() => {
+                  const src = elm.getAttribute('src') || elm.getAttribute('href');
+
+                  if (src) {
+                    window.open(src, '_blank');
+                  }
+                })
+              );
+            })
+          )
+        );
+      }
     )
   );
 }