Skip to content

Add search playlists with matching videos function #4537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FreeTubeBot merged 8 commits into from
Mar 14, 2024
Merged

Add search playlists with matching videos function #4537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ebcb584
* Update user playlists page to add search playlists with matching vi…
PikachuEXE Jan 9, 2024
d920641
* Update add videos to playlists prompt to add search playlists with …
PikachuEXE Jan 9, 2024
022d3f8
* Update UI & label text
PikachuEXE Jan 30, 2024
24c16d6
* Click on playlist link with search matching video enabled now also …
PikachuEXE Mar 8, 2024
68d0474
* Only auto enable search video mode for playlists with video(s)
PikachuEXE Mar 9, 2024
e1fa5f5
* Make new toggle vertically align center
PikachuEXE Mar 9, 2024
834adc8
* Make new toggle vertically align center
PikachuEXE Mar 13, 2024
81c8234
Merge branch 'development' into feature/playlist-search-playlists-wit…
PikachuEXE Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/renderer/components/ft-element-list/ft-element-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ export default defineComponent({
hideForbiddenTitles: {
type: Boolean,
default: true
}
},
searchQueryText: {
type: String,
required: false,
default: '',
},
},
computed: {
listType: function () {
Expand Down
1 change: 1 addition & 0 deletions src/renderer/components/ft-element-list/ft-element-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
:show-video-with-last-viewed-playlist="showVideoWithLastViewedPlaylist"
:use-channels-hidden-preference="useChannelsHiddenPreference"
:hide-forbidden-titles="hideForbiddenTitles"
:search-query-text="searchQueryText"
/>
</ft-auto-grid>
</template>
Expand Down
5 changes: 5 additions & 0 deletions src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@ export default defineComponent({
type: Boolean,
default: true
},
searchQueryText: {
type: String,
required: false,
default: '',
},
},
data: function () {
return {
Expand Down
1 change: 1 addition & 0 deletions src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
v-else-if="finalDataType === 'playlist'"
:appearance="appearance"
:data="data"
:search-query-text="searchQueryText"
/>
<ft-community-post
v-else-if="finalDataType === 'community'"
Expand Down
8 changes: 7 additions & 1 deletion src/renderer/components/ft-list-playlist/ft-list-playlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ export default defineComponent({
appearance: {
type: String,
required: true
}
},
searchQueryText: {
type: String,
required: false,
default: '',
},
},
data: function () {
return {
Expand Down Expand Up @@ -79,6 +84,7 @@ export default defineComponent({
path: `/playlist/${this.playlistId}`,
query: {
playlistType: this.isUserPlaylist ? 'user' : '',
searchQueryText: this.searchQueryText,
},
}
},
Expand Down
30 changes: 30 additions & 0 deletions src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,36 @@
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;
}
}

.optionsRow {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
align-items: center;
}
@media only screen and (max-width: 800px) {
.optionsRow {
/* Switch to 2 rows from 2 columns */
grid-template-columns: auto;
grid-template-rows: auto auto;
align-items: stretch;
}
}

.sortSelect {
/* Put it on the right */
margin-inline-start: auto;
Expand Down
9 changes: 9 additions & 0 deletions src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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,
Expand Down Expand Up @@ -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)
})
},
Expand Down
48 changes: 31 additions & 17 deletions src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,37 @@
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('')"
/>
<ft-select
v-if="allPlaylists.length > 1"
class="sortSelect"
:value="sortBy"
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('User Playlists.Sort By.Sort By')"
@change="sortBy = $event"
/>
<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('')"
/>
</div>
<div
class="optionsRow"
>
<ft-toggle-switch
:label="$t('User Playlists.Playlists with Matching Videos')"
:compact="true"
:default-value="doSearchPlaylistsWithMatchingVideos"
@change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
/>
<ft-select
v-if="allPlaylists.length > 1"
class="sortSelect"
:value="sortBy"
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('User Playlists.Sort By.Sort By')"
@change="sortBy = $event"
/>
</div>
<div class="playlists-container">
<ft-flex-box>
<div
Expand Down
18 changes: 18 additions & 0 deletions src/renderer/components/playlist-info/playlist-info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,18 @@ export default defineComponent({
type: Boolean,
required: true,
},
searchVideoModeAllowed: {
type: Boolean,
required: true,
},
searchVideoModeEnabled: {
type: Boolean,
required: true,
},
searchQueryText: {
type: String,
required: true,
},
},
data: function () {
return {
Expand Down Expand Up @@ -239,6 +251,12 @@ export default defineComponent({
this.newTitle = this.title
this.newDescription = this.description

if (this.videoCount > 0) {
// Only enable search video mode when viewing non empty playlists
this.searchVideoMode = this.searchVideoModeEnabled
this.query = this.searchQueryText
}

this.updateQueryDebounce = debounce(this.updateQuery, 500)
},
methods: {
Expand Down
6 changes: 3 additions & 3 deletions src/renderer/components/playlist-info/playlist-info.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@

<div class="playlistOptions">
<ft-icon-button
v-if="isUserPlaylist && videoCount > 0 && !editMode"
v-if="searchVideoModeAllowed && videoCount > 0 && !editMode"
ref="enableSearchModeButton"
:title="$t('User Playlists.SinglePlaylistView.Search for Videos')"
:icon="['fas', 'search']"
Expand Down Expand Up @@ -198,7 +198,7 @@
</div>

<div
v-if="isUserPlaylist && searchVideoMode"
v-if="searchVideoModeAllowed && searchVideoMode"
class="searchInputsRow"
>
<ft-input
Expand All @@ -207,11 +207,11 @@
:placeholder="$t('User Playlists.SinglePlaylistView.Search for Videos')"
:show-clear-text-button="true"
:show-action-button="false"
:value="query"
@input="(input) => updateQueryDebounce(input)"
@clear="updateQueryDebounce('')"
/>
<ft-icon-button
v-if="isUserPlaylist && searchVideoMode"
:title="$t('User Playlists.Cancel')"
:icon="['fas', 'times']"
theme="secondary"
Expand Down
16 changes: 16 additions & 0 deletions src/renderer/views/Playlist/Playlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,17 @@ export default defineComponent({
}
},

searchVideoModeAllowed() {
return this.isUserPlaylistRequested
},
searchQueryTextRequested() {
return this.$route.query.searchQueryText
},
searchQueryTextPresent() {
const searchQueryText = this.searchQueryTextRequested
return typeof searchQueryText === 'string' && searchQueryText !== ''
},

isUserPlaylistRequested: function () {
return this.$route.query.playlistType === 'user'
},
Expand Down Expand Up @@ -181,6 +192,11 @@ export default defineComponent({
},
created: function () {
this.getPlaylistInfoDebounce = debounce(this.getPlaylistInfo, 100)

if (this.searchVideoModeAllowed && this.searchQueryTextPresent) {
this.playlistInVideoSearchMode = true
this.videoSearchQuery = this.searchQueryTextRequested
}
},
mounted: function () {
this.getPlaylistInfoDebounce()
Expand Down
3 changes: 3 additions & 0 deletions src/renderer/views/Playlist/Playlist.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
:view-count="viewCount"
:info-source="infoSource"
:more-video-data-available="moreVideoDataAvailable"
:search-video-mode-allowed="searchVideoModeAllowed"
:search-video-mode-enabled="playlistInVideoSearchMode"
:search-query-text="searchQueryTextRequested"
class="playlistInfo"
:class="{
promptOpen,
Expand Down
30 changes: 30 additions & 0 deletions src/renderer/views/UserPlaylists/UserPlaylists.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,36 @@
vertical-align: middle;
}

.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;
}
}

.optionsRow {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
align-items: center;
}
@media only screen and (max-width: 800px) {
.optionsRow {
/* Switch to 2 rows from 2 columns */
grid-template-columns: auto;
grid-template-rows: auto auto;
align-items: stretch;
}
}

.sortSelect {
/* Put it on the right */
margin-inline-start: auto;
Expand Down
30 changes: 22 additions & 8 deletions src/renderer/views/UserPlaylists/UserPlaylists.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 {
Expand All @@ -45,6 +47,7 @@ export default defineComponent({
searchDataLimit: 100,
showLoadMoreButton: false,
query: '',
doSearchPlaylistsWithMatchingVideos: false,
activeData: [],
sortBy: SORT_BY_VALUES.LatestPlayedFirst,
}
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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 () {
Expand Down
Loading