Make url dynamic and state-synced

ll3006 · ll3006 · commit f8d703586043 · 2024-06-23T14:08:34.000+02:00
diff --git a/components/OptionPanel.vue b/components/OptionPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const settings = useSettingsStore();
 const sources = useSourcesStore();
+const progress = useProgressStore();
 </script>
 
 <template>
@@ -28,12 +29,16 @@ const sources = useSourcesStore();
         :class="settings.showPanel ? 'left-[0.5rem]' : 'right-[0.5rem]'"
       />
     </div>
-    <header class="flex h-12 w-full align-middle">
-      <IconButton icon="i-[ic--round-close]" class="p-2" />
-      <h1 class="flex-1 p-3 text-center">
-        <a class="hover:underline" href="#">Example Title</a>
+    <header class="flex min-h-12 w-full align-middle">
+      <div class="h-12">
+        <IconButton icon="i-[ic--round-close]" class="p-2" />
+      </div>
+      <h1 class="flex h-max p-3 text-center">
+        <a class="text-balance break-words text-lg hover:underline" href="#">{{
+          progress.title
+        }}</a>
       </h1>
-      <div class="h-12 w-12"></div>
+      <div class="h-12 w-12 flex-none"></div>
     </header>
     <div class="flex h-8 w-full items-center justify-end gap-1 px-2 py-1.5">
       <IconButton icon="i-[mdi--share-variant-outline]" />
@@ -42,7 +47,7 @@ const sources = useSourcesStore();
       class="flex h-12 w-full justify-between bg-neutral-900 p-2.5 text-center align-middle"
     >
       <IconButton icon="i-[iconamoon--arrow-left-2]" />
-      <p>Chapter 1</p>
+      <p>Chapter {{ progress.chapter }}</p>
       <IconButton icon="i-[iconamoon--arrow-right-2]" />
     </div>
     <div class="flex h-8 w-full justify-end gap-1 py-1.5 align-middle">
diff --git a/components/PageSelector.vue b/components/PageSelector.vue
@@ -11,20 +11,20 @@ const currentPage = defineModel<number>();
   >
     <span
       class="pointer-events-none absolute right-1/2 z-10 self-center align-middle text-sm font-bold text-white"
-      >{{ (currentPage ?? 0) + 1 }}/{{ sources.current.pageCount }}</span
+      >{{ currentPage ?? 1 }}/{{ sources.current.pageCount }}</span
     >
     <template v-for="n in sources.current.pageCount">
       <div
         @click="
           () => {
-            currentPage = sources.current.pageCount - n;
+            currentPage = sources.current.pageCount - n + 1;
           }
         "
         class="relative flex h-8 grow items-end hover:bottom-1"
         :class="[
           {
             [tw`bg-gradient-to-t from-white`]:
-              sources.current.pageCount - n == currentPage,
+              sources.current.pageCount - n + 1 == currentPage,
           },
         ]"
       >
diff --git a/components/Reader.vue b/components/Reader.vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
 const settings = useSettingsStore();
+const progress = useProgressStore();
 const sources = useSourcesStore();
 
-const currentPage = ref(0);
-
-watchEffect(() => {
-  if (currentPage.value < 0) currentPage.value = 0;
-  if (currentPage.value >= sources.current.pageCount) {
-    currentPage.value = sources.current.pageCount - 1;
-  }
-});
-
 const currentImageSrc = computed(() => {
   if (sources.current) {
-    return sources.getPage(sources.currentSourceId!, currentPage.value);
+    return sources.getPage(sources.currentSourceId!, progress.page);
   }
 });
 
