From db4b49f3a61d1663ea2f7048fa729b171fed3893 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Thu, 11 Apr 2024 21:30:43 -0500 Subject: [PATCH 01/16] Implement user playlist grid view --- src/renderer/App.js | 4 + src/renderer/App.vue | 3 +- .../general-settings/general-settings.js | 4 + .../general-settings/general-settings.vue | 7 + .../components/playlist-info/playlist-info.js | 4 + .../playlist-info/playlist-info.scss | 38 ++++ .../playlist-info/playlist-info.vue | 186 +++++++++--------- src/renderer/scss-partials/_ft-list-item.scss | 29 +++ src/renderer/store/modules/settings.js | 1 + src/renderer/views/Playlist/Playlist.js | 10 +- src/renderer/views/Playlist/Playlist.scss | 104 +++++++--- src/renderer/views/Playlist/Playlist.vue | 22 ++- static/locales/en-US.yaml | 1 + 13 files changed, 287 insertions(+), 126 deletions(-) diff --git a/src/renderer/App.js b/src/renderer/App.js index cec35685d24e3..96e52209ab70c 100644 --- a/src/renderer/App.js +++ b/src/renderer/App.js @@ -102,6 +102,10 @@ export default defineComponent({ return this.$store.getters.getBaseTheme }, + isSideNavOpen: function () { + return this.$store.getters.getIsSideNavOpen + }, + mainColor: function () { return this.$store.getters.getMainColor }, diff --git a/src/renderer/App.vue b/src/renderer/App.vue index cb563b887b91f..23f4061c1bf23 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -4,7 +4,8 @@ id="app" :class="{ hideOutlines: outlinesHidden, - isLocaleRightToLeft: isLocaleRightToLeft + isLocaleRightToLeft: isLocaleRightToLeft, + isSideNavOpen: isSideNavOpen }" > diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js index a2b7d3e7b29dc..21335b731c6b1 100644 --- a/src/renderer/components/general-settings/general-settings.js +++ b/src/renderer/components/general-settings/general-settings.js @@ -115,6 +115,9 @@ export default defineComponent({ listType: function () { return this.$store.getters.getListType }, + userPlaylistListType: function () { + return this.$store.getters.getUserPlaylistListType + }, thumbnailPreference: function () { return this.blurThumbnails ? 'blur' : this.$store.getters.getThumbnailPreference }, @@ -253,6 +256,7 @@ export default defineComponent({ 'updateLandingPage', 'updateRegion', 'updateListType', + 'updateUserPlaylistListType', 'updateThumbnailPreference', 'updateForceLocalBackendForLegacy', 'updateCurrentLocale', diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue index 0aad1a08b929f..a8af55050e579 100644 --- a/src/renderer/components/general-settings/general-settings.vue +++ b/src/renderer/components/general-settings/general-settings.vue @@ -56,6 +56,13 @@ :select-values="viewTypeValues" @change="updateListType" /> + -
+
@@ -34,6 +37,7 @@ -
+
-
- - - +
+
+ + - - - - - - - -
+ + + + + + + +
+
+ +
+
- -
- - -
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss index 22be37765c625..4efb6f07f56cf 100644 --- a/src/renderer/scss-partials/_ft-list-item.scss +++ b/src/renderer/scss-partials/_ft-list-item.scss @@ -1,6 +1,35 @@ $thumbnail-overlay-opacity: 0.85; $watched-transition-duration: 0.5s; +@mixin is-side-nav-open { + @at-root { + .sideNavOpen#{&} { + @content; + } + } +} + +@mixin fixed-top-bar { + position: fixed; + inset-block-start: 60px; + inset-inline-end: 0; + inline-size: calc(100% - 80px); + margin-inline: 0; + padding-inline: 10px; + + + @include is-side-nav-open { + inline-size: calc(100% - 200px); + } + + @media only screen and (max-width: 680px) { + inline-size: 100%; + @include is-side-nav-open { + inline-size: 100%; + } + } +} + @mixin is-result { @at-root { .result#{&} { diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js index 1f2fc9ee74ba2..ae7761579bf8b 100644 --- a/src/renderer/store/modules/settings.js +++ b/src/renderer/store/modules/settings.js @@ -231,6 +231,7 @@ const state = { showDistractionFreeTitles: false, landingPage: 'subscriptions', listType: 'grid', + userPlaylistListType: 'grid', maxVideoPlaybackRate: 3, onlyShowLatestFromChannel: false, playNextVideo: false, diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 73183f381b408..d52f8e4be3504 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/src/renderer/views/Playlist/Playlist.js @@ -7,6 +7,7 @@ import PlaylistInfo from '../../components/playlist-info/playlist-info.vue' import FtListVideoNumbered from '../../components/ft-list-video-numbered/ft-list-video-numbered.vue' import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue' import FtButton from '../../components/ft-button/ft-button.vue' +import FtElementList from '../../components/ft-element-list/ft-element-list.vue' import { getLocalPlaylist, getLocalPlaylistContinuation, @@ -23,7 +24,8 @@ export default defineComponent({ 'playlist-info': PlaylistInfo, 'ft-list-video-numbered': FtListVideoNumbered, 'ft-flex-box': FtFlexBox, - 'ft-button': FtButton + 'ft-button': FtButton, + 'ft-element-list': FtElementList }, beforeRouteLeave(to, from, next) { if (!this.isLoading && !this.isUserPlaylistRequested && to.path.startsWith('/watch') && to.query.playlistId === this.playlistId) { @@ -82,6 +84,12 @@ export default defineComponent({ playlistId: function() { return this.$route.params.id }, + userPlaylistListType: function () { + return this.$store.getters.getUserPlaylistListType + }, + listType: function () { + return this.isUserPlaylistRequested ? this.userPlaylistListType : 'list' + }, userPlaylistsReady: function () { return this.$store.getters.getPlaylistsReady }, diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss index 939f3a5cc4a5c..2c2a50c9ea0f3 100644 --- a/src/renderer/views/Playlist/Playlist.scss +++ b/src/renderer/views/Playlist/Playlist.scss @@ -1,35 +1,77 @@ -.routerView { +@use '../../scss-partials/ft-list-item'; + +.playlistItemsCard { display: flex; + flex-direction: column; + grid-gap: 10px; + margin: 0; + padding: 10px; } -.playlistInfo { - background-color: var(--card-bg-color); +.playlistInfoContainer { box-sizing: border-box; - block-size: calc(100vh - 132px); - margin-inline-end: 1em; padding: 10px; - position: sticky; - inset-block-start: 96px; /* This is needed to make prompt always above video entries */ /* Value being too high would block search suggestions */ z-index: 1; - inline-size: 30%; - &.promptOpen { // Otherwise sidebar would be above the prompt z-index: 200; } } -.playlistItems { +.playlistInfo { + background-color: var(--card-bg-color); +} + +.routerView { display: flex; - flex-direction: column; - grid-gap: 10px; - margin: 0; - padding: 10px; - inline-size: 60%; + + &.grid { + flex-direction: column; + margin-block-start: 200px; + + .playlistItemsCard { + inline-size: 85%; + margin-block: 0px 60px; + margin-inline: auto; + } + + .playlistInfoContainer { + @include ft-list-item.fixed-top-bar; + padding-block: 0; + } + + .playlistInfo { + inline-size: 85%; + margin-inline: auto; + padding-block: 10px; + padding-inline: 16px; + box-shadow: 0 2px 1px 0 var(--primary-shadow-color); + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + } + } + + &.list { + .playlistItemsCard { + inline-size: 60%; + } + + .playlistInfoContainer { + block-size: calc(100vh - 132px); + inline-size: 30%; + inset-block-start: 96px; + margin-inline-end: 1em; + position: sticky; + inline-size: 60%; + } + } } + .playlistItem { display: grid; grid-template-columns: 30px 1fr; @@ -74,18 +116,20 @@ @media only screen and (max-width: 850px) { .routerView { flex-direction: column; - } - .playlistInfo { - box-sizing: border-box; - position: relative; - inset-block-start: 0; - z-index: 1; - block-size: auto; - inline-size: 100%; + &.list { + .playlistInfo { + box-sizing: border-box; + position: relative; + inset-block-start: 0; + z-index: 1; + block-size: auto; + inline-size: 100%; + } + } } - .playlistItems { + .playlistItemsCard { box-sizing: border-box; inline-size: 100%; } @@ -94,3 +138,15 @@ .message { color: var(--tertiary-text-color); } + +@media only screen and (max-width: 680px) { + .routerView.grid { + margin-block-start: 218px; + .playlistInfoContainer { + position: absolute; + } + .playlistInfo { + inline-size: 90%; + } + } +} diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index f4e3c183ba67c..7fb353e29cc48 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -1,11 +1,15 @@