* Update add videos to playlists prompt to add search playlists with …

…matching videos function
FreeTubeApp · Jan 9, 2024 · f370a07 · f370a07
1 parent 61ef5b8
commit f370a07
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -16,6 +16,21 @@
   flex-direction: column;
 }
 
+.searchInputsRow {
+  display: grid;
+
+  /* 2 columns */
+  grid-template-columns: 1fr auto;
+  column-gap: 16px;
+}
+@media only screen and (max-width: 800px) {
+  .searchInputsRow {
+    /* Switch to 2 rows from 2 columns */
+    grid-template-columns: auto;
+    grid-template-rows: auto auto;
+  }
+}
+
 .sortSelect {
   /* Put it on the right */
   margin-inline-start: auto;

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -7,6 +7,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtPlaylistSelector from '../ft-playlist-selector/ft-playlist-selector.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtSelect from '../../components/ft-select/ft-select.vue'
+import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import {
   showToast,
 } from '../../helpers/utils'
@@ -31,12 +32,14 @@ export default defineComponent({
     'ft-playlist-selector': FtPlaylistSelector,
     'ft-input': FtInput,
     'ft-select': FtSelect,
+    'ft-toggle-switch': FtToggleSwitch,
   },
   data: function () {
     return {
       selectedPlaylistIdList: [],
       createdSincePromptShownPlaylistIdList: [],
       query: '',
+      doSearchPlaylistsWithMatchingVideos: false,
       updateQueryDebounce: function() {},
       lastShownAt: Date.now(),
       lastActiveElement: null,
@@ -115,6 +118,12 @@ export default defineComponent({
       return this.allPlaylists.filter((playlist) => {
         if (typeof (playlist.playlistName) !== 'string') { return false }
 
+        if (this.doSearchPlaylistsWithMatchingVideos) {
+          if (playlist.videos.some((v) => v.title.toLowerCase().includes(this.processedQuery))) {
+            return true
+          }
+        }
+
         return playlist.playlistName.toLowerCase().includes(this.processedQuery)
       })
     },

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -12,14 +12,24 @@
         playlistCount: selectedPlaylistCount,
       }) }}
     </p>
-    <ft-input
-      ref="searchBar"
-      :placeholder="$t('User Playlists.AddVideoPrompt.Search in Playlists')"
-      :show-clear-text-button="true"
-      :show-action-button="false"
-      @input="(input) => updateQueryDebounce(input)"
-      @clear="updateQueryDebounce('')"
-    />
+    <div
+      class="searchInputsRow"
+    >
+      <ft-input
+        ref="searchBar"
+        :placeholder="$t('User Playlists.AddVideoPrompt.Search in Playlists')"
+        :show-clear-text-button="true"
+        :show-action-button="false"
+        @input="(input) => updateQueryDebounce(input)"
+        @clear="updateQueryDebounce('')"
+      />
+      <ft-toggle-switch
+        :label="$t('User Playlists.Search in Videos')"
+        :compact="true"
+        :default-value="doSearchPlaylistsWithMatchingVideos"
+        @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
+      />
+    </div>
     <ft-select
       v-if="allPlaylists.length > 1"
       class="sortSelect"