Feat/download via share link (#3666)

* Adds share download endpoint
* Adds Downloadable toggle to share modal

---------

Co-authored-by: advplyr <advplyr@protonmail.com>

client/components/modals/ShareModal.vue

@@ -19,12 +19,13 @@
           <ui-text-input v-model="currentShareUrl" show-copy readonly class="text-base h-10" />
         </div>
         <div class="w-full py-2 px-1">
-          <p v-if="currentShare.expiresAt" class="text-base">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
+          <p v-if="currentShare.isDownloadable" class="text-sm mb-2">{{ $strings.LabelDownloadable }}</p>
+          <p v-if="currentShare.expiresAt">{{ $getString('MessageShareExpiresIn', [currentShareTimeRemaining]) }}</p>
           <p v-else>{{ $strings.LabelPermanent }}</p>
         </div>
       </template>
       <template v-else>
-        <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
+        <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4 mb-2">
           <div class="w-full sm:w-48">
             <label class="px-1 text-sm font-semibold block">{{ $strings.LabelSlug }}</label>
             <ui-text-input v-model="newShareSlug" class="text-base h-10" />
@@ -46,6 +47,15 @@
             </div>
           </div>
         </div>
+        <div class="flex items-center w-full md:w-1/2 mb-4">
+          <p class="text-sm text-gray-300 py-1 px-1">{{ $strings.LabelDownloadable }}</p>
+          <ui-toggle-switch size="sm" v-model="isDownloadable" />
+          <ui-tooltip :text="$strings.LabelShareDownloadableHelp">
+            <p class="pl-4 text-sm">
+              <span class="material-symbols icon-text text-sm">info</span>
+            </p>
+          </ui-tooltip>
+        </div>
         <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareURLWillBe', [demoShareUrl])" />
         <p class="text-sm text-gray-300 py-1 px-1" v-html="$getString('MessageShareExpirationWillBe', [expirationDateString])" />
       </template>
@@ -81,7 +91,8 @@ export default {
           text: this.$strings.LabelDays,
           value: 'days'
         }
-      ]
+      ],
+      isDownloadable: false
     }
   },
   watch: {
@@ -172,7 +183,8 @@ export default {
         slug: this.newShareSlug,
         mediaItemType: 'book',
         mediaItemId: this.libraryItem.media.id,
-        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0
+        expiresAt: this.expireDurationSeconds ? Date.now() + this.expireDurationSeconds * 1000 : 0,
+        isDownloadable: this.isDownloadable
       }
       this.processing = true
       this.$axios

client/pages/share/_slug.vue

@@ -12,6 +12,10 @@
         <div class="w-full pt-16">
           <player-ui ref="audioPlayer" :chapters="chapters" :current-chapter="currentChapter" :paused="isPaused" :loading="!hasLoaded" :is-podcast="false" hide-bookmarks hide-sleep-timer @playPause="playPause" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setVolume="setVolume" @setPlaybackRate="setPlaybackRate" @seek="seek" />
         </div>
+
+        <ui-tooltip v-if="mediaItemShare.isDownloadable" direction="bottom" :text="$strings.LabelDownload" class="absolute top-0 left-0 m-4">
+          <button aria-label="Download" class="text-gray-300 hover:text-white" @click="downloadShareItem"><span class="material-symbols text-2xl sm:text-3xl">download</span></button>
+        </ui-tooltip>
       </div>
     </div>
   </div>
@@ -63,6 +67,9 @@ export default {
       if (!this.playbackSession.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
       return `${this.$config.routerBasePath}/public/share/${this.mediaItemShare.slug}/cover`
     },
+    downloadUrl() {
+      return `${process.env.serverUrl}/public/share/${this.mediaItemShare.slug}/download`
+    },
     audioTracks() {
       return (this.playbackSession.audioTracks || []).map((track) => {
         track.relativeContentUrl = track.contentUrl
@@ -247,6 +254,9 @@ export default {
     },
     playerFinished() {
       console.log('Player finished')
+    },
+    downloadShareItem() {
+      this.$downloadFile(this.downloadUrl)
     }
   },
   mounted() {

client/strings/en-us.json

@@ -300,6 +300,7 @@
   "LabelDiscover": "Discover",
   "LabelDownload": "Download",
   "LabelDownloadNEpisodes": "Download {0} episodes",
+  "LabelDownloadable": "Downloadable",
   "LabelDuration": "Duration",
   "LabelDurationComparisonExactMatch": "(exact match)",
   "LabelDurationComparisonLonger": "({0} longer)",
@@ -588,6 +589,7 @@
   "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders",
   "LabelSettingsTimeFormat": "Time Format",
   "LabelShare": "Share",
+  "LabelShareDownloadableHelp": "Allows users with the share link to download a zip file of the library item.",
   "LabelShareOpen": "Share Open",
   "LabelShareURL": "Share URL",
   "LabelShowAll": "Show All",