Merge branch 'feature/quick-bookmark/improve-ux' into custom-builds/c…

…urrent

* feature/quick-bookmark/improve-ux:
  * Allow unsetting quick bookmark target and prompt to set it later when user attempt to quick bookmark
  * Do not auto set a quick bookmark target

src/renderer/components/ft-list-playlist/ft-list-playlist.js

@@ -124,10 +124,6 @@ export default defineComponent({
       })
     },
 
-    handleQuickBookmarkEnabledDisabledClick: function () {
-      showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is already being used for quick bookmark."]'))
-    },
-
     parseInvidiousData: function () {
       this.title = this.data.title
       if (this.thumbnailCanBeShown) {
@@ -194,6 +190,10 @@ export default defineComponent({
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast.This playlist is now used for quick bookmark'))
       }
     },
+    disableQuickBookmark() {
+      this.updateQuickBookmarkTargetPlaylistId(null)
+      showToast(this.$t('User Playlists.SinglePlaylistView.Toast.Quick bookmark disabled'))
+    },
 
     ...mapActions([
       'openInExternalPlayer',

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -74,11 +74,9 @@
         <ft-icon-button
           :title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
           :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
-          :disabled="markedAsQuickBookmarkTarget"
           :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
           :size="16"
-          @disabled-click="handleQuickBookmarkEnabledDisabledClick"
-          @click="enableQuickBookmarkForThisPlaylist"
+          @click="() => markedAsQuickBookmarkTarget ? disableQuickBookmark() : enableQuickBookmarkForThisPlaylist()"
         />
       </span>
     </div>

src/renderer/components/ft-list-video/ft-list-video.js

@@ -7,6 +7,7 @@ import {
   formatNumber,
   getRelativeTimeFromDate,
   openExternalLink,
+  openInternalPath,
   showToast,
   toDistractionFreeTitle,
   deepCopy
@@ -460,7 +461,7 @@ export default defineComponent({
       })
     },
     quickBookmarkIconText: function () {
-      if (!this.isQuickBookmarkEnabled) { return false }
+      if (!this.isQuickBookmarkEnabled) { return this.$t('User Playlists.Add to Playlist') }
 
       const translationProperties = {
         playlistName: this.quickBookmarkPlaylist.playlistName,
@@ -766,7 +767,13 @@ export default defineComponent({
 
     toggleQuickBookmarked() {
       if (!this.isQuickBookmarkEnabled) {
-        // This should be prevented by UI
+        showToast(
+          this.$t('Video["Quick Bookmark Disabled. Click Here To Open User Playlists Page To Enable Quick Bookmark"]'),
+          5000,
+          () => {
+            this.createNewWindowInUserPlaylistsView()
+          },
+        )
         return
       }
 
@@ -776,6 +783,13 @@ export default defineComponent({
         this.addToQuickBookmarkPlaylist()
       }
     },
+    createNewWindowInUserPlaylistsView: function () {
+      openInternalPath({
+        path: '/userPlaylists',
+        query: {},
+        doCreateNewWindow: true,
+      })
+    },
     addToQuickBookmarkPlaylist() {
       const videoData = {
         videoId: this.id,

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -56,7 +56,7 @@
           @click="togglePlaylistPrompt"
         />
         <ft-icon-button
-          v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
+          v-if="quickBookmarkButtonEnabled"
           :title="quickBookmarkIconText"
           :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
           class="quickBookmarkVideoIcon"

src/renderer/components/watch-video-info/watch-video-info.js

@@ -4,7 +4,12 @@ import FtCard from '../ft-card/ft-card.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtShareButton from '../ft-share-button/ft-share-button.vue'
 import FtSubscribeButton from '../ft-subscribe-button/ft-subscribe-button.vue'
-import { formatNumber, openExternalLink, showToast } from '../../helpers/utils'
+import {
+  formatNumber,
+  openExternalLink,
+  openInternalPath,
+  showToast,
+} from '../../helpers/utils'
 
 export default defineComponent({
   name: 'WatchVideoInfo',
@@ -241,7 +246,7 @@ export default defineComponent({
       })
     },
     quickBookmarkIconText: function () {
-      if (!this.isQuickBookmarkEnabled) { return false }
+      if (!this.isQuickBookmarkEnabled) { return this.$t('User Playlists.Add to Playlist') }
 
       const translationProperties = {
         playlistName: this.quickBookmarkPlaylist.playlistName,
@@ -351,7 +356,13 @@ export default defineComponent({
 
     toggleQuickBookmarked() {
       if (!this.isQuickBookmarkEnabled) {
-        // This should be prevented by UI
+        showToast(
+          this.$t('Video["Quick Bookmark Disabled. Click Here To Open User Playlists Page To Enable Quick Bookmark"]'),
+          5000,
+          () => {
+            this.createNewWindowInUserPlaylistsView()
+          },
+        )
         return
       }
 
@@ -361,6 +372,13 @@ export default defineComponent({
         this.addToQuickBookmarkPlaylist()
       }
     },
+    createNewWindowInUserPlaylistsView: function () {
+      openInternalPath({
+        path: '/userPlaylists',
+        query: {},
+        doCreateNewWindow: true,
+      })
+    },
     addToQuickBookmarkPlaylist() {
       const videoData = {
         videoId: this.id,

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -88,7 +88,6 @@
           @click="togglePlaylistPrompt"
         />
         <ft-icon-button
-          v-if="isQuickBookmarkEnabled"
           :title="quickBookmarkIconText"
           :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
           class="quickBookmarkVideoIcon"

src/renderer/store/modules/playlists.js

@@ -13,26 +13,6 @@ function generateRandomUniqueId() {
   return crypto.randomUUID ? crypto.randomUUID() : `id-${Date.now()}-${Math.floor(Math.random() * 10000)}`
 }
 
-/*
-*  Function to find the first playlist with 0 videos, or otherwise the most recently accessed.
-*  This is a good default quick bookmark target if one needs to be set.
-*/
-function findEmptyOrLatestPlayedPlaylist(playlists) {
-  const emptyPlaylist = playlists.find((playlist) => playlist.videos.length === 0)
-  if (emptyPlaylist) return emptyPlaylist
-
-  let max = -1
-  let maxIndex = 0
-  for (let i = 0; i < playlists.length; i++) {
-    if (playlists[i].lastPlayedAt != null && playlists[i].lastPlayedAt > max) {
-      maxIndex = i
-      max = playlists[i].lastPlayedAt
-    }
-  }
-
-  return playlists[maxIndex]
-}
-
 const state = {
   // Playlist loading takes time on app load (new windows)
   // This is necessary to let components to know when to start data loading
@@ -109,11 +89,6 @@ const actions = {
     try {
       await DBPlaylistHandlers.create([payload])
 
-      const noQuickBookmarkSet = !rootState.settings.quickBookmarkTargetPlaylistId || !state.playlists.some((playlist) => playlist._id === rootState.settings.quickBookmarkTargetPlaylistId)
-      if (noQuickBookmarkSet) {
-        dispatch('updateQuickBookmarkTargetPlaylistId', payload._id, { root: true })
-      }
-
       commit('addPlaylist', payload)
     } catch (errMessage) {
       console.error(errMessage)
@@ -123,13 +98,6 @@ const actions = {
   async addPlaylists({ state, commit, rootState, dispatch }, payload) {
     try {
       await DBPlaylistHandlers.create(payload)
-
-      const noQuickBookmarkSet = !rootState.settings.quickBookmarkTargetPlaylistId || !state.playlists.some((playlist) => playlist._id === rootState.settings.quickBookmarkTargetPlaylistId)
-      if (noQuickBookmarkSet) {
-        const chosenPlaylist = findEmptyOrLatestPlayedPlaylist(payload)
-        dispatch('updateQuickBookmarkTargetPlaylistId', chosenPlaylist._id, { root: true })
-      }
-
       commit('addPlaylists', payload)
     } catch (errMessage) {
       console.error(errMessage)
@@ -350,13 +318,6 @@ const actions = {
           }
         }
 
-        // if no quick bookmark is set, try to find another playlist
-        const noQuickBookmarkSet = !rootState.settings.quickBookmarkTargetPlaylistId || !payload.some((playlist) => playlist._id === rootState.settings.quickBookmarkTargetPlaylistId)
-        if (noQuickBookmarkSet && payload.length > 0) {
-          const chosenPlaylist = findEmptyOrLatestPlayedPlaylist(payload)
-          dispatch('updateQuickBookmarkTargetPlaylistId', chosenPlaylist._id, { root: true })
-        }
-
         commit('setAllPlaylists', payload)
       }
       commit('setPlaylistsReady', true)

static/locales/en-US.yaml

@@ -774,6 +774,7 @@ Video:
   Save Video: Save Video
   Video has been saved: Video has been saved
   Video has been removed from your saved list: Video has been removed from your saved list
+  "Quick Bookmark Disabled. Click Here To Open User Playlists Page To Enable Quick Bookmark": "Quick Bookmark Disabled. Click Here To Open User Playlists Page To Enable Quick Bookmark"
   Open in YouTube: Open in YouTube
   Copy YouTube Link: Copy YouTube Link
   Open YouTube Embedded Player: Open YouTube Embedded Player