Merge branch 'advplyr:master' into bookshelf-refactor-2

2025-08-02 01:05:25 +02:00 · 2024-06-25 10:03:18 +03:00 · 2024-06-25 10:03:18 +03:00 · 9bf4bd9bfa
commit 9bf4bd9bfa
parent 2819317924 04a65648a3
97 changed files with 10529 additions and 3391 deletions
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@ -11,7 +11,7 @@
      </div>
    </div>
    <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
-      <p class="text-center text-xl py-4">No results for query</p>
+      <p class="text-center text-xl py-4">{{ $strings.MessageBookshelfNoResultsForQuery }}</p>
    </div>
    <!-- Alternate plain view -->
    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24e">
--- a/client/components/app/MediaPlayerContainer.vue
+++ b/client/components/app/MediaPlayerContainer.vue
@ -5,23 +5,21 @@
      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
    </div>
    <div class="flex items-start mb-6 lg:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
-      <div class="min-w-0">
+      <div class="min-w-0 w-full">
        <div class="flex items-center">
          <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
            {{ title }}
          </nuxt-link>
          <widgets-explicit-indicator v-if="isExplicit" />
        </div>
-        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
+        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center w-1/2 sm:w-4/5 lg:w-2/5">
          <span class="material-icons text-sm">person</span>
-          <div class="flex items-center">
-            <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
-            <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
-            <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
-              <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-            </div>
-            <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
+          <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div>
+          <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div>
+          <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base truncate">
+            <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
          </div>
+          <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div>
        </div>

        <div class="text-gray-400 flex items-center">
--- a/client/components/controls/LibraryFilterSelect.vue
+++ b/client/components/controls/LibraryFilterSelect.vue
@ -37,12 +37,12 @@
            <span class="material-icons text-2xl">arrow_left</span>
          </div>
          <div class="flex items-center justify-between">
-            <span class="font-normal block truncate">Back</span>
+            <span class="font-normal block truncate">{{ $strings.ButtonBack }}</span>
          </div>
        </li>
        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
          <div class="flex items-center justify-center">
-            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+            <span class="font-normal block truncate py-2">{{ $getString('LabelLibraryFilterSublistEmpty', [selectedSublistText]) }}</span>
          </div>
        </li>
        <template v-for="item in sublistItems">
@ -106,31 +106,37 @@ export default {
        },
        {
          text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
          value: 'genres',
          sublist: true
        },
        {
          text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
          value: 'tags',
          sublist: true
        },
        {
          text: this.$strings.LabelAuthor,
+          textPlural: this.$strings.LabelAuthors,
          value: 'authors',
          sublist: true
        },
        {
          text: this.$strings.LabelNarrator,
+          textPlural: this.$strings.LabelNarrators,
          value: 'narrators',
          sublist: true
        },
        {
          text: this.$strings.LabelPublisher,
+          textPlural: this.$strings.LabelPublishers,
          value: 'publishers',
          sublist: true
        },
        {
          text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
          value: 'languages',
          sublist: true
        },
@ -149,36 +155,43 @@ export default {
        },
        {
          text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
          value: 'genres',
          sublist: true
        },
        {
          text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
          value: 'tags',
          sublist: true
        },
        {
          text: this.$strings.LabelSeries,
+          textPlural: this.$strings.LabelSeries,
          value: 'series',
          sublist: true
        },
        {
          text: this.$strings.LabelAuthor,
+          textPlural: this.$strings.LabelAuthors,
          value: 'authors',
          sublist: true
        },
        {
          text: this.$strings.LabelNarrator,
+          textPlural: this.$strings.LabelNarrators,
          value: 'narrators',
          sublist: true
        },
        {
          text: this.$strings.LabelPublisher,
+          textPlural: this.$strings.LabelPublishers,
          value: 'publishers',
          sublist: true
        },
        {
          text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
          value: 'languages',
          sublist: true
        },
@ -227,16 +240,19 @@ export default {
        },
        {
          text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
          value: 'genres',
          sublist: true
        },
        {
          text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
          value: 'tags',
          sublist: true
        },
        {
          text: this.$strings.LabelLanguage,
+          textPlural: this.$strings.LabelLanguages,
          value: 'languages',
          sublist: true
        },
@ -255,11 +271,13 @@ export default {
        },
        {
          text: this.$strings.LabelGenre,
+          textPlural: this.$strings.LabelGenres,
          value: 'genres',
          sublist: true
        },
        {
          text: this.$strings.LabelTag,
+          textPlural: this.$strings.LabelTags,
          value: 'tags',
          sublist: true
        },
