From 62fb70d26c4f2c6889ec98ce96ac1afec456d604 Mon Sep 17 00:00:00 2001 From: geoffrey45 Date: Wed, 28 Dec 2022 12:17:58 +0300 Subject: [PATCH] fix play from album page + setup favorites page --- src/assets/icons/logo.svg | 20 -------- src/assets/scss/Global/app-grid.scss | 3 +- src/components/BottomBar.vue | 4 ++ src/components/LeftSidebar/Navigation.vue | 6 +++ src/components/nav/Titles/Folder.vue | 2 +- src/composables/usePlayFrom.ts | 2 +- src/router/routes.ts | 8 ++++ src/stores/pages/album.ts | 11 +++++ src/views/AlbumView/index.vue | 2 +- src/views/Favorites.vue | 58 +++++++++++++++++++++++ 10 files changed, 92 insertions(+), 24 deletions(-) delete mode 100644 src/assets/icons/logo.svg create mode 100644 src/views/Favorites.vue diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg deleted file mode 100644 index f8d66edc..00000000 --- a/src/assets/icons/logo.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss index df1835d2..b3e52468 100644 --- a/src/assets/scss/Global/app-grid.scss +++ b/src/assets/scss/Global/app-grid.scss @@ -62,7 +62,8 @@ $g-border: solid 1px $gray5; .content-page { margin-left: 1.25rem; - margin-right: -$medium; + // margin-right: -$medium; + padding-right: 1.25rem; } // ====== MODIFIERS ======= diff --git a/src/components/BottomBar.vue b/src/components/BottomBar.vue index fd241d47..6f0e6656 100644 --- a/src/components/BottomBar.vue +++ b/src/components/BottomBar.vue @@ -147,6 +147,10 @@ const queue = useQStore(); .info { width: 30rem; + @media (max-width: 833px) { + width: 20rem !important; + } + .with-title { display: grid; grid-template-columns: max-content 1fr max-content; diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue index 75a47d1e..f165f469 100644 --- a/src/components/LeftSidebar/Navigation.vue +++ b/src/components/LeftSidebar/Navigation.vue @@ -33,6 +33,7 @@ import PlaylistSvg from "../../assets/icons/playlist-1.svg"; import QueueSvg from "../../assets/icons/queue.svg"; import SearchSvg from "../../assets/icons/search.svg"; import SettingsSvg from "../../assets/icons/settings.svg"; +import HeartSvg from "../../assets/icons/heart.svg"; const menus = [ { @@ -50,6 +51,11 @@ const menus = [ { separator: true, }, + { + name: "favorites", + route_name: Routes.favorites, + icon: HeartSvg, + }, { name: "queue", route_name: Routes.queue, diff --git a/src/components/nav/Titles/Folder.vue b/src/components/nav/Titles/Folder.vue index 15d5203f..0d9ced2a 100644 --- a/src/components/nav/Titles/Folder.vue +++ b/src/components/nav/Titles/Folder.vue @@ -102,7 +102,7 @@ onUpdated(() => { content: "∕"; font-size: small; margin-right: $smaller; - color: $gray; + color: $gray2; font-size: 1rem; } diff --git a/src/composables/usePlayFrom.ts b/src/composables/usePlayFrom.ts index 4f188a1f..ec709aaf 100644 --- a/src/composables/usePlayFrom.ts +++ b/src/composables/usePlayFrom.ts @@ -47,7 +47,7 @@ export default async function play( useQueue.playFromAlbum( a_store.info.title, a_store.info.albumhash, - a_store.srcTracks + a_store.allTracks ); useQueue.play(); break; diff --git a/src/router/routes.ts b/src/router/routes.ts index ac308064..a3e947d7 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -124,6 +124,12 @@ const queue = { component: () => import("@/views/QueueView.vue"), }; +const favorites = { + path: "/favorites", + name: "FavoritesView", + component: () => import("@/views/Favorites.vue"), +}; + const notFound = { name: "NotFound", path: "/:pathMatch(.*)", @@ -145,6 +151,7 @@ const routes = [ queue, notFound, ArtistTracks, + favorites, ]; const Routes = { @@ -162,6 +169,7 @@ const Routes = { queue: queue.name, notFound: notFound.name, artistTracks: ArtistTracks.name, + favorites: favorites.name, }; export { routes, Routes }; diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts index 1fe9ffe6..2dd9de1d 100644 --- a/src/stores/pages/album.ts +++ b/src/stores/pages/album.ts @@ -64,6 +64,7 @@ export default defineStore("album", { this.srcTracks.forEach((t, index) => { t.master_index = index; + console.log(t.disc, t.track); }); }, async fetchArtistAlbums() { @@ -88,6 +89,16 @@ export default defineStore("album", { discs(): Disc { return createDiscs(this.srcTracks); }, + /** + * All tracks ordered by disc and track number. + */ + allTracks(): Track[] { + return Object.keys(this.discs).reduce((tracks: Track[], disc) => { + const disc_tracks = this.discs[disc]; + + return [...tracks, ...disc_tracks]; + }, []); + }, filteredTracks(): ComputedRef { const discs = this.discs; let tracks: Track[] | AlbumDisc[] = []; diff --git a/src/views/AlbumView/index.vue b/src/views/AlbumView/index.vue index 14918e52..98108cb7 100644 --- a/src/views/AlbumView/index.vue +++ b/src/views/AlbumView/index.vue @@ -120,7 +120,7 @@ const scrollerItems = computed(() => { function playFromAlbum(index: number) { const { title, albumartists, albumhash } = album.info; - queue.playFromAlbum(title, albumhash, album.srcTracks); + queue.playFromAlbum(title, albumhash, album.allTracks); queue.play(index); } diff --git a/src/views/Favorites.vue b/src/views/Favorites.vue new file mode 100644 index 00000000..ed4fa03c --- /dev/null +++ b/src/views/Favorites.vue @@ -0,0 +1,58 @@ + + + + +