feat: configurable auto bookmark time (#394)

ttu-ttu · Nov 3, 2024 · fef9500 · fef9500
1 parent d87c3f6
commit fef9500
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 18 deletions.
diff --git a/apps/web/src/lib/components/book-reader/book-reader-continuous/book-reader-continuous.svelte b/apps/web/src/lib/components/book-reader/book-reader-continuous/book-reader-continuous.svelte
@@ -86,6 +86,8 @@
 
   export let autoBookmark: boolean;
 
+  export let autoBookmarkTime: number;
+
   export let loadingState: boolean;
 
   export let multiplier: number;
@@ -429,7 +431,7 @@
         .finally(() => {
           if (autoBookmark) {
             fromEvent(window, 'scroll')
-              .pipe(skip(1), debounceTime(3000), takeUntil(destroy$))
+              .pipe(skip(1), debounceTime(autoBookmarkTime * 1000), takeUntil(destroy$))
               .subscribe(() => {
                 dispatch('bookmark');
               });

diff --git a/apps/web/src/lib/components/book-reader/book-reader-paginated/book-reader-paginated.svelte b/apps/web/src/lib/components/book-reader/book-reader-paginated/book-reader-paginated.svelte
@@ -94,6 +94,8 @@
 
   export let autoBookmark = false;
 
+  export let autoBookmarkTime: number;
+
   export let customReadingPointRange: Range | undefined;
 
   export let showCustomReadingPoint: boolean;
@@ -414,11 +416,13 @@
   });
 
   if (autoBookmark) {
-    pageChange$.pipe(debounceTime(3000), takeUntil(destroy$)).subscribe((isUser) => {
-      if (isUser) {
-        dispatch('bookmark');
-      }
-    });
+    pageChange$
+      .pipe(debounceTime(autoBookmarkTime * 1000), takeUntil(destroy$))
+      .subscribe((isUser) => {
+        if (isUser) {
+          dispatch('bookmark');
+        }
+      });
   }
 
   currentSection$.pipe(distinctUntilChanged(), takeUntil(destroy$)).subscribe(() => {

diff --git a/apps/web/src/lib/components/book-reader/book-reader.svelte b/apps/web/src/lib/components/book-reader/book-reader.svelte
@@ -73,6 +73,8 @@
 
   export let autoBookmark: boolean;
 
+  export let autoBookmarkTime: number;
+
   export let viewMode: ViewMode;
 
   export let exploredCharCount: number;
@@ -274,6 +276,7 @@
       {firstDimensionMargin}
       {autoPositionOnResize}
       {autoBookmark}
+      {autoBookmarkTime}
       {multiplier}
       loadingState={$imageLoadingState$ ?? true}
       bind:exploredCharCount
@@ -311,6 +314,7 @@
       {avoidPageBreak}
       {pageColumns}
       {autoBookmark}
+      {autoBookmarkTime}
       {firstDimensionMargin}
       bind:exploredCharCount
       bind:bookCharCount

diff --git a/apps/web/src/lib/components/log-report-dialog.svelte b/apps/web/src/lib/components/log-report-dialog.svelte
@@ -18,6 +18,7 @@
     writingMode$,
     confirmClose$,
     autoBookmark$,
+    autoBookmarkTime$,
     hideSpoilerImage$,
     hideFurigana$,
     furiganaStyle$,
@@ -93,6 +94,7 @@
           showCharacterCounter$: showCharacterCounter$.getValue(),
           confirmClose: confirmClose$.getValue(),
           autoBookmark: autoBookmark$.getValue(),
+          autoBookmarkTime: autoBookmarkTime$.getValue(),
           hideSpoilerImage: hideSpoilerImage$.getValue(),
           hideFurigana: hideFurigana$.getValue(),
           furiganaStyle: furiganaStyle$.getValue(),

diff --git a/apps/web/src/lib/components/settings/settings-content.svelte b/apps/web/src/lib/components/settings/settings-content.svelte
@@ -106,6 +106,8 @@
 
   export let autoBookmark: boolean;
 
+  export let autoBookmarkTime: number;
+
   export let activeSettings: string;
 
   export let cacheStorageData: boolean;
@@ -308,6 +310,7 @@
   let autoReplicationTypeTooltip = '';
   let trackerAutoPauseTooltip = '';
 
+  $: autoBookmarkTooltip = `If enabled sets a bookmark after ${autoBookmarkTime} seconds without scrolling/page change`;
   $: wakeLockSupported = browser && 'wakeLock' in navigator;
   $: verticalMode = writingMode === 'vertical-rl';
   $: fontCacheSupported = browser && 'caches' in window;
@@ -463,17 +466,12 @@
           </div>
         {/if}
       </div>
-      <input
-        type="text"
-        class={inputClasses}
-        placeholder="Serif"
-        bind:value={fontFamilyGroupOne}
-      />
+      <input type="text" class={inputClasses} placeholder="Serif" bind:value={fontFamilyGroupOne} />
     </SettingsItemGroup>
     <SettingsItemGroup title="Font family (Group 2)">
       <div slot="header" class="flex items-center">
         <SettingsFontSelector
-          availableFonts={[LocalFont.SANSSERIF,  LocalFont.NOTOSANSJP, LocalFont.BIZUDGOTHIC]}
+          availableFonts={[LocalFont.SANSSERIF, LocalFont.NOTOSANSJP, LocalFont.BIZUDGOTHIC]}
           bind:fontValue={fontFamilyGroupTwo}
         />
         {#if fontCacheSupported}
@@ -565,6 +563,22 @@
         }}
       />
     </SettingsItemGroup>
+    {#if autoBookmark}
+      <SettingsItemGroup title="Auto Bookmark Time" tooltip={'Time in s for Auto Bookmark'}>
+        <input
+          type="number"
+          step="1"
+          min="1"
+          class={inputClasses}
+          bind:value={autoBookmarkTime}
+          on:blur={() => {
+            if (autoBookmarkTime < 1 || typeof autoBookmarkTime !== 'number') {
+              autoBookmarkTime = 3;
+            }
+          }}
+        />
+      </SettingsItemGroup>
+    {/if}
     <SettingsItemGroup title="Writing mode">
       <ButtonToggleGroup options={optionsForWritingMode} bind:selectedOptionId={writingMode} />
     </SettingsItemGroup>
@@ -600,10 +614,7 @@
     >
       <ButtonToggleGroup options={optionsForToggle} bind:selectedOptionId={manualBookmark} />
     </SettingsItemGroup>
-    <SettingsItemGroup
-      title="Auto Bookmark"
-      tooltip={'If enabled sets a bookmark after 3 seconds without scrolling/page change'}
-    >
+    <SettingsItemGroup title="Auto Bookmark" tooltip={autoBookmarkTooltip}>
       <ButtonToggleGroup options={optionsForToggle} bind:selectedOptionId={autoBookmark} />
     </SettingsItemGroup>
     <SettingsItemGroup title="Blur image">

diff --git a/apps/web/src/lib/data/store.ts b/apps/web/src/lib/data/store.ts
@@ -135,7 +135,9 @@ export const confirmClose$ = writableBooleanLocalStorageSubject()('confirmClose'
 
 export const manualBookmark$ = writableBooleanLocalStorageSubject()('manualBookmark', false);
 
-export const autoBookmark$ = writableBooleanLocalStorageSubject()('autoBookmark', false);
+export const autoBookmark$ = writableBooleanLocalStorageSubject()('autoBookmark', true);
+
+export const autoBookmarkTime$ = writableNumberLocalStorageSubject()('autoBookmarkTime', 3);
 
 export const pageColumns$ = writableNumberLocalStorageSubject()('pageColumns', 0);
 

diff --git a/apps/web/src/routes/b/+page.svelte b/apps/web/src/routes/b/+page.svelte
@@ -36,6 +36,7 @@
   import StyleSheetRenderer from '$lib/components/style-sheet-renderer.svelte';
   import {
     autoBookmark$,
+    autoBookmarkTime$,
     autoPositionOnResize$,
     avoidPageBreak$,
     bookReaderKeybindMap$,
@@ -1547,6 +1548,7 @@
     avoidPageBreak={$avoidPageBreak$}
     pageColumns={$pageColumns$}
     autoBookmark={$autoBookmark$}
+    autoBookmarkTime={$autoBookmarkTime$}
     multiplier={$multiplier$}
     bind:exploredCharCount
     bind:bookCharCount

diff --git a/apps/web/src/routes/settings/+page.svelte b/apps/web/src/routes/settings/+page.svelte
@@ -9,6 +9,7 @@
     addCharactersOnCompletion$,
     adjustStatisticsAfterIdleTime$,
     autoBookmark$,
+    autoBookmarkTime$,
     autoPositionOnResize$,
     autoReplication$,
     avoidPageBreak$,
@@ -157,6 +158,7 @@
       bind:confirmClose={$confirmClose$}
       bind:manualBookmark={$manualBookmark$}
       bind:autoBookmark={$autoBookmark$}
+      bind:autoBookmarkTime={$autoBookmarkTime$}
       bind:cacheStorageData={$cacheStorageData$}
       bind:replicationSaveBehavior={$replicationSaveBehavior$}
       bind:autoReplication={$autoReplication$}