@ -279,6 +297,13 @@ export default {
    selectedItemSublist() {
      return this.selected?.includes('.') ? this.selected.split('.')[0] : null
    },
+    selectedSublistText() {
+      if (!this.sublist) {
+        return ''
+      }
+      const sublistItem = this.selectItems.find((i) => i.value === this.sublist)
+      return sublistItem?.textPlural || sublistItem?.text || ''
+    },
    selectedText() {
      if (!this.selected) return ''
      const parts = this.selected.split('.')
@ -505,4 +530,4 @@ export default {
 .libraryFilterMenu {
  max-height: calc(100vh - 125px);
 }
-</style>
+</style>
--- a/client/components/modals/ShareModal.vue
+++ b/client/components/modals/ShareModal.vue
@ -0,0 +1,195 @@
+<template>
+  <modals-modal ref="modal" v-model="show" name="share" :width="600" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="text-3xl text-white truncate">Share media item</p>
+      </div>
+    </template>
+    <div class="px-6 py-8 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <template v-if="currentShare">
+        <div class="w-full py-2">
+          <label class="px-1 text-sm font-semibold block">Share URL</label>
+          <ui-text-input v-model="currentShareUrl" readonly class="text-base h-10" />
+        </div>
+        <div class="w-full py-2 px-1">
+          <p v-if="currentShare.expiresAt" class="text-base">Expires in {{ currentShareTimeRemaining }}</p>
+          <p v-else>Permanent</p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex items-center justify-between space-x-4">
+          <div class="w-40">
+            <label class="px-1 text-sm font-semibold block">Slug</label>
+            <ui-text-input v-model="newShareSlug" class="text-base h-10" />
+          </div>
+          <div class="flex-grow" />
+          <div class="w-80">
+            <label class="px-1 text-sm font-semibold block">Share Duration</label>
+            <div class="inline-flex items-center space-x-2">
+              <div>
+                <ui-icon-btn icon="remove" :size="10" @click="clickMinus" />
+              </div>
+              <ui-text-input v-model="newShareDuration" type="number" text-center no-spinner class="text-center w-28 h-10 text-base" />
+              <div>
+                <ui-icon-btn icon="add" :size="10" @click="clickPlus" />
+              </div>
+              <ui-dropdown v-model="shareDurationUnit" :items="durationUnits" />
+            </div>
+          </div>
+        </div>
+        <p class="text-sm text-gray-300 py-4 px-1">
+          Share URL will be: <span class="">{{ demoShareUrl }}</span>
+        </p>
+      </template>
+      <div class="flex items-center pt-6">
+        <div class="flex-grow" />
+        <ui-btn v-if="currentShare" color="error" small @click="deleteShare">{{ $strings.ButtonDelete }}</ui-btn>
+        <ui-btn v-if="!currentShare" color="success" small @click="openShare">{{ $strings.ButtonShare }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => null
+    },
+    mediaItemShare: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newShareSlug: '',
+      newShareDuration: 0,
+      currentShare: null,
+      shareDurationUnit: 'minutes',
+      durationUnits: [
+        {
+          text: 'Minutes',
+          value: 'minutes'
+        },
+        {
+          text: 'Hours',
+          value: 'hours'
+        },
+        {
+          text: 'Days',
+          value: 'days'
+        }
+      ]
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    demoShareUrl() {
+      return `${window.origin}/share/${this.newShareSlug}`
+    },
+    currentShareUrl() {
+      if (!this.currentShare) return ''
+      return `${window.origin}/share/${this.currentShare.slug}`
+    },
+    currentShareTimeRemaining() {
+      if (!this.currentShare) return 'Error'
+      if (!this.currentShare.expiresAt) return 'Permanent'
+      const msRemaining = new Date(this.currentShare.expiresAt).valueOf() - Date.now()
+      if (msRemaining <= 0) return 'Expired'
+      return this.$elapsedPretty(msRemaining / 1000, true)
+    },
+    expireDurationSeconds() {
+      let shareDuration = Number(this.newShareDuration)
+      if (!shareDuration || isNaN(shareDuration)) return 0
+      return this.newShareDuration * (this.shareDurationUnit === 'minutes' ? 60 : this.shareDurationUnit === 'hours' ? 3600 : 86400)
+    }
+  },
+  methods: {
+    clickPlus() {
+      this.newShareDuration++
+    },
+    clickMinus() {
+      if (this.newShareDuration > 0) {
+        this.newShareDuration--
+      }
+    },
+    deleteShare() {
+      if (!this.currentShare) return
+      this.processing = true
+      this.$axios
+        .$delete(`/api/share/mediaitem/${this.currentShare.id}`)
+        .then(() => {
+          this.currentShare = null
+          this.$emit('removed')
+        })
+        .catch((error) => {
+          console.error('deleteShare', error)
+          let errorMsg = error.response?.data || 'Failed to delete share'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    openShare() {
+      if (!this.newShareSlug) {
+        this.$toast.error('Slug is required')
+        return
+      }
+      const payload = {
+        slug: this.newShareSlug,
+        mediaItemType: 'book',
+        mediaItemId: this.libraryItem.media.id,
+        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0
+      }
+      this.processing = true
+      this.$axios
+        .$post(`/api/share/mediaitem`, payload)
+        .then((data) => {
+          this.currentShare = data
+          this.$emit('opened', data)
+        })
+        .catch((error) => {
+          console.error('openShare', error)
+          let errorMsg = error.response?.data || 'Failed to share item'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      this.newShareSlug = this.$randomId(10)
+      if (this.mediaItemShare) {
+        this.currentShare = { ...this.mediaItemShare }
+      } else {
+        this.currentShare = null
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
--- a/client/components/player/PlayerUi.vue
+++ b/client/components/player/PlayerUi.vue
@ -53,7 +53,7 @@
      <p class="font-mono text-sm hidden sm:block text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
      <div class="flex-grow" />
      <p class="text-xs sm:text-sm text-gray-300 pt-0.5">
-        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ currentChapterIndex + 1 }} of {{ chapters.length }})</span>
+        {{ currentChapterName }} <span v-if="useChapterTrack" class="text-xs text-gray-400">&nbsp;({{ $getString('LabelPlayerChapterNumberMarker', [currentChapterIndex + 1, chapters.length]) }})</span>
      </p>
      <div class="flex-grow" />
      <p class="font-mono text-xxs sm:text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
--- a/client/components/prompt/Confirm.vue
+++ b/client/components/prompt/Confirm.vue
@ -3,7 +3,7 @@
    <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
    <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p class="text-lg mb-6 mt-2 px-1" v-html="message" />
+        <p id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="message" />

        <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />

@ -131,4 +131,14 @@ export default {
    }
  }
 }
-</script>
+</script>
+
+<style>
+#confirm-prompt-message code {
+  font-size: 1rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@ -179,7 +179,7 @@ export default {
        ebookLocation: this.page,
        ebookProgress: Math.max(0, Math.min(1, (Number(this.page) - 1) / Number(this.numPages)))
      }
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload, { progress: false }).catch((error) => {
        console.error('ComicReader.updateProgress failed:', error)
      })
    },
@ -386,4 +386,4 @@ export default {
 .pagemenu {
  max-height: calc(100% - 48px);
 }
-</style>
+</style>
--- a/client/components/readers/EpubReader.vue
+++ b/client/components/readers/EpubReader.vue
@ -46,7 +46,8 @@ export default {
        font: 'serif',
        fontScale: 100,
        lineSpacing: 115,
-        spread: 'auto'
+        spread: 'auto',
+        textStroke: 0
      }
    }
  },
@ -109,11 +110,14 @@ export default {

      const fontScale = this.ereaderSettings.fontScale / 100

+      const textStroke = this.ereaderSettings.textStroke / 100
+
      return {
        '*': {
          color: `${fontColor}!important`,
          'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important'
+          'line-height': lineSpacing * fontScale + 'rem!important',
+          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
        },
        a: {
          color: `${fontColor}!important`
@ -195,7 +199,7 @@ export default {
     */
    updateProgress(payload) {
      if (!this.keepProgress) return
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload, { progress: false }).catch((error) => {
        console.error('EpubReader.updateProgress failed:', error)
      })
    },
--- a/client/components/readers/PdfReader.vue
+++ b/client/components/readers/PdfReader.vue
@ -23,13 +23,10 @@
      <div class="flex items-center justify-center">
        <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="overflow-auto">
          <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
-          <pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="progressEvt" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
+          <pdf v-if="pdfDocInitParams" ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="progressEvt" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
        </div>
      </div>
    </div>
-    <!-- <div class="text-center py-2 text-lg">
-      <p>{{ page }} / {{ numPages }}</p>
-    </div> -->
  </div>
 </template>

@ -57,7 +54,8 @@ export default {
      rotate: 0,
      loadedRatio: 0,
      page: 1,
-      numPages: 0
+      numPages: 0,
+      pdfDocInitParams: null
    }
  },
  computed: {
@ -108,14 +106,6 @@ export default {
        return `/api/items/${this.libraryItemId}/ebook/${this.fileId}`
      }
      return `/api/items/${this.libraryItemId}/ebook`
-    },
-    pdfDocInitParams() {
-      return {
-        url: this.ebookUrl,
-        httpHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
-      }
    }
  },
  methods: {
@ -136,7 +126,7 @@ export default {
        ebookLocation: this.page,
        ebookProgress: Math.max(0, Math.min(1, (Number(this.page) - 1) / Number(this.numPages)))
      }
-      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
+      this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload, { progress: false }).catch((error) => {
        console.error('EpubReader.updateProgress failed:', error)
      })
    },
@ -149,6 +139,7 @@ export default {
      this.loadedRatio = progress
    },
    numPagesLoaded(e) {
+      if (!e) return
      this.numPages = e
    },
    prev() {
@ -167,15 +158,25 @@ export default {
    resize() {
      this.windowWidth = window.innerWidth
      this.windowHeight = window.innerHeight
+    },
+    init() {
+      this.pdfDocInitParams = {
+        url: this.ebookUrl,
+        httpHeaders: {
+          Authorization: `Bearer ${this.userToken}`
+        }
+      }
    }
  },
  mounted() {
    this.windowWidth = window.innerWidth
    this.windowHeight = window.innerHeight
    window.addEventListener('resize', this.resize)
+
+    this.init()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  }
 }
-</script>
+</script>
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@ -98,6 +98,12 @@
          </div>
          <ui-range-input v-model="ereaderSettings.lineSpacing" :min="100" :max="300" :step="5" @input="settingsUpdated" />
        </div>
+        <div class="flex items-center mb-4">
+          <div class="w-40">
+            <p class="text-lg">{{ $strings.LabelFontBoldness }}:</p>
+          </div>
+          <ui-range-input v-model="ereaderSettings.textStroke" :min="0" :max="300" :step="5" @input="settingsUpdated" />
+        </div>
        <div class="flex items-center">
          <div class="w-40">
            <p class="text-lg">{{ $strings.LabelLayout }}:</p>
@ -130,7 +136,9 @@ export default {
        font: 'serif',
        fontScale: 100,
        lineSpacing: 115,
-        spread: 'auto'
+        fontBoldness: 100,
+        spread: 'auto',
+        textStroke: 0
      }
    }
  },