@@ -43,18 +35,18 @@ function onClick(e: MouseEvent) {
   let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
   let calc = w / 2 - e.offsetX;
   if (Math.abs(calc) > 2 * rem) {
-    currentPage.value += calc > 0 ? 1 : -1;
+    progress.page += calc > 0 ? 1 : -1;
   }
 }
 
 onMounted(() => {
   document.addEventListener("keydown", function (event) {
     switch (event.key) {
       case "ArrowLeft":
-        currentPage.value++;
+        progress.page++;
         break;
       case "ArrowRight":
-        currentPage.value--;
+        progress.page--;
         break;
       case "j":
         sources.changeSource();
@@ -68,7 +60,7 @@ onMounted(() => {
     @click="onClick"
     class="max-w-screen align-start relative flex h-screen grow select-none bg-black"
   >
-    <PageSelector v-model="currentPage" />
+    <PageSelector v-model="progress.page" />
     <div class="h-full w-full overflow-y-auto">
       <img :src="currentImageSrc" :class="['m-auto', pageFitImageClass]" />
     </div>
diff --git a/pages/read.vue b/pages/read.vue
diff --git a/pages/read/[title]/[chapter]/[page]/index.vue b/pages/read/[title]/[chapter]/[page]/index.vue
@@ -0,0 +1,55 @@
+<script async setup lang="ts">
+import { isClient } from "@vueuse/core";
+
+const route = useRoute();
+const router = useRouter();
+const sources = useSourcesStore();
+const progress = useProgressStore();
+
+if (typeof route.query.src == "string") {
+  await sources.setup(route.query.src);
+}
+
+function updateUrl() {
+  const newUrl = router.resolve({
+    name: "read-title-chapter-page",
+    params: {
+      title: progress.title.replace(/ /g, "_"),
+      chapter: progress.chapter,
+      page: progress.page,
+    },
+    query: { ...route.query, sid: sources.currentSourceId },
+  });
+  if (typeof newUrl.fullPath == "string")
+    window.history.replaceState(null, "", newUrl.fullPath);
+}
+if (typeof route.query.sid == "string") {
+  let sid = parseInt(route.query.sid);
+  if (sid) sources.changeSource(sid);
+}
+progress.setTitle(route.params.title);
+progress.setChapter(route.params.chapter);
+progress.setPage(route.params.page);
+if (isClient) updateUrl();
+
+useHead({
+  title: progress.status,
+});
+
+watch(
+  [
+    () => progress.title,
+    () => progress.chapter,
+    () => progress.page,
+    () => sources.currentSourceId,
+  ],
+  updateUrl
+);
+</script>
+
+<template>
+  <div class="max-w-screen flex min-h-screen flex-col md:flex-row">
+    <OptionPanel />
+    <Reader></Reader>
+  </div>
+</template>
diff --git a/stores/progress.ts b/stores/progress.ts
@@ -0,0 +1,54 @@
+export const useProgressStore = defineStore("progressStore", () => {
+  const sources = useSourcesStore();
+
+  const title = ref("Unknown");
+  const chapter = ref(1);
+  const page = ref(1);
+  const source = toRef(sources.currentSourceId);
+
+  function setSource(value: any) {
+    value = parseInt(value);
+    source.value = value ? value : 0;
+  }
+
+  function setTitle(value: any) {
+    let t = typeof value == "string" ? value : "Unknown";
+    t = t.replace(/_/g, " ");
+    title.value = t;
+  }
+
+  function setChapter(value: any) {
+    value = parseInt(value);
+    chapter.value = value ? value : 1;
+  }
+
+  function setPage(value: any) {
+    value = parseInt(value);
+    page.value = value ? clamp(value, 0, sources.current.pageCount) : 1;
+  }
+
+  watchEffect(() => {
+    if (page.value <= 1) page.value = 1;
+    if (page.value >= sources.current.pageCount) {
+      page.value = sources.current.pageCount;
+    }
+  });
+
+  const status = computed(() => {
+    return `${title.value} - Chapter ${chapter.value}`;
+  });
+
+  return {
+    source,
+    title,
+    chapter,
+    page,
+
+    setSource,
+    setTitle,
+    setChapter,
+    setPage,
+
+    status,
+  };
+});
diff --git a/stores/sources.ts b/stores/sources.ts
@@ -9,18 +9,15 @@ interface MangaSource {
 export const useSourcesStore = defineStore("sourcesStore", {
   state: () => ({
     _sourceList: [] as Array<MangaSource>,
-    currentSourceId: undefined as number | undefined,
+    currentSourceId: 0,
     loadedUrls: new Set([]) as Set<string>,
     _loadedIds: [] as Array<Array<number>>,
   }),
   getters: {
     current(state) {
       let source: MangaSource | undefined;
       let loadedPages: Array<number> | undefined;
-      if (
-        state._sourceList != undefined &&
-        state.currentSourceId != undefined
-      ) {
+      if (state._sourceList != undefined) {
         source = state._sourceList[state.currentSourceId];
         loadedPages = state._loadedIds[state.currentSourceId];
       }
@@ -39,10 +36,8 @@ export const useSourcesStore = defineStore("sourcesStore", {
      * @param index
      */
     changeSource(index: number | undefined = undefined) {
-      if (this.currentSourceId != undefined) {
-        if (index == undefined) index = this.currentSourceId + 1;
-        this.currentSourceId = index % this._sourceList.length;
-      }
+      if (index == undefined) index = this.currentSourceId + 1;
+      this.currentSourceId = index % this._sourceList.length;
     },
     preloadImage(url: string, source: number, index: number) {
       return new Promise<void>((resolve) => {
@@ -109,14 +104,15 @@ export const useSourcesStore = defineStore("sourcesStore", {
 
       this.currentSourceId = 0;
     },
-    getPage(sourceId: number, pageId: number) {
+    getPage(sourceId: number, page: number) {
+      page = clamp(page - 1, 0);
       if (
         this._sourceList[sourceId] &&
-        pageId < this._sourceList[sourceId].pages.length
+        page < this._sourceList[sourceId].pages.length
       ) {
         return (
           (this._sourceList[sourceId].pages_base ?? "") +
-          this._sourceList[sourceId].pages[pageId]
+          this._sourceList[sourceId].pages[page]
         );
       }
     },
diff --git a/utils/index.ts b/utils/index.ts
@@ -1,4 +1,8 @@
-export function clamp(value: number, min: number, max: number) {
-  max = Math.max(max - 1, 0); // Exclude last
-  return Math.max(Math.min(value, min), max);
+export function clamp(value: number, min: number, max: number | null = null) {
+  let ret = Math.max(value, min);
+  if (max != null) {
+    max = Math.max(max - 1, 0); // Exclude last
+    ret = Math.min(ret, max);
+  }
+  return ret;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,20 +11,20 @@ const currentPage = defineModel<number>();`
`11`	`11`	`>`
`12`	`12`	`<span`
`13`	`13`	`class="pointer-events-none absolute right-1/2 z-10 self-center align-middle text-sm font-bold text-white"`
`14`		`- >{{ (currentPage ?? 0) + 1 }}/{{ sources.current.pageCount }}</span`
	`14`	`+ >{{ currentPage ?? 1 }}/{{ sources.current.pageCount }}</span`
`15`	`15`	`>`
`16`	`16`	`<template v-for="n in sources.current.pageCount">`
`17`	`17`	`<div`
`18`	`18`	`@click="`
`19`	`19`	`() => {`
`20`		`- currentPage = sources.current.pageCount - n;`
	`20`	`+ currentPage = sources.current.pageCount - n + 1;`
`21`	`21`	`}`
`22`	`22`	`"`
`23`	`23`	`class="relative flex h-8 grow items-end hover:bottom-1"`
`24`	`24`	`:class="[`
`25`	`25`	`{`
`26`	`26`	[tw`bg-gradient-to-t from-white`]:
`27`		`- sources.current.pageCount - n == currentPage,`
	`27`	`+ sources.current.pageCount - n + 1 == currentPage,`
`28`	`28`	`},`
`29`	`29`	`]"`
`30`	`30`	`>`