feat: page hashing enhancement

only hash pages for cbz
delete non-cbz page hashes
store page hashes

komga-webui/package.json

@@ -13,6 +13,7 @@
     "axios": "^0.25.0",
     "core-js": "^3.20.3",
     "date-fns": "^2.28.0",
+    "filesize": "^8.0.7",
     "js-file-downloader": "^1.1.24",
     "language-tags": "^1.0.5",
     "lodash": "^4.17.21",

komga-webui/src/components/PageHashKnownCard.vue

@@ -0,0 +1,163 @@
+<template>
+  <v-card>
+    <v-container fluid>
+      <v-row>
+        <v-col>
+          <v-img
+            width="200"
+            height="300"
+            contain
+            @click="$emit('image-clicked')"
+            :src="pageHashKnownThumbnailUrl(hash)"
+            style="cursor: zoom-in"
+          />
+
+        </v-col>
+        <v-col>
+          <v-card-text style="min-width: 200px">
+            <v-container>
+              <v-row>
+                <v-col>
+                  <v-chip label small :color="actionColor">
+                    {{ $t(`enums.page_hash_action.${hash.action}`) }}
+                  </v-chip>
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col>
+                  <div>{{ hash.mediaType }}</div>
+                  <div>{{ getFileSize(hash.size) || $t('duplicate_pages.unknown_size') }}</div>
+                </v-col>
+              </v-row>
+
+
+              <v-row>
+                <v-col>
+                  <v-btn
+                    v-if="matchCount"
+                    @click="$emit('matches-clicked')"
+                    outlined
+                    rounded
+                  >
+                    {{ $tc('duplicate_pages.matches_n', matchCount) }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col>
+                  <div
+                    v-if="hash.deleteCount"
+                  >{{ $t('duplicate_pages.deleted_count', {count: hash.deleteCount}) }}
+                  </div>
+
+                  <div
+                    v-if="hash.deleteCount"
+                  >{{ $t('duplicate_pages.saved_size', {size: getFileSize(hash.size * hash.deleteCount)}) }}
+                  </div>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-card-text>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-card-actions>
+      <v-btn v-if="hash.action === PageHashAction.DELETE_MANUAL" color="primary" @click="deleteMatches">
+        {{ $t('duplicate_pages.action_delete_matches') }}
+      </v-btn>
+      <v-btn v-if="hash.action !== PageHashAction.IGNORE" text @click="ignore">{{
+          $t('duplicate_pages.action_ignore')
+        }}
+      </v-btn>
+      <v-btn v-if="hash.action !== PageHashAction.DELETE_MANUAL" text @click="deleteManual">
+        {{ $t('duplicate_pages.action_delete_manual') }}
+      </v-btn>
+      <v-btn v-if="hash.action !== PageHashAction.DELETE_AUTO" text @click="deleteAuto" :disabled="!hash.size">
+        {{ $t('duplicate_pages.action_delete_auto') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue, {PropType} from 'vue'
+import {pageHashKnownThumbnailUrl} from '@/functions/urls'
+import {PageHashKnownDto} from '@/types/komga-pagehashes'
+import {PageHashAction} from '@/types/enum-pagehashes'
+import {getFileSize} from '@/functions/file'
+
+export default Vue.extend({
+  name: 'PageHashKnownCard',
+  props: {
+    hash: {
+      type: Object as PropType<PageHashKnownDto>,
+    },
+  },
+  data() {
+    return {
+      pageHashKnownThumbnailUrl,
+      getFileSize,
+      PageHashAction,
+      matchCount: undefined as number | undefined,
+    }
+  },
+  computed: {
+    actionColor(): string {
+      switch (this.hash.action) {
+        case PageHashAction.DELETE_AUTO:
+          return 'success'
+        case PageHashAction.DELETE_MANUAL:
+          return 'warning'
+        default:
+          return 'grey'
+      }
+    },
+  },
+  mounted() {
+    this.getMatchCount()
+  },
+  watch: {
+    hash: {
+      handler() {
+        this.getMatchCount()
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    async getMatchCount() {
+      if (this.hash?.action === PageHashAction.DELETE_MANUAL)
+        this.matchCount = (await this.$komgaPageHashes.getUnknownPageHashMatches(this.hash, {size: 0})).totalElements
+      else
+        this.matchCount = undefined
+    },
+    deleteMatches() {
+    },
+    ignore() {
+      this.updatePageHash(PageHashAction.IGNORE)
+    },
+    deleteManual() {
+      this.updatePageHash(PageHashAction.DELETE_MANUAL)
+    },
+    deleteAuto() {
+      this.updatePageHash(PageHashAction.DELETE_AUTO)
+    },
+    async updatePageHash(action: PageHashAction) {
+      try {
+        const p = {
+          hash: this.hash.hash,
+          mediaType: this.hash.mediaType,
+          size: this.hash.size,
+          action: action,
+        }
+        await this.$komgaPageHashes.createOrUpdatePageHash(p)
+        this.$emit('updated', p)
+      } catch (e) {
+      }
+    },
+  },
+})
+</script>

komga-webui/src/components/PageHashMatchesTable.vue

@@ -33,13 +33,13 @@
 <script lang="ts">
 import Vue, {PropType} from 'vue'
 import {bookPageThumbnailUrl} from '@/functions/urls'
-import {PageHashMatchDto, PageHashUnknownDto} from '@/types/komga-pagehashes'
+import {PageHashDto, PageHashMatchDto, PageHashUnknownDto} from '@/types/komga-pagehashes'
 
 export default Vue.extend({
   name: 'PageHashMatchesTable',
   props: {
     hash: {
-      type: Object as PropType<PageHashUnknownDto>,
+      type: Object as PropType<PageHashDto>,
     },
   },
   data() {
@@ -74,7 +74,7 @@ export default Vue.extend({
     },
   },
   methods: {
-    async loadData(hash: PageHashUnknownDto) {
+    async loadData(hash: PageHashDto) {
       this.loading = true
 
       const {sortBy, sortDesc, page, itemsPerPage} = this.options

komga-webui/src/components/PageHashUnknownCard.vue

@@ -0,0 +1,105 @@
+<template>
+  <v-card>
+    <v-container fluid>
+      <v-row>
+        <v-col>
+          <v-img
+            width="200"
+            height="300"
+            contain
+            @click="$emit('image-clicked')"
+            :src="pageHashUnknownThumbnailUrl(hash, 500)"
+            style="cursor: zoom-in"
+          />
+
+        </v-col>
+        <v-col>
+          <v-card-text style="min-width: 200px">
+            <v-container>
+              <v-row>
+                <v-col>
+                  <div>{{ hash.mediaType }}</div>
+                  <div>{{ getFileSize(hash.size) || $t('duplicate_pages.unknown_size') }}</div>
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col>
+                  <v-btn
+                    @click="$emit('matches-clicked')"
+                    outlined
+                    rounded
+                  >
+                    {{ $tc('duplicate_pages.matches_n', hash.matchCount) }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+              <v-row>
+                <v-col>
+                  <div
+                    v-if="hash.size"
+                  >{{ $t('duplicate_pages.delete_to_save', {size: getFileSize(hash.size * hash.matchCount)}) }}
+                  </div>
+                </v-col>
+              </v-row>
+
+            </v-container>
+          </v-card-text>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-card-actions>
+      <v-btn text @click="ignore">{{ $t('duplicate_pages.action_ignore') }}</v-btn>
+      <v-btn text @click="deleteManual">{{ $t('duplicate_pages.action_delete_manual') }}</v-btn>
+      <v-btn text @click="deleteAuto" :disabled="!hash.size">{{ $t('duplicate_pages.action_delete_auto') }}</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue, {PropType} from 'vue'
+import {pageHashUnknownThumbnailUrl} from '@/functions/urls'
+import {PageHashUnknownDto} from '@/types/komga-pagehashes'
+import {PageHashAction} from '@/types/enum-pagehashes'
+import {getFileSize} from '@/functions/file'
+
+export default Vue.extend({
+  name: 'PageHashUnknownCard',
+  props: {
+    hash: {
+      type: Object as PropType<PageHashUnknownDto>,
+    },
+  },
+  data() {
+    return {
+      pageHashUnknownThumbnailUrl,
+      getFileSize,
+    }
+  },
+  methods: {
+    ignore() {
+      this.createPageHash(PageHashAction.IGNORE)
+    },
+    deleteManual() {
+      this.createPageHash(PageHashAction.DELETE_MANUAL)
+    },
+    deleteAuto() {
+      this.createPageHash(PageHashAction.DELETE_AUTO)
+    },
+    async createPageHash(action: PageHashAction) {
+      try {
+        await this.$komgaPageHashes.createOrUpdatePageHash({
+          hash: this.hash.hash,
+          mediaType: this.hash.mediaType,
+          size: this.hash.size,
+          action: action,
+        })
+        this.$emit('created')
+      } catch (e) {
+      }
+    },
+  },
+})
+</script>

komga-webui/src/functions/file.ts

@@ -1,7 +1,17 @@
+import filesize from 'filesize'
+
 export async function getFileFromUrl(url: string, name: string = url, defaultType = 'image/jpeg') {
   const response = await fetch(url)
   const data = await response.blob()
   return new File([data], name, {
     type: data.type || defaultType,
   })
 }
+
+
+const filesizePartial = filesize.partial({round: 1})
+
+export function getFileSize(n?: number): string | undefined {
+  if(!n) return undefined
+  return filesizePartial(n)
+}