@ -378,7 +386,12 @@ export default {
      try {
        const settings = localStorage.getItem('ereaderSettings')
        if (settings) {
-          this.ereaderSettings = JSON.parse(settings)
+          const _ereaderSettings = JSON.parse(settings)
+          for (const key in this.ereaderSettings) {
+            if (_ereaderSettings[key] !== undefined) {
+              this.ereaderSettings[key] = _ereaderSettings[key]
+            }
+          }
          this.settingsUpdated()
        }
      } catch (error) {
@ -416,4 +429,4 @@ export default {
    height: 100%;
  }
 }
-</style>
+</style>
--- a/client/components/tables/ChaptersTable.vue
+++ b/client/components/tables/ChaptersTable.vue
@ -15,7 +15,7 @@
          <th class="text-left w-16"><span class="px-4">Id</span></th>
          <th class="text-left">{{ $strings.LabelTitle }}</th>
          <th class="text-center">{{ $strings.LabelStart }}</th>
-          <th class="text-center">{{ $strings.LabelEnd }}</th>
+          <th class="text-center">{{ $strings.LabelDuration }}</th>
        </tr>
        <tr v-for="chapter in chapters" :key="chapter.id">
          <td class="text-left">
@ -27,8 +27,8 @@
          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
            {{ $secondsToTimestamp(chapter.start) }}
          </td>
-          <td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
-            {{ $secondsToTimestamp(chapter.end) }}
+          <td class="font-mono text-center">
+            {{ $secondsToTimestamp(Math.max(0, chapter.end - chapter.start)) }}
          </td>
        </tr>
      </table>
--- a/client/components/tables/CustomMetadataProviderTable.vue
+++ b/client/components/tables/CustomMetadataProviderTable.vue
@ -21,7 +21,7 @@
      </tr>
    </table>
    <div v-else-if="!processing" class="text-center py-8">
-      <p class="text-lg">No custom metadata providers</p>
+      <p class="text-lg">{{ $strings.LabelNoCustomMetadataProviders }}</p>
    </div>

    <div v-if="processing" class="absolute inset-0 h-full flex items-center justify-center bg-black/40 rounded-md">