From 0429121b8d3bc3a8aa241f54aa5c4d1064f47fc7 Mon Sep 17 00:00:00 2001 From: Jie Li Date: Tue, 12 Nov 2024 15:46:25 +0000 Subject: [PATCH 1/8] added shuffle and play all buttons to playlists --- .../components/playlist-info/playlist-info.js | 24 ++++++++ .../playlist-info/playlist-info.scss | 3 +- .../playlist-info/playlist-info.vue | 57 +++++++++++++------ .../watch-video-playlist.js | 11 +++- src/renderer/views/Playlist/Playlist.vue | 2 +- src/renderer/views/Watch/Watch.js | 2 + src/renderer/views/Watch/Watch.vue | 1 + static/locales/en-US.yaml | 3 +- 8 files changed, 81 insertions(+), 22 deletions(-) diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index 03a3ec34ab6be..ad3c9fcbfdcb3 100644 --- a/src/renderer/components/playlist-info/playlist-info.js +++ b/src/renderer/components/playlist-info/playlist-info.js @@ -123,6 +123,21 @@ export default defineComponent({ } }, computed: { + watchRandomVideo() { + const randomVideo = this.videos[Math.floor(Math.random() * this.videos.length)] + return { + path: `/watch/${randomVideo.videoId}`, + query: this.watchPageLinkQuery(randomVideo.playlistItemId, true), + } + }, + watchFirstVideo() { + const firstVideo = this.videos[0] + return { + path: `/watch/${firstVideo.videoId}`, + query: this.watchPageLinkQuery(firstVideo.playlistItemId), + } + }, + hideSharingActions: function () { return this.$store.getters.getHideSharingActions }, @@ -352,6 +367,15 @@ export default defineComponent({ document.removeEventListener('keydown', this.keyboardShortcutHandler) }, methods: { + watchPageLinkQuery(playlistItemId, shuffle = false) { + return { + playlistId: this.id, + playlistType: this.videoPlaylistType, + playlistItemId: playlistItemId, + playlistEnableShuffle: shuffle, + } + }, + handlePlaylistNameInput(input) { if (input.trim() === '') { // Need to show message for blank input diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss index cdec36bd25c9c..fceac09615bd6 100644 --- a/src/renderer/components/playlist-info/playlist-info.scss +++ b/src/renderer/components/playlist-info/playlist-info.scss @@ -73,6 +73,7 @@ grid-auto-flow: column; column-gap: 8px; justify-content: flex-end; + margin-block: 5px; } .searchInputsRow { @@ -111,7 +112,7 @@ margin-block-start: 8px; } - .playlistOptionsAndSearch { + .playlistOptionsWrapper { display: flex; flex-direction: column; justify-content: space-between; diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index 3b594f1606ee8..cac6839273207 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -129,7 +129,7 @@ -
+
-
- -
+ +
+ + + + + + + + +
+ +
+
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js index bfe449b6eb0ec..54e7260041c30 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js @@ -40,12 +40,16 @@ export default defineComponent({ type: Boolean, required: true, }, + playlistEnableShuffle: { + type: Boolean, + default: false, + } }, emits: ['pause-player'], data: function () { return { isLoading: true, - shuffleEnabled: false, + shuffleEnabled: this.playlistEnableShuffle, loopEnabled: false, reversePlaylist: false, pauseOnCurrentVideo: false, @@ -213,6 +217,10 @@ export default defineComponent({ this.getPlaylistInfoWithDelay() } + if (this.shuffleEnabled) { + this.shufflePlaylistItems() + } + if ('mediaSession' in navigator) { navigator.mediaSession.setActionHandler('previoustrack', this.playPreviousVideo) navigator.mediaSession.setActionHandler('nexttrack', this.playNextVideo) @@ -529,7 +537,6 @@ export default defineComponent({ items.push(remainingItems[randomInt]) remainingItems.splice(randomInt, 1) } - this.randomizedPlaylistItems = items }, diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index c7e6efb8b30af..77041390b5111 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -26,7 +26,7 @@ :last-updated="lastUpdated" :description="playlistDescription" :video-count="videoCount" - :videos="playlistItems" + :videos="sortedPlaylistItems" :view-count="viewCount" :info-source="infoSource" :more-video-data-available="moreVideoDataAvailable" diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index 1cdbbae3b01aa..f25f879708f86 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -111,6 +111,7 @@ export default defineComponent({ playlistId: '', playlistType: '', playlistItemId: null, + playlistEnableShuffle: false, /** @type {number|null} */ timestamp: null, playNextTimeout: null, @@ -1107,6 +1108,7 @@ export default defineComponent({ this.playlistId = this.$route.query.playlistId this.playlistItemId = this.$route.query.playlistItemId + this.playlistEnableShuffle = this.$route.query.playlistEnableShuffle === 'true' if (this.playlistId == null || this.playlistId.length === 0) { this.playlistType = '' diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue index d433e861dcd73..346f51bdc25d9 100644 --- a/src/renderer/views/Watch/Watch.vue +++ b/src/renderer/views/Watch/Watch.vue @@ -195,6 +195,7 @@ :playlist-type="playlistType" :video-id="videoId" :playlist-item-id="playlistItemId" + :playlist-enable-shuffle="playlistEnableShuffle" class="watchVideoSideBar watchVideoPlaylist" :class="{ theatrePlaylist: useTheatreMode }" @pause-player="pausePlayer" diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 636a43eece59e..59f89891be0c3 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -891,7 +891,8 @@ Playlist: #& About Playlist: Playlist View Full Playlist: View Full Playlist - Last Updated On: Last Updated On + Play all: Play all + Shuffle: Shuffle Sort By: Sort By: Sort By DateAddedNewest: Latest added first From f1875d5f73a3f9232bea2bd4071b7ee17c493e22 Mon Sep 17 00:00:00 2001 From: Jie Li Date: Tue, 12 Nov 2024 15:51:11 +0000 Subject: [PATCH 2/8] revert deletion of last updated on --- static/locales/en-US.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 59f89891be0c3..c6756c6c87ca3 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -891,6 +891,7 @@ Playlist: #& About Playlist: Playlist View Full Playlist: View Full Playlist + Last Updated On: Last Updated On Play all: Play all Shuffle: Shuffle Sort By: From c5d2d3359a81cb4172e9532058859d71c3597253 Mon Sep 17 00:00:00 2001 From: Jie Li Date: Tue, 12 Nov 2024 16:14:47 +0000 Subject: [PATCH 3/8] aligned buttons to the right for yt playlist --- src/renderer/components/playlist-info/playlist-info.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index cac6839273207..65f59cdbe7b0f 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -235,7 +235,7 @@
- +
@@ -254,7 +254,7 @@ :icon="['fas', 'random']" /> - +
Date: Fri, 15 Nov 2024 11:48:52 +0000 Subject: [PATCH 4/8] fixed empty playlist error --- src/renderer/components/playlist-info/playlist-info.js | 8 ++++++++ src/renderer/components/playlist-info/playlist-info.vue | 5 ++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index ad3c9fcbfdcb3..99bbc39a18d4f 100644 --- a/src/renderer/components/playlist-info/playlist-info.js +++ b/src/renderer/components/playlist-info/playlist-info.js @@ -124,6 +124,10 @@ export default defineComponent({ }, computed: { watchRandomVideo() { + if (!this.firstVideoIdExists) { + return '' + } + const randomVideo = this.videos[Math.floor(Math.random() * this.videos.length)] return { path: `/watch/${randomVideo.videoId}`, @@ -131,6 +135,10 @@ export default defineComponent({ } }, watchFirstVideo() { + if (!this.firstVideoIdExists) { + return '' + } + const firstVideo = this.videos[0] return { path: `/watch/${firstVideo.videoId}`, diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index 65f59cdbe7b0f..8d2b65419cc94 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -235,7 +235,10 @@
-
+
From 98fc5992fbc2abe7996f6a13a771a29114301db7 Mon Sep 17 00:00:00 2001 From: Jie Li Date: Thu, 21 Nov 2024 16:49:46 +0000 Subject: [PATCH 5/8] removed buttons in edit mode --- src/renderer/components/playlist-info/playlist-info.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index 8d2b65419cc94..3330e73e14762 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -236,7 +236,7 @@
Date: Mon, 25 Nov 2024 17:55:36 +0000 Subject: [PATCH 6/8] moved buttons location in grid mode --- .../playlist-info/playlist-info.scss | 11 +- .../playlist-info/playlist-info.vue | 232 +++++++++--------- 2 files changed, 124 insertions(+), 119 deletions(-) diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss index fceac09615bd6..e4d3326394774 100644 --- a/src/renderer/components/playlist-info/playlist-info.scss +++ b/src/renderer/components/playlist-info/playlist-info.scss @@ -112,11 +112,16 @@ margin-block-start: 8px; } - .playlistOptionsWrapper { + .playlistOptionsAndSearch { display: flex; - flex-direction: column; - justify-content: space-between; + flex-flow: row wrap; + justify-content: center; align-items: center; + gap: 10px; + } + + .searchWrapper { + flex-basis: 100%; } .channelShareWrapper, diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index 3330e73e14762..0ae4997237d21 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -100,6 +100,7 @@
- -
-
- - - - - - - - - - -
-
- - -
-
+
+
+ + + + + + + + + + +
- +
+ +
+ + +
From c9e0164b2e517208286788657fb8f7c5428b25e1 Mon Sep 17 00:00:00 2001 From: Jie Li Date: Mon, 25 Nov 2024 18:06:29 +0000 Subject: [PATCH 7/8] add blank line --- .../components/watch-video-playlist/watch-video-playlist.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js index 54e7260041c30..184d65873ed12 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js @@ -43,7 +43,8 @@ export default defineComponent({ playlistEnableShuffle: { type: Boolean, default: false, - } + }, + getPlaylists }, emits: ['pause-player'], data: function () { @@ -537,6 +538,7 @@ export default defineComponent({ items.push(remainingItems[randomInt]) remainingItems.splice(randomInt, 1) } + this.randomizedPlaylistItems = items }, From 81b37b552aed9cc6bfc472bc328784d0d435c980 Mon Sep 17 00:00:00 2001 From: Jie Li Date: Mon, 25 Nov 2024 22:55:08 +0000 Subject: [PATCH 8/8] removed getplaylists --- .../components/watch-video-playlist/watch-video-playlist.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js index 184d65873ed12..089bd54911181 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js @@ -44,7 +44,6 @@ export default defineComponent({ type: Boolean, default: false, }, - getPlaylists }, emits: ['pause-player'], data: function () {