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

client/pages/config/authentication.vue

@@ -4,7 +4,7 @@
       <div class="w-full border border-white/10 rounded-xl p-4 my-4 bg-primary/25">
         <div class="flex items-center">
           <ui-checkbox v-model="showCustomLoginMessage" checkbox-bg="bg" />
-          <p class="text-lg pl-4">Custom Message on Login</p>
+          <p class="text-lg pl-4">{{ $strings.HeaderCustomMessageOnLogin }}</p>
         </div>
         <transition name="slide">
           <div v-if="showCustomLoginMessage" class="w-full pt-4">

client/pages/config/backups.vue

@@ -1,10 +1,27 @@
 <template>
   <div>
     <app-settings-content :header-text="$strings.HeaderBackups" :description="$strings.MessageBackupsDescription">
-      <div v-if="backupLocation" class="flex items-center mb-4">
-        <span class="material-icons-outlined text-2xl text-black-50 mr-2">folder</span>
-        <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelBackupLocation }}:</span>
-        <div class="text-gray-100 pl-4">{{ backupLocation }}</div>
+      <div v-if="backupLocation" class="mb-4 max-w-full overflow-hidden">
+        <div class="flex items-center mb-0.5">
+          <span class="material-icons-outlined text-2xl text-black-50 mr-2">folder</span>
+          <span class="text-white text-opacity-60 uppercase text-sm whitespace-nowrap">{{ $strings.LabelBackupLocation }}:</span>
+        </div>
+        <div v-if="!showEditBackupPath" class="inline-flex items-center w-full overflow-hidden">
+          <p class="text-gray-100 max-w-[calc(100%-40px)] text-sm sm:text-base break-words">{{ backupLocation }}</p>
+          <div class="w-10 min-w-10 flex items-center justify-center">
+            <button class="text-black-50 hover:text-yellow-500 inline-flex" type="button" @click="showEditBackupPath = !showEditBackupPath">
+              <span class="material-icons text-lg">edit</span>
+            </button>
+          </div>
+        </div>
+        <div v-else>
+          <form class="flex items-center w-full space-x-1" @submit.prevent="saveBackupPath">
+            <ui-text-input v-model="newBackupLocation" :disabled="savingBackupPath" class="w-full max-w-[calc(100%-50px)] text-sm h-8" />
+            <ui-btn small :loading="savingBackupPath" color="success" type="submit" class="h-8">{{ $strings.ButtonSave }}</ui-btn>
+            <ui-btn small :disabled="savingBackupPath" type="button" class="h-8" @click="cancelEditBackupPath">{{ $strings.ButtonCancel }}</ui-btn>
+          </form>
+          <p class="text-sm text-warning/80 pt-1">{{ $strings.MessageBackupsLocationEditNote }}</p>
+        </div>
       </div>
 
       <div class="flex items-center py-2">
@@ -15,21 +32,23 @@
       </div>
 
       <div v-if="enableBackups" class="mb-6">
-        <div class="flex items-center pl-6 mb-2">
-          <span class="material-icons-outlined text-2xl text-black-50 mr-2">schedule</span>
-          <div class="w-40">
+        <div class="flex items-center pl-0 sm:pl-6 mb-2">
+          <span class="material-icons-outlined text-xl sm:text-2xl text-black-50 mr-2">schedule</span>
+          <div class="w-32 min-w-32 sm:w-40 sm:min-w-40">
             <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.HeaderSchedule }}:</span>
           </div>
-          <div class="text-gray-100">{{ scheduleDescription }}</div>
-          <span class="material-icons text-lg text-black-50 hover:text-yellow-500 cursor-pointer ml-2" @click="showCronBuilder = !showCronBuilder">edit</span>
+          <div class="text-gray-100 text-sm sm:text-base">{{ scheduleDescription }}</div>
+          <button class="ml-2 text-black-50 hover:text-yellow-500 inline-flex" type="button" @click="showCronBuilder = !showCronBuilder">
+            <span class="material-icons text-lg">edit</span>
+          </button>
         </div>
 
-        <div v-if="nextBackupDate" class="flex items-center pl-6 py-0.5 px-2">
-          <span class="material-icons-outlined text-2xl text-black-50 mr-2">event</span>
-          <div class="w-40">
+        <div v-if="nextBackupDate" class="flex items-center pl-0 sm:pl-6 py-0.5">
+          <span class="material-icons-outlined text-xl sm:text-2xl text-black-50 mr-2">event</span>
+          <div class="w-32 min-w-32 sm:w-40 sm:min-w-40">
             <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNextBackupDate }}:</span>
           </div>
-          <div class="text-gray-100">{{ nextBackupDate }}</div>
+          <div class="text-gray-100 text-sm sm:text-base">{{ nextBackupDate }}</div>
         </div>
       </div>
 
@@ -49,7 +68,7 @@
         </ui-tooltip>
       </div>
 
-      <tables-backups-table @loaded="backupsLoaded" />
+      <tables-backups-table ref="backupsTable" @loaded="backupsLoaded" />
 
       <modals-backup-schedule-modal v-model="showCronBuilder" :cron-expression.sync="cronExpression" />
     </app-settings-content>
