From f3c4f0310a38aea729126753d149400a27948e91 Mon Sep 17 00:00:00 2001 From: geoffrey45 Date: Mon, 21 Nov 2022 20:03:56 +0300 Subject: [PATCH] update interfaces to use the updated property names + misc changes related to moving to sqlite --- src/components/AlbumView/Header.vue | 17 +++-- src/components/AlbumsExplorer/AlbumList.vue | 2 +- src/components/AlbumsExplorer/TopAlbums.vue | 2 +- src/components/ContextMenu.vue | 71 +++++++++++++++---- src/components/Contextmenu/ContextItem.vue | 1 - src/components/FolderView/SongList.vue | 6 +- src/components/LeftSidebar/Playlists.vue | 2 +- src/components/PlaylistView/Header.vue | 16 ++--- src/components/PlaylistsList/PlaylistCard.vue | 2 +- .../RightSideBar/Search/PlaylistsGrid.vue | 2 +- .../RightSideBar/Search/TracksGrid.vue | 6 +- src/components/WelcomeModal.vue | 2 + src/components/modals/updatePlaylist.vue | 4 +- src/components/nav/Titles/QueueTitle.vue | 2 +- src/components/shared/AlbumCard.vue | 4 +- src/components/shared/PlayBtnRect.vue | 13 +--- src/composables/colors/album.ts | 14 ++-- src/composables/fetch/playlists.ts | 14 ++-- src/composables/usePlayFrom.ts | 4 +- src/interfaces.ts | 20 +++--- src/layouts/HeaderAndVList.vue | 6 +- src/stores/context.ts | 17 ++--- src/stores/pages/playlist.ts | 17 +++-- src/stores/queue.ts | 23 +++--- src/stores/settings/index.ts | 2 +- src/utils/useCreateTrackProps.ts | 4 +- src/views/FolderView.vue | 4 +- src/views/PlaylistList.vue | 2 +- src/views/PlaylistView/index.vue | 20 +++--- src/views/QueueView.vue | 4 +- 30 files changed, 166 insertions(+), 137 deletions(-) diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue index 611376b..feac978 100644 --- a/src/components/AlbumView/Header.vue +++ b/src/components/AlbumView/Header.vue @@ -5,23 +5,27 @@ :style="{ backgroundImage: album.colors ? `linear-gradient( - 37deg, ${album.colors[0]}, ${album.colors[3]} + 37deg, ${album.colors[2]}, ${album.colors[2]} )` : '', }" > -
- +
+
Soundtrack Compilation + EP Single Album
@@ -32,7 +36,7 @@
- {{ album.artist }} • {{ album.date }} • {{ album.count }} + {{ album.albumartist }} • {{ album.date }} • {{ album.count }} {{ album.count === 1 ? "Track" : "Tracks" }} • {{ formatSeconds(album.duration, true) }}
@@ -40,7 +44,6 @@
@@ -99,6 +102,7 @@ useVisibility(albumheaderthing, handleVisibilityState); height: $banner-height; background-color: $black; overflow: hidden; + align-items: flex-end; .big-img { height: calc(100%); @@ -114,6 +118,7 @@ useVisibility(albumheaderthing, handleVisibilityState); .big-img.imgSmall { width: 12rem; + height: 12rem; img { height: 12rem; diff --git a/src/components/AlbumsExplorer/AlbumList.vue b/src/components/AlbumsExplorer/AlbumList.vue index 0fb50b9..1302dce 100644 --- a/src/components/AlbumsExplorer/AlbumList.vue +++ b/src/components/AlbumsExplorer/AlbumList.vue @@ -17,7 +17,7 @@
{{ album.title }}
-
{{ album.artist }}
+
{{ album.albumartist }}
diff --git a/src/components/AlbumsExplorer/TopAlbums.vue b/src/components/AlbumsExplorer/TopAlbums.vue index 7d2f4fc..e7b6e0e 100644 --- a/src/components/AlbumsExplorer/TopAlbums.vue +++ b/src/components/AlbumsExplorer/TopAlbums.vue @@ -11,7 +11,7 @@
{{ album.title }}
-
{{ album.artist }}
+
{{ album.albumartist }}
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue index 5f5d406..9d97a19 100644 --- a/src/components/ContextMenu.vue +++ b/src/components/ContextMenu.vue @@ -2,7 +2,7 @@
(); +const contextMenuRef = ref(); -let clickCount = 0; +// let clickCount = 0; -onClickOutside(contextMenu, (e) => { - if (!context.visible) { - clickCount = 0; +// onClickOutside( +// contextMenuRef, +// (e) => { +// console.log(clickCount); + +// if (!context.visible) { +// // clickCount = 0; +// return; +// } + +// clickCount++; + +// if (context.visible && clickCount === 1) { +// context.hideContextMenu(); +// e.stopImmediatePropagation(); +// clickCount = 0; +// } +// }, +// { +// capture: false, +// } +// ); + +let watcher: any = null; + +context.$subscribe((mutation, state) => { + // let watchers = []; + // console.log("watchers count: " + watchers.length) + // let wat: any = () => {}; + + if (state.visible) { + setTimeout(() => { + if (watcher !== null) { + watcher(); + } + watcher = onClickOutside( + contextMenuRef, + (e) => { + e.stopImmediatePropagation(); + console.log("clicked outside ref"); + context.hideContextMenu(); + }, + { + capture: false, + } + ); + }, 200); return; } - clickCount++; - if (context.visible && clickCount == 2) { - context.hideContextMenu(); - e.stopImmediatePropagation(); - clickCount = 0; + if (watcher !== null) { + watcher(); } -}, { - capture: false + + // wat(); }); diff --git a/src/components/Contextmenu/ContextItem.vue b/src/components/Contextmenu/ContextItem.vue index a38da6b..9d7f505 100644 --- a/src/components/Contextmenu/ContextItem.vue +++ b/src/components/Contextmenu/ContextItem.vue @@ -98,7 +98,6 @@ function hideContextMenu() { function runAction() { if (props.option.children) { if (childrenShown.value) { - console.log("what"); hideChildren(); return; } diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue index ca4fe61..02c1cd6 100644 --- a/src/components/FolderView/SongList.vue +++ b/src/components/FolderView/SongList.vue @@ -17,7 +17,7 @@
@@ -59,7 +59,7 @@ const props = defineProps<{ tracks: Track[]; path?: string; pname?: string; - playlistid?: string; + id?: string; on_album_page?: boolean; disc?: string | number; copyright?: string | null; diff --git a/src/components/LeftSidebar/Playlists.vue b/src/components/LeftSidebar/Playlists.vue index 8b376e3..6e34175 100644 --- a/src/components/LeftSidebar/Playlists.vue +++ b/src/components/LeftSidebar/Playlists.vue @@ -7,7 +7,7 @@ :to="{ name: 'PlaylistView', params: { - pid: p.playlistid, + pid: p.id, }, }" > diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue index 9e17e32..b989902 100644 --- a/src/components/PlaylistView/Header.vue +++ b/src/components/PlaylistView/Header.vue @@ -26,7 +26,7 @@
Last updated {{ info.lastUpdated }}  |  Last updated {{ info.last_updated }}  |   Edit
@@ -43,23 +43,23 @@ import useModalStore from "../../stores/modal"; import { playSources } from "@/composables/enums"; import { formatSeconds, useVisibility } from "@/utils"; import { paths } from "../../config"; -import { Playlist } from "../../interfaces"; import PlayBtnRect from "../shared/PlayBtnRect.vue"; +import { storeToRefs } from "pinia"; -const imguri = paths.images.playlist; const modal = useModalStore(); const nav = useNavStore(); +const playlist = usePStore(); + +const imguri = paths.images.playlist; + const playlistheader = ref(null); +const { info } = storeToRefs(playlist); useVisibility(playlistheader, nav.toggleShowPlay); -const props = defineProps<{ - info: Playlist; -}>(); - function editPlaylist() { - modal.showEditPlaylistModal(props.info); + modal.showEditPlaylistModal(info.value); } diff --git a/src/components/PlaylistsList/PlaylistCard.vue b/src/components/PlaylistsList/PlaylistCard.vue index 7de4f4d..77e93d5 100644 --- a/src/components/PlaylistsList/PlaylistCard.vue +++ b/src/components/PlaylistsList/PlaylistCard.vue @@ -1,6 +1,6 @@ + + diff --git a/src/composables/colors/album.ts b/src/composables/colors/album.ts index 2da394a..b5d6420 100644 --- a/src/composables/colors/album.ts +++ b/src/composables/colors/album.ts @@ -24,18 +24,16 @@ interface BtnColor { * @param {string[]} colors The album colors to choose from. * @returns {BtnColor} A color to use as the play button background */ -export function getButtonColor(colors: string[]): BtnColor { - const def = { - color: "#fff", +export function getButtonColor(colors: string[], index: number): BtnColor { + const fallback = { + color: "#234ece", isDark: true, }; - if (!colors || colors.length === 0) return def; - - const base_color = colors[0]; + if (!colors || colors.length === 0) return fallback; for (let i = 0; i < colors.length; i++) { - if (theyContrast(base_color, colors[i])) { + if (theyContrast(colors[index], colors[i])) { return { color: colors[i], isDark: isLight(colors[i]), @@ -43,7 +41,7 @@ export function getButtonColor(colors: string[]): BtnColor { } } - return def; + return fallback; } /** diff --git a/src/composables/fetch/playlists.ts b/src/composables/fetch/playlists.ts index 7b80ec7..ddac88e 100644 --- a/src/composables/fetch/playlists.ts +++ b/src/composables/fetch/playlists.ts @@ -1,8 +1,6 @@ import { paths } from "@/config"; -import { Artist } from "../../interfaces"; -import { Playlist, Track } from "../../interfaces"; +import { Artist, Playlist, Track } from "../../interfaces"; import { Notification, NotifType } from "../../stores/notification"; -import state from "../state"; import useAxios from "./useAxios"; const { @@ -67,12 +65,12 @@ async function getAllPlaylists(): Promise { } async function addTrackToPlaylist(playlist: Playlist, track: Track) { - const uri = `${basePlaylistUrl}/${playlist.playlistid}/add`; + const uri = `${basePlaylistUrl}/${playlist.id}/add`; const { status } = await useAxios({ url: uri, props: { - track: track.trackid, + track: track.trackhash, }, }); @@ -92,13 +90,13 @@ async function getPlaylist(pid: string) { tracks: Track[]; } - const { data, error } = await useAxios({ + const { data, status } = await useAxios({ url: uri, get: true, }); - if (error) { - new Notification("Something funny happened!", NotifType.Error); + if (status == 404) { + new Notification("Playlist not found", NotifType.Error); } if (data) { diff --git a/src/composables/usePlayFrom.ts b/src/composables/usePlayFrom.ts index 9bf7cc4..9da67a8 100644 --- a/src/composables/usePlayFrom.ts +++ b/src/composables/usePlayFrom.ts @@ -33,7 +33,7 @@ export default function play( useQueue.playFromAlbum( a_store.info.title, - a_store.info.artist, + a_store.info.albumartist, a_store.info.hash, a_store.allTracks ); @@ -45,7 +45,7 @@ export default function play( if (p.tracks.length === 0) return; - useQueue.playFromPlaylist(p.info.name, p.info.playlistid, p.tracks); + useQueue.playFromPlaylist(p.info.name, p.info.id, p.tracks); useQueue.play(); break; } diff --git a/src/interfaces.ts b/src/interfaces.ts index cba9f67..9325610 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -6,7 +6,7 @@ export interface AlbumDisc { } export interface Track extends AlbumDisc { - trackid: string; + id: string; title: string; album?: string; artist: string[]; @@ -21,7 +21,7 @@ export interface Track extends AlbumDisc { track: number; disc: number; index: number; - hash: string; + trackhash: string; copyright?: string; filetype: string; } @@ -37,18 +37,20 @@ export interface Folder { export interface AlbumInfo { albumid: string; title: string; - artist: string; + albumartist: string; count: number; duration: number; date: string; image: string; artistimg: string; - is_compilation: boolean; - is_soundtrack: boolean; - is_single: boolean; hash: string; colors: string[]; copyright?: string; + + is_compilation: boolean; + is_soundtrack: boolean; + is_single: boolean; + is_EP: boolean; } export interface Artist { @@ -66,12 +68,12 @@ export interface Option { } export interface Playlist { - playlistid: string; + id: string; name: string; image: string | FormData; tracks: Track[]; count: number; - lastUpdated: string; + last_updated: string; thumb: string; duration: number; } @@ -95,7 +97,7 @@ export interface fromAlbum { export interface fromPlaylist { type: FromOptions.playlist; name: string; - playlistid: string; + id: string; } export interface fromSearch { diff --git a/src/layouts/HeaderAndVList.vue b/src/layouts/HeaderAndVList.vue index f2c6c96..fef734e 100644 --- a/src/layouts/HeaderAndVList.vue +++ b/src/layouts/HeaderAndVList.vue @@ -40,7 +40,7 @@ { + this.visible = true; + this.src = src; + }, }); - }); - - this.visible = true; - this.src = src; - - // const xy = normalize(e.clientX, e.clientY); - - // this.x = xy.normalX; - // this.y = xy.normalY; - - // this.normalizedX = xy.normalizedX; - // this.normalizedY = xy.normalizedY; + }) }, hideContextMenu() { this.visible = false; diff --git a/src/stores/pages/playlist.ts b/src/stores/pages/playlist.ts index f72af7d..dc1e6b3 100644 --- a/src/stores/pages/playlist.ts +++ b/src/stores/pages/playlist.ts @@ -17,27 +17,30 @@ export default defineStore("playlist-tracks", { actions: { /** * Fetches a single playlist information, and its tracks from the server - * @param playlistid The id of the playlist to fetch + * @param id The id of the playlist to fetch */ - async fetchAll(playlistid: string) { - const playlist = await getPlaylist(playlistid); + async fetchAll(id: string) { + const playlist = await getPlaylist(id); this.info = playlist?.info || ({} as Playlist); this.allTracks = playlist?.tracks || []; }, - // async fetchArtists(playlistid: string) { - // this.artists = await getPlaylistArtists(playlistid); + // async fetchArtists(id: string) { + // this.artists = await getPlaylistArtists(id); // }, + /** * Updates the playlist header info. This is used when the playlist is * updated. * @param info Playlist info */ updatePInfo(info: Playlist) { - const duration = this.info.duration; + const { duration, count } = this.info; + this.info = info; - this.info.duration = duration; + + this.info = { ...this.info, duration, count }; }, resetArtists() { this.artists = []; diff --git a/src/stores/queue.ts b/src/stores/queue.ts index 56b2a7e..6370cfe 100644 --- a/src/stores/queue.ts +++ b/src/stores/queue.ts @@ -1,4 +1,3 @@ -import { ref } from "@vue/reactivity"; import { paths } from "@/config"; import { defineStore } from "pinia"; import { Ref } from "vue"; @@ -8,11 +7,11 @@ import { FromOptions } from "../composables/enums"; import updateMediaNotif from "../composables/mediaNotification"; import { - fromAlbum, - fromFolder, - fromPlaylist, - fromSearch, - Track, + fromAlbum, + fromFolder, + fromPlaylist, + fromSearch, + Track } from "../interfaces"; function shuffle(tracks: Track[]) { @@ -52,7 +51,7 @@ export default defineStore("Queue", { } const track = this.tracklist[index]; - const uri = `${paths.api.files}/${track.trackid}-${track.hash}`; + const uri = `${paths.api.files}/${track.id}-${track.trackhash}`; new Promise((resolve, reject) => { audio.autoplay = true; @@ -172,7 +171,7 @@ export default defineStore("Queue", { this.from = { type: FromOptions.playlist, name: pname, - playlistid: pid, + id: pid, }; this.setNewQueue(tracks); @@ -195,7 +194,7 @@ export default defineStore("Queue", { const next: Track = this.tracklist[nextindex]; // if track is already next, skip - if (next?.trackid === track.trackid) { + if (next?.id === track.id) { Toast.showNotification("Track is already queued", NotifType.Info); return; } @@ -227,14 +226,14 @@ export default defineStore("Queue", { } const current = this.currenttrack; - const current_hash = current?.hash; + const current_hash = current?.trackhash; this.tracklist = shuffle(this.tracklist); // find current track after shuffle if (this.playing) { const newindex = this.tracklist.findIndex( - (track) => track.hash === current_hash + (track) => track.trackhash === current_hash ); // remove current track from queue @@ -294,7 +293,7 @@ export default defineStore("Queue", { return this.tracklist[this.currentindex]; }, currentid(): string { - return this.currenttrack?.trackid || ""; + return this.currenttrack?.id || ""; }, previndex(): number { return this.currentindex === 0 diff --git a/src/stores/settings/index.ts b/src/stores/settings/index.ts index 5d042b8..78425bc 100644 --- a/src/stores/settings/index.ts +++ b/src/stores/settings/index.ts @@ -4,7 +4,7 @@ import { defineStore } from "pinia"; export default defineStore("settings", { state: () => ({ - use_np_img: false, + use_np_img: true, use_sidebar: true, extend_width: false, contextChildrenShowMode: contextChildrenShowMode.click, diff --git a/src/utils/useCreateTrackProps.ts b/src/utils/useCreateTrackProps.ts index b0ec7b0..3337216 100644 --- a/src/utils/useCreateTrackProps.ts +++ b/src/utils/useCreateTrackProps.ts @@ -5,8 +5,8 @@ export default function createTrackProps(track: Track) { return { track, index: track.index + 1, - isCurrent: queue().currentid === track.trackid, + isCurrent: queue().currentid === track.id, isCurrentPlaying: - queue().currentid === track.trackid && queue().playing, + queue().currentid === track.id && queue().playing, }; } diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue index 75982f4..f4577cf 100644 --- a/src/views/FolderView.vue +++ b/src/views/FolderView.vue @@ -62,9 +62,9 @@ class songItem { this.props = { track, index: track.index + 1, - isCurrent: queue.currentid === track.trackid, + isCurrent: queue.currentid === track.id, isCurrentPlaying: - queue.currentid === track.trackid && queue.playing, + queue.currentid === track.id && queue.playing, }; } } diff --git a/src/views/PlaylistList.vue b/src/views/PlaylistList.vue index 70bcda5..3173c2f 100644 --- a/src/views/PlaylistList.vue +++ b/src/views/PlaylistList.vue @@ -3,7 +3,7 @@
diff --git a/src/views/PlaylistView/index.vue b/src/views/PlaylistView/index.vue index ab71928..8aedd00 100644 --- a/src/views/PlaylistView/index.vue +++ b/src/views/PlaylistView/index.vue @@ -25,9 +25,9 @@ import { computed } from "@vue/reactivity"; import { onBeforeRouteLeave } from "vue-router"; -import useQueueStore from "@/stores/queue"; +import { isMedium, isSmall } from "@/stores/content-width"; import usePlaylistStore from "@/stores/pages/playlist"; -import { isSmall, isMedium } from "@/stores/content-width"; +import useQueueStore from "@/stores/queue"; import Header from "@/components/PlaylistView/Header.vue"; import SongItem from "@/components/shared/SongItem.vue"; @@ -38,16 +38,16 @@ const playlist = usePlaylistStore(); interface ScrollerItem { id: string | number; component: typeof Header | typeof SongItem; - props: Record; + // props: Record; size: number; } const header: ScrollerItem = { id: "header", component: Header, - props: { - info: playlist.info, - }, + // props: { + // info: playlist.info, + // }, size: 19 * 16, }; @@ -61,8 +61,8 @@ const scrollerItems = computed(() => { props: { track: track, index: track.index + 1, - isCurrent: queue.currentid === track.trackid, - isCurrentPlaying: queue.currentid === track.trackid && queue.playing, + isCurrent: queue.currentid === track.id, + isCurrentPlaying: queue.currentid === track.id && queue.playing, }, size: 64, }; @@ -71,8 +71,8 @@ const scrollerItems = computed(() => { }); function playFromPlaylistPage(index: number) { - const { name, playlistid } = playlist.info; - queue.playFromPlaylist(name, playlistid, playlist.allTracks); + const { name, id } = playlist.info; + queue.playFromPlaylist(name, id, playlist.allTracks); queue.play(index); } diff --git a/src/views/QueueView.vue b/src/views/QueueView.vue index e0a7878..8c24e76 100644 --- a/src/views/QueueView.vue +++ b/src/views/QueueView.vue @@ -16,9 +16,9 @@