* Update user playlists page to add search playlists with matching videos function

Author: PikachuEXE

src/renderer/views/UserPlaylists/UserPlaylists.css

@@ -16,6 +16,20 @@
   vertical-align: middle;
 }
 
+.searchInputsRow {
+  display: grid;
+
+  /* 2 columns */
+  grid-template-columns: 1fr auto;
+  column-gap: 16px;
+
+  @media only screen and (max-width: 800px) {
+    /* 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;

src/renderer/views/UserPlaylists/UserPlaylists.js

@@ -10,6 +10,7 @@ import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtInput from '../../components/ft-input/ft-input.vue'
 import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
+import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 
 const SORT_BY_VALUES = {
   NameAscending: 'name_ascending',
@@ -37,6 +38,7 @@ export default defineComponent({
     'ft-element-list': FtElementList,
     'ft-icon-button': FtIconButton,
     'ft-input': FtInput,
+    'ft-toggle-switch': FtToggleSwitch,
   },
   data: function () {
     return {
@@ -45,6 +47,7 @@ export default defineComponent({
       searchDataLimit: 100,
       showLoadMoreButton: false,
       query: '',
+      doSearchPlaylistsWithMatchingVideos: false,
       activeData: [],
       sortBy: SORT_BY_VALUES.LatestPlayedFirst,
     }
@@ -165,6 +168,10 @@ export default defineComponent({
       this.searchDataLimit = 100
       this.filterPlaylistAsync()
     },
+    doSearchPlaylistsWithMatchingVideos() {
+      this.searchDataLimit = 100
+      this.filterPlaylistAsync()
+    },
     fullData() {
       this.activeData = this.fullData
       this.filterPlaylist()
@@ -209,15 +216,22 @@ export default defineComponent({
       if (this.lowerCaseQuery === '') {
         this.activeData = this.fullData
         this.showLoadMoreButton = this.allPlaylists.length > this.activeData.length
-      } else {
-        const filteredPlaylists = this.allPlaylists.filter((playlist) => {
-          if (typeof (playlist.playlistName) !== 'string') { return false }
-
-          return playlist.playlistName.toLowerCase().includes(this.lowerCaseQuery)
-        })
-        this.showLoadMoreButton = filteredPlaylists.length > this.searchDataLimit
-        this.activeData = filteredPlaylists.length < this.searchDataLimit ? filteredPlaylists : filteredPlaylists.slice(0, this.searchDataLimit)
+        return
       }
+
+      const filteredPlaylists = this.allPlaylists.filter((playlist) => {
+        if (typeof (playlist.playlistName) !== 'string') { return false }
+
+        if (this.doSearchPlaylistsWithMatchingVideos) {
+          if (playlist.videos.some((v) => v.title.toLowerCase().includes(this.lowerCaseQuery))) {
+            return true
+          }
+        }
+
+        return playlist.playlistName.toLowerCase().includes(this.lowerCaseQuery)
+      })
+      this.showLoadMoreButton = filteredPlaylists.length > this.searchDataLimit
+      this.activeData = filteredPlaylists.length < this.searchDataLimit ? filteredPlaylists : filteredPlaylists.slice(0, this.searchDataLimit)
     },
 
     createNewPlaylist: function () {

src/renderer/views/UserPlaylists/UserPlaylists.vue

@@ -19,15 +19,25 @@
           class="newPlaylistButton"
           @click="createNewPlaylist"
         />
-        <ft-input
+        <div
           v-if="fullData.length > 1"
-          ref="searchBar"
-          :placeholder="$t('User Playlists.Search bar placeholder')"
-          :show-clear-text-button="true"
-          :show-action-button="false"
-          @input="(input) => query = input"
-          @clear="query = ''"
-        />
+          class="searchInputsRow"
+        >
+          <ft-input
+            ref="searchBar"
+            :placeholder="$t('User Playlists.Search bar placeholder')"
+            :show-clear-text-button="true"
+            :show-action-button="false"
+            @input="(input) => query = input"
+            @clear="query = ''"
+          />
+          <ft-toggle-switch
+            :label="$t('User Playlists.Search in Videos')"
+            :compact="true"
+            :default-value="doSearchPlaylistsWithMatchingVideos"
+            @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
+          />
+        </div>
         <ft-select
           v-if="fullData.length > 1"
           class="sortSelect"

static/locales/en-US.yaml

@@ -141,6 +141,7 @@ User Playlists:
   You have no playlists. Click on the create new playlist button to create a new one.: You have no playlists. Click on the create new playlist button to create a new one.
   Empty Search Message: There are no videos in this playlist that matches your search
   Search bar placeholder: Search in Playlist
+  Search in Videos: Search in Videos
 
   This playlist currently has no videos.: This playlist currently has no videos.