Small refractoring

app/components/Admin/ModalForm.vue

@@ -129,7 +129,6 @@ watch(
 				<Checkbox
 					v-else-if="field.type == 'checkbox'"
 					:label="field.label || field.key"
-					:model-value="localItem[field.key]"
 					@change="(v) => (localItem[field.key] = v)"
 				/>
 				<Input

app/components/Player/Fullscreen.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import LyricsDisplay from "./Fullscreen/LyricsDisplay.vue"
-
 const fullscreen = useFullscreen()
 const song = useSong()
 
@@ -24,6 +22,12 @@ onMounted(() => {
 		window.removeEventListener("mousemove", handleMouseMove)
 	})
 })
+
+const nuxtApp = useNuxtApp()
+
+nuxtApp.hook("page:finish", () => {
+	fullscreen.value = false
+})
 </script>
 
 <template>
@@ -54,7 +58,7 @@ onMounted(() => {
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
-				<LyricsDisplay
+				<PlayerFullscreenLyricsDisplay
 					:animation-duration="0.2"
 					:offset="150"
 					:show-scroll-bar="mouseMovedRecently"

app/components/Player/Fullscreen/LyricsDisplay.vue

@@ -132,7 +132,7 @@ const finalTransform = computed(() => {
 			<p
 				v-for="(lyric, i) in parsedLyrics"
 				:key="lyric.time"
-				:class="{ active: i == activeIndex }"
+				:class="{ active: i == scrollActiveIndex }"
 				ref="lyrics"
 				@click="() => (secondsPlayed = lyric.time)"
 			>

app/components/Player/index.vue

@@ -131,8 +131,6 @@ const fullscreen = useFullscreen()
 	border-radius: $border-radius-lg;
 	border: 1px solid $color-border;
 
-	background-color: $color-background;
-
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 1rem;

app/components/Slider.vue

@@ -1,39 +1,22 @@
 <script setup lang="ts">
 interface SliderProps {
 	title?: string
-	scrollWidth?: () => number
-	sliderClass?: string
 }
 
 const props = defineProps<SliderProps>()
 
-const slider = useTemplateRef<HTMLDivElement>("slider")
+const slider = ref<HTMLDivElement>()
 
 const scrollLeft = (num: number) => {
-	if (!slider.value) return
+	if (slider.value) slider.value.scrollLeft += num
-
-	const maxScroll = slider.value.scrollWidth - slider.value.clientWidth
-
-	slider.value.scrollLeft = Math.max(
-		0,
-		Math.min(slider.value?.scrollLeft + num, maxScroll),
-	)
 }
 
 const left = () => {
-	if (slider.value)
+	if (slider.value) scrollLeft(-slider.value.offsetWidth)
-		scrollLeft(
-			props.scrollWidth
-				? -props.scrollWidth()
-				: -slider.value.offsetWidth,
-		)
 }
 
 const right = () => {
-	if (slider.value)
+	if (slider.value) scrollLeft(slider.value.offsetWidth)
-		scrollLeft(
-			props.scrollWidth ? props.scrollWidth() : slider.value.offsetWidth,
-		)
 }
 
 const doesScroll = ref<boolean>(false)
@@ -65,9 +48,7 @@ onMounted(() => {
 				class="left"
 				name="material-symbols:chevron-left-rounded"
 			/>
-			<section class="slider" :class="[props.sliderClass]" ref="slider">
+			<section class="slider" ref="slider"><slot /></section>
-				<slot />
-			</section>
 			<Icon
 				v-if="doesScroll"
 				@click="right"
@@ -104,7 +85,7 @@ onMounted(() => {
 
 	& > * {
 		flex: 0 0 auto;
-		scroll-snap-align: start;
+		scroll-snap-align: center;
 	}
 }
 

app/components/Track/ImageRow.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuItem } from "~/ui/DropdownMenu.vue"
-
-interface TrackRowProps {
-	track: Track
-}
-
-const { track } = defineProps<TrackRowProps>()
-const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
-
-const hovering = ref(false)
-
-const toast = useToast()
-
-const dropdownMenuItems: DropdownMenuItem[][] = [
-	[
-		{
-			label: "Play only this",
-			icon: "lucide:play",
-			onSelect() {},
-		},
-		{
-			label: "Play next",
-			icon: "lucide:list-start",
-			onSelect() {
-				toast.show("Playing next")
-			},
-		},
-		{
-			label: "Add to queue",
-			icon: "lucide:list-end",
-			onSelect() {
-				toast.show("Added to queue")
-			},
-		},
-	],
-]
-</script>
-
-<template>
-	<article
-		class="track"
-		@mouseover="hovering = true"
-		@mouseleave="hovering = false"
-	>
-		<div
-			class="index"
-			:class="{ hovering }"
-			@click="emit('playAlbumAtIndex')"
-		>
-			<Icon name="lucide:play" />
-			<NuxtImg
-				:src="GET_FILE(track.album.file)"
-				width="50"
-				height="50"
-				placeholder
-			/>
-		</div>
-
-		<div>
-			<p>{{ track.name }}</p>
-			<ArtistName :artists="track.artists" class="artists" />
-		</div>
-
-		<DropdownMenu :items="dropdownMenuItems">
-			<Icon name="lucide:ellipsis" class="dropdown-icon" />
-		</DropdownMenu>
-	</article>
-</template>
-
-<style lang="scss" scoped>
-@use "@/styles/variables" as *;
-@use "@/styles/util" as *;
-@use "sass:color";
-
-.track {
-	display: grid;
-	grid-template-columns: 40px 1fr 30px;
-	gap: 0.5rem;
-	align-items: center;
-	padding: 0.6rem 1rem;
-	border-radius: $border-radius-standard;
-	background-color: $color-background;
-	line-height: 1;
-	width: 100%;
-
-	p {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-.index {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 24px;
-
-	position: relative;
-
-	cursor: pointer;
-
-	img {
-		border-radius: $border-radius-standard;
-	}
-
-	span {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-
-		opacity: 0;
-	}
-
-	img,
-	span {
-		transition: opacity 0.15s ease;
-	}
-
-	&.hovering {
-		img {
-			opacity: 0.4;
-		}
-
-		span {
-			opacity: 1;
-		}
-	}
-}
-
-.artists {
-	@include fontSize(14px);
-}
-
-.dropdown-icon {
-	font-size: 20px;
-	cursor: pointer;
-}
-</style>

app/components/Track/Row.vue

@@ -14,8 +14,7 @@ const hovering = ref(false)
 
 const toast = useToast()
 
-const dropdownMenuItems: DropdownMenuItem[][] = [
+const dropdownMenuItems: DropdownMenuItem[] = [
-	[
 	{
 		label: "Play only this",
 		icon: "lucide:play",
@@ -35,7 +34,6 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			toast.show("Added to queue")
 		},
 	},
-	],
 ]
 
 const durationFormatted = computed(() =>
@@ -122,6 +120,5 @@ const durationFormatted = computed(() =>
 
 .dropdown-icon {
 	font-size: 20px;
-	cursor: pointer;
 }
 </style>

app/composables/useAuth.ts

@@ -131,10 +131,6 @@ export const useAuth = () => {
 		return refreshPromise
 	}
 
-	onMounted(() => {
-		if (refreshToken.value && !sessionToken.value) refreshSessionToken()
-	})
-
 	return {
 		refreshToken,
 		sessionToken,

app/pages/artist/[id].vue

@@ -1,150 +1 @@
-<script setup lang="ts">
+<template></template>
-const route = useRoute()
-const id = computed(() => route.params.id)
-
-const { data: artistData } = await useApiFetch<Album>(`/artists/${id.value}`)
-
-const { data: albumsData } = await useApiFetch<Album[]>(
-	`/artists/${id.value}/albums`,
-)
-
-const { data: tracksData } = await useApiFetch<Track[]>(
-	`/artists/${id.value}/tracks`,
-)
-
-const chunkedTracks = computed(() => {
-	const SIZE = 3
-	const chunks = []
-
-	for (let i = 0; i < tracksData.value.length; i += SIZE) {
-		chunks.push(tracksData.value.slice(i, i + SIZE))
-	}
-
-	return chunks
-})
-
-const slider = useTemplateRef("slider")
-
-const scrollWidth = () => {
-	if (!slider.value) return 0
-
-	const el = Array.isArray(slider.value) ? slider.value[0] : slider.value
-
-	if (!el) return 0
-
-	return el.offsetWidth
-}
-
-const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
-</script>
-
-<template>
-	<section class="info" v-if="artistData">
-		<NuxtImg
-			:src="GET_FILE(artistData.file)"
-			width="300"
-			height="300"
-			placeholder
-		/>
-
-		<div class="details">
-			<h1>{{ artistData.name }}</h1>
-
-			<div class="buttons">
-				<Button
-					icon-name="lucide:play"
-					@click="() => playAlbum(tracksData)"
-					>Play</Button
-				>
-				<Button
-					icon-name="lucide:shuffle"
-					@click="() => playShuffledAlbum(tracksData)"
-					>Shuffle</Button
-				>
-			</div>
-		</div>
-	</section>
-
-	<Slider slider-class="slider" :scroll-width="scrollWidth" title="Tracks">
-		<section
-			class="tracks"
-			v-for="(chunk, pI) in chunkedTracks"
-			:key="`chunk-${pI}`"
-			ref="slider"
-		>
-			<TrackRow
-				v-for="(track, i) in chunk"
-				:key="`track-${track._id}`"
-				:track="track"
-				:index="i + pI * 3"
-				@play-album-at-index="
-					() => playAlbumAtIndex(tracksData, i + pI * 3)
-				"
-			/>
-		</section>
-	</Slider>
-
-	<Slider title="Albums">
-		<AlbumCard
-			v-for="album in albumsData"
-			:key="album._id"
-			:name="album.name"
-			:file="`${BACKEND_SERVE}${album.file}`"
-			:artists="album.artists"
-			:_id="album._id"
-		/>
-	</Slider>
-</template>
-
-<style lang="scss" scoped>
-@use "@/styles/variables" as *;
-@use "@/styles/util";
-
-.info {
-	display: flex;
-	gap: 1rem;
-	margin-bottom: 2rem;
-
-	& img {
-		border-radius: $border-radius-standard;
-	}
-
-	.details {
-		padding-top: 3.5rem;
-
-		display: flex;
-		flex-direction: column;
-		gap: 0.2rem;
-
-		& h1 {
-			@include util.fontSize(32px);
-			font-weight: 700;
-			line-height: 2.4rem;
-		}
-
-		.artist {
-			@include util.fontSize(18px);
-		}
-
-		.buttons {
-			margin-top: auto;
-			display: flex;
-			gap: 1rem;
-		}
-	}
-}
-
-$gap: 12px;
-
-:deep(.slider) {
-	gap: $gap;
-}
-
-.tracks {
-	display: grid;
-	grid-template-rows: repeat(3, 1fr);
-	gap: 0.4rem;
-
-	flex: 0 0 calc((100% - 3 * $gap) / 4);
-}
-</style>

app/pages/artist/[id]/index.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const id = computed(() => route.params.id)
-
-const { data: artistData } = await useApiFetch<Artist>(`/artists/${id.value}`)
-const { data: tracksData } = await useApiFetch<Track[]>(
-	`/artists/${id.value}/tracks`,
-)
-
-const { playAlbum, playAlbumAtIndex } = usePlayer()
-</script>
-
-<template>
-	<section class="info" v-if="artistData">
-		<NuxtImg
-			:src="GET_FILE(artistData.file)"
-			width="300"
-			height="300"
-			placeholder
-		/>
-
-		<div class="details">
-			<h1>{{ artistData.name }}</h1>
-
-			<div class="buttons">
-				<Button
-					icon-name="lucide:play"
-					@click="() => playAlbum(tracksData)"
-					>Play</Button
-				>
-			</div>
-		</div>
-	</section>
-
-	<section class="tracks-container">
-		<NuxtLink :to="`/artist/${id}/tracks`">
-			Tracks
-			<Icon name="lucide:chevron-right" />
-		</NuxtLink>
-
-		<Slider>
-			<div class="tracks">
-				<template v-for="j in 25">
-					<TrackImageRow
-						v-for="(track, i) in tracksData"
-						:key="track._id"
-						:track="track"
-						:index="i"
-						@play-album-at-index="
-							() => playAlbumAtIndex(tracksData, i)
-						"
-					/>
-				</template>
-			</div>
-		</Slider>
-	</section>
-
-	<section class="albums"></section>
-</template>
-
-<style lang="scss" scoped>
-@use "@/styles/variables" as *;
-@use "@/styles/util";
-
-.info {
-	display: flex;
-	gap: 1rem;
-	margin-bottom: 2rem;
-
-	img {
-		border-radius: $border-radius-standard;
-	}
-
-	.details {
-		padding-top: 3.5rem;
-
-		display: flex;
-		flex-direction: column;
-
-		& h1 {
-			@include util.fontSize(32px);
-			font-weight: 700;
-			line-height: 2.4rem;
-		}
-
-		.buttons {
-			margin-top: auto;
-		}
-	}
-}
-
-.tracks-container {
-	a {
-		display: inline-flex;
-		align-items: center;
-
-		@include util.fontSize(24px);
-		font-weight: 600;
-	}
-
-	.tracks {
-		display: grid;
-		grid-template-rows: repeat(3, 1fr);
-		grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
-		grid-auto-flow: column;
-	}
-}
-</style>

app/pages/artist/[id]/tracks.vue

@@ -1,3 +0,0 @@
-<template>
-	<h1>Tracks!</h1>
-</template>

app/styles/_variables.scss

@@ -9,7 +9,6 @@ $color-button-hover: rgba(255, 255, 255, 0.16);
 $color-attention: #fc8181;
 $color-slider-monochrome: white;
 
-$border-radius-sm: 0.15rem;
 $border-radius-standard: 0.3rem;
 $border-radius-lg: 0.6rem;
 

app/ui/DropdownMenu.vue

@@ -6,7 +6,7 @@ export interface DropdownMenuItem {
 }
 
 interface DropdownMenuProps {
-	items: DropdownMenuItem[][]
+	items: DropdownMenuItem[]
 }
 
 const props = defineProps<DropdownMenuProps>()
@@ -85,14 +85,9 @@ onBeforeMount(() => {
 
 		<Transition name="dropdown">
 			<div v-show="open" class="menu" :class="placement">
-				<div
-					v-for="(group, i) in items"
-					:key="`group-${i}`"
-					class="group"
-				>
 				<button
-						v-for="(item, i) in group"
+					v-for="(item, i) in items"
-						:key="`item-${i}`"
+					:key="i"
 					class="item"
 					@click="
 						() => {
@@ -105,7 +100,6 @@ onBeforeMount(() => {
 					<span>{{ item.label }}</span>
 				</button>
 			</div>
-			</div>
 		</Transition>
 	</div>
 </template>
@@ -119,10 +113,11 @@ onBeforeMount(() => {
 
 	.menu {
 		position: absolute;
+
 		right: 0;
 
-		padding: 0.5rem;
 		min-width: 180px;
+		padding: 0.5rem;
 
 		background-color: $color-secondary-background;
 		border-radius: $border-radius-standard;
@@ -130,6 +125,7 @@ onBeforeMount(() => {
 
 		display: flex;
 		flex-direction: column;
+		gap: 2px;
 
 		z-index: 1000;
 
@@ -144,26 +140,6 @@ onBeforeMount(() => {
 		}
 	}
 
-	.group {
-		width: 100%;
-
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		padding: 0.4rem 0;
-		border-bottom: 1px solid $color-border;
-
-		&:first-child {
-			padding-top: 0;
-		}
-
-		&:last-child {
-			border-bottom: none;
-			padding-bottom: 0;
-		}
-	}
-
 	.item {
 		display: flex;
 		align-items: center;

app/ui/Sidebar.vue

@@ -38,7 +38,7 @@
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		padding: 2rem 3rem calc(2rem + $player-height);
+		padding: 2rem 3rem;
 	}
 }
 </style>