Added functionality to export a single playlist (FreeTubeApp#5779)

* Added functionality to export a single playlist

* Changed whitespace replacement in export file names to underscore

Co-authored-by: PikachuEXE <[email protected]>

* Added regular expression to replace common forbidden characters in export file name

* Optimized regex for replacing illegal characters in file names

* Prefer replaceAll over replace

* * Make button hidden for online playlist, local playlist w/o video, move it before "remove duplicate" button

---------

Co-authored-by: PikachuEXE <[email protected]>

Author: 2 people

src/renderer/components/playlist-info/playlist-info.js

@@ -10,6 +10,9 @@ import {
   ctrlFHandler,
   formatNumber,
   showToast,
+  getTodayDateStrLocalTimezone,
+  writeFileFromDialog,
+  showSaveDialog,
 } from '../../helpers/utils'
 import debounce from 'lodash.debounce'
 
@@ -262,6 +265,13 @@ export default defineComponent({
       return this.selectedUserPlaylist.videos.length - this.userPlaylistUniqueVideoIds.size
     },
 
+    exportPlaylistButtonVisible: function() {
+      // Only online playlists can be shared
+      if (!this.isUserPlaylist) { return false }
+
+      return this.videoCount > 0
+    },
+
     deletePlaylistButtonVisible: function() {
       if (!this.isUserPlaylist) { return false }
       // Cannot delete during edit
@@ -275,7 +285,6 @@ export default defineComponent({
       // Only online playlists can be shared
       if (this.isUserPlaylist) { return false }
 
-      // Cannot delete protected playlist
       return !this.hideSharingActions
     },
 
@@ -412,6 +421,41 @@ export default defineComponent({
       showToast(this.playlistDeletionDisabledLabel)
     },
 
+    handlePlaylistExport: async function () {
+      const dateStr = getTodayDateStrLocalTimezone()
+      const title = this.selectedUserPlaylist.playlistName.replaceAll(' ', '_').replaceAll(/["%*/:<>?\\|]/g, '_')
+      const exportFileName = 'freetube-playlist-' + title + '-' + dateStr + '.db'
+
+      const options = {
+        defaultPath: exportFileName,
+        filters: [
+          {
+            name: 'Database File',
+            extensions: ['db']
+          }
+        ]
+      }
+
+      const data = JSON.stringify(this.selectedUserPlaylist) + '\n'
+
+      // See data-settings.js `promptAndWriteToFile`
+      const response = await showSaveDialog(options)
+      if (response.canceled || response.filePath === '') {
+        // User canceled the save dialog
+        return
+      }
+
+      try {
+        await writeFileFromDialog(response, data)
+      } catch (writeErr) {
+        const message = this.$t('Settings.Data Settings.Unable to write file')
+        showToast(`${message}: ${writeErr}`)
+        return
+      }
+
+      showToast(this.$t('User Playlists.The playlist has been successfully exported'))
+    },
+
     exitEditMode: function () {
       this.editMode = false
 

src/renderer/components/playlist-info/playlist-info.vue

@@ -169,6 +169,13 @@
             theme="secondary"
             @click="toggleCopyVideosPrompt"
           />
+          <ft-icon-button
+            v-if="exportPlaylistButtonVisible"
+            :title="$t('User Playlists.Export Playlist')"
+            :icon="['fas', 'file-arrow-down']"
+            theme="secondary"
+            @click="handlePlaylistExport"
+          />
           <ft-icon-button
             v-if="!editMode && userPlaylistDuplicateItemCount > 0"
             :title="$t('User Playlists.Remove Duplicate Videos')"

static/locales/en-US.yaml

@@ -189,6 +189,8 @@ User Playlists:
   Remove Watched Videos: Remove Watched Videos
   Enable Quick Bookmark With This Playlist: Enable Quick Bookmark With This Playlist
   Quick Bookmark Enabled: Quick Bookmark Enabled
+  Export Playlist: Export This Playlist
+  The playlist has been successfully exported: The playlist has been successfully exported
   Are you sure you want to remove {playlistItemCount} duplicate videos from this playlist? This cannot be undone: Are you sure you want to remove 1 duplicate video from this playlist? This cannot be undone. | Are you sure you want to remove {playlistItemCount} duplicate videos from this playlist? This cannot be undone.
   Are you sure you want to remove {playlistItemCount} watched videos from this playlist? This cannot be undone: Are you sure you want to remove 1 watched video from this playlist? This cannot be undone. | Are you sure you want to remove {playlistItemCount} watched videos from this playlist? This cannot be undone.
   Delete Playlist: Delete Playlist