@@ -72,7 +91,10 @@ export default {
       cronExpression: '',
       newServerSettings: {},
       showCronBuilder: false,
-      backupLocation: ''
+      showEditBackupPath: false,
+      backupLocation: '',
+      newBackupLocation: '',
+      savingBackupPath: false
     }
   },
   watch: {
@@ -107,6 +129,39 @@ export default {
   methods: {
     backupsLoaded(backupLocation) {
       this.backupLocation = backupLocation
+      this.newBackupLocation = backupLocation
+    },
+    cancelEditBackupPath() {
+      this.newBackupLocation = this.backupLocation
+      this.showEditBackupPath = false
+    },
+    saveBackupPath() {
+      if (!this.newBackupLocation?.trim()) {
+        this.$toast.error(this.$strings.MessageBackupsLocationPathEmpty)
+        return
+      }
+      this.newBackupLocation = this.newBackupLocation.trim()
+      if (this.newBackupLocation === this.backupLocation) {
+        this.showEditBackupPath = false
+        return
+      }
+
+      this.savingBackupPath = true
+      this.$axios
+        .patch('/api/backups/path', { path: this.newBackupLocation })
+        .then(() => {
+          this.backupLocation = this.newBackupLocation
+          this.showEditBackupPath = false
+          this.$refs.backupsTable.loadBackups()
+        })
+        .catch((error) => {
+          console.error('Failed to save backup path', error)
+          const errorMsg = error.response?.data || 'Failed to save backup path'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.savingBackupPath = false
+        })
     },
     updateBackupsSettings() {
       if (isNaN(this.maxBackupSize) || this.maxBackupSize <= 0) {

client/pages/config/index.vue

@@ -368,7 +368,8 @@ export default {
     },
     purgeItemsCache() {
       const payload = {
-        message: `<span class="text-warning text-base">Warning! This will delete the entire folder at /metadata/cache/items.</span><br />Are you sure you want to purge items cache?`,
+        // message: `This will delete the entire folder at <code>/metadata/cache/items</code>.<br />Are you sure you want to purge items cache?`,
+        message: this.$strings.MessageConfirmPurgeItemsCache,
         callback: (confirmed) => {
           if (confirmed) {
             this.sendPurgeItemsCache()

client/pages/item/_id/index.vue

@@ -147,6 +147,7 @@
       </div>
     </div>
 
+    <modals-share-modal v-model="showShareModal" :media-item-share="mediaItemShare" :library-item="libraryItem" @opened="openedShare" @removed="removedShare" />
     <modals-podcast-episode-feed v-model="showPodcastEpisodeFeed" :library-item="libraryItem" :episodes="podcastFeedEpisodes" />
     <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :library-item-id="libraryItemId" hide-create @select="selectBookmark" />
   </div>
@@ -160,7 +161,7 @@ export default {
     }
 
     // Include episode downloads for podcasts
-    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed`).catch((error) => {
+    var item = await app.$axios.$get(`/api/items/${params.id}?expanded=1&include=downloads,rssfeed,share`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -170,7 +171,8 @@ export default {
     }
     return {
       libraryItem: item,
-      rssFeed: item.rssFeed || null
+      rssFeed: item.rssFeed || null,
+      mediaItemShare: item.mediaItemShare || null
     }
   },
   data() {
@@ -184,7 +186,8 @@ export default {
       episodeDownloadsQueued: [],
       showBookmarksModal: false,
       isDescriptionClamped: false,
-      showFullDescription: false
+      showFullDescription: false,
+      showShareModal: false
     }
   },
   computed: {
@@ -437,6 +440,13 @@ export default {
         })
       }
 
+      if (this.userIsAdminOrUp && !this.isPodcast) {
+        items.push({
+          text: 'Share',
+          action: 'share'
+        })
+      }
+
       if (this.userCanDelete) {
         items.push({
           text: this.$strings.ButtonDelete,
@@ -448,6 +458,12 @@ export default {
     }
   },
   methods: {
+    openedShare(mediaItemShare) {
+      this.mediaItemShare = mediaItemShare
+    },
+    removedShare() {
+      this.mediaItemShare = null
+    },
     selectBookmark(bookmark) {
       if (!bookmark) return
       if (this.isStreaming) {
@@ -761,6 +777,8 @@ export default {
         this.deleteLibraryItem()
       } else if (action === 'sendToDevice') {
         this.sendToDevice(data)
+      } else if (action === 'share') {
+        this.showShareModal = true
       }
     }
   },

client/pages/share/_slug.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="page-wrapper" class="w-full h-screen overflow-y-auto">
+    <div class="w-full h-full flex items-center justify-center">
+      <p class="text-xl">{{ mediaItemShare.mediaItem.title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  layout: 'blank',
+  async asyncData({ params, error, app }) {
+    const mediaItemShare = await app.$axios.$get(`/public/share/${params.slug}`).catch((error) => {
+      console.error('Failed', error)
+      return null
+    })
+    if (!mediaItemShare) {
+      return error({ statusCode: 404, message: 'Not found' })
+    }
+
+    return {
+      mediaItemShare: mediaItemShare
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {
+    console.log('Loaded media item share', this.mediaItemShare)
+  }
+}
+</script>