From d404db668a03080dd3f66645a606e99a371c954d Mon Sep 17 00:00:00 2001
From: Renji-xD <trashmefull@hotmail.com>
Date: Mon, 7 Oct 2024 07:53:30 +0200
Subject: [PATCH] fix: change to fullscreen mode

---
 .../components/book-reader/book-reader.svelte |   2 +-
 .../book-reader/reactive-elements.ts          | 106 ++++++++++--------
 2 files changed, 60 insertions(+), 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
index 2958f504..12bddb12 100644
--- 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
index a3ed0395..dfa22ad7 100644
--- 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');
+                  }
+                })
+              );
+            })
+          )
+        );
+      }
     )
   );
 }