Merge branch 'feat/player'

app/app.vue

@@ -2,6 +2,7 @@
 	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />
+		<Player />
 	</NuxtLayout>
 </template>
 

app/components/Player/index.vue

@@ -0,0 +1,233 @@
+<script setup lang="tsx">
+const widthFixerRef = useTemplateRef("width-fixer-ref")
+const playerRef = useTemplateRef("player-ref")
+
+onMounted(() => {
+	const resizePlayer = () => {
+		if (playerRef.value && widthFixerRef.value)
+			playerRef.value.style.width = `calc(${widthFixerRef.value.clientWidth}px)`
+	}
+
+	const resizeObserver = new ResizeObserver(() => {
+		resizePlayer()
+	})
+
+	if (widthFixerRef.value) resizeObserver.observe(widthFixerRef.value)
+	resizePlayer()
+})
+
+const song = useSong()
+const {
+	isPlaying,
+	play,
+	pause,
+	next,
+	prev,
+	shuffle,
+	repeat,
+	secondsPlayed,
+	duration,
+	volume,
+} = usePlayer()
+
+const secondsPlayedFormatted = computed(() =>
+	new Date(secondsPlayed.value * 1000).toISOString().slice(14, 19),
+)
+
+const durationFormatted = computed(() =>
+	new Date(duration.value * 1000).toISOString().slice(14, 19),
+)
+
+const toast = useToast()
+</script>
+
+<template>
+	<div id="width-fixer" ref="width-fixer-ref"></div>
+	<article class="player" ref="player-ref" :class="{ active: song }">
+		<template v-if="song">
+			<div class="track">
+				<NuxtImg
+					:src="GET_FILE(song.album.file)"
+					:alt="song.name"
+					:height="56"
+					:width="56"
+				/>
+
+				<div class="details">
+					<p>{{ song.name }}</p>
+					<ArtistName :artists="song.artists" class="artists" />
+				</div>
+			</div>
+			<div class="controls">
+				<div class="btns">
+					<Icon name="lucide:shuffle" @click="shuffle()" />
+					<Icon name="lucide:skip-back" @click="prev()" />
+					<Icon
+						name="lucide:pause"
+						v-if="isPlaying"
+						@click="pause()"
+					/>
+					<Icon name="lucide:play" v-else @click="play()" />
+					<Icon name="lucide:skip-forward" @click="next()" />
+					<Icon
+						name="lucide:repeat"
+						:class="{ repeating: repeat }"
+						@click="repeat = !repeat"
+					/>
+				</div>
+				<div class="slider">
+					<p>{{ secondsPlayedFormatted }}</p>
+					<RangeSlider
+						:model-value="secondsPlayed"
+						@update:model-value="(v) => (secondsPlayed = v ?? 0)"
+						:max="duration"
+						dont-update-immediately
+					/>
+					<p>{{ durationFormatted }}</p>
+				</div>
+			</div>
+			<div class="misc-btns">
+				<div class="volume">
+					<Icon name="lucide:volume-2" />
+					<RangeSlider
+						class="slider"
+						:model-value="volume"
+						@update:model-value="
+							(v) => {
+								if (v !== undefined) volume = v
+							}
+						"
+						:max="1"
+						:min="0"
+						:step="0.01"
+					/>
+				</div>
+				<Icon
+					name="lucide:list"
+					@click="toast.show('Not yet implemented')"
+				/>
+				<Icon
+					name="lucide:expand"
+					@click="toast.show('Not yet implemented')"
+				/>
+			</div>
+		</template>
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+
+#width-fixer {
+	width: 100%;
+}
+
+.player {
+	position: fixed;
+	bottom: 1rem;
+
+	height: $player-height;
+
+	border-radius: $border-radius-lg;
+	border: 1px solid $color-border;
+
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1rem;
+
+	padding: 0.5rem 2rem;
+
+	transform: translateY(150%);
+	transition: transform 0.2s ease-out;
+
+	&.active {
+		transform: translateY(0);
+	}
+
+	span {
+		font-size: 24px;
+		cursor: pointer;
+		transition: color 0.2s ease;
+	}
+}
+
+.track,
+.controls,
+.misc-btns,
+.controls {
+	display: flex;
+	width: 100%;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.track {
+	.details {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 1.375;
+	}
+
+	img {
+		height: 100%;
+		border-radius: $border-radius-standard;
+	}
+}
+
+.controls {
+	flex-direction: column;
+	justify-content: center;
+
+	align-items: flex-start;
+
+	.btns,
+	.slider {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.btns {
+		gap: 1rem;
+	}
+
+	.slider {
+		gap: 12px;
+		align-items: center;
+
+		& p {
+			@include fontSize(15px);
+			opacity: 0.8;
+		}
+	}
+
+	.repeating {
+		color: $color-accent;
+	}
+}
+
+.misc-btns {
+	justify-content: end;
+
+	.volume {
+		min-width: 100px;
+		max-width: 150px;
+
+		display: flex;
+		gap: 0.5rem;
+
+		span {
+			font-size: 18px;
+		}
+
+		.slider {
+			flex: 1;
+		}
+	}
+}
+</style>

app/composables/usePlayer.ts

@@ -0,0 +1,5 @@
+export const usePlayer = () => {
+	const { $player } = useNuxtApp()
+
+	return $player
+}

app/composables/useSong.ts

@@ -0,0 +1,7 @@
+export const useSong = () => {
+	const { currentSong, queue } = usePlayer()
+
+	return computed<Track | undefined>(() => {
+		return currentSong.value ?? queue.value[0]
+	})
+}

app/pages/index.vue

@@ -1,5 +1,18 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const player = usePlayer()
+
+const { data } = useApiFetch("/all/tracks")
+
+const play = () => {
+	player.addToQueue(data.value[0])
+	player.play()
+}
+</script>
 
 <template>
+	<Button @click="play">Test play</Button>
+
 	<AlbumSlider />
+
+	<div :style="{ height: '100vh' }"></div>
 </template>

app/plugins/player.ts

@@ -0,0 +1,231 @@
+import { Howl } from "howler"
+
+export default defineNuxtPlugin((nuxtApp) => {
+	const sound = ref<Howl | null>(null)
+	const queue = ref<Track[]>([])
+	const prevQueue = ref<Track[]>([])
+	const currentQueue = ref<Track[]>([])
+	const currentSong = ref<Track | null>(null)
+	const repeat = ref(false)
+	const isPlaying = ref(false)
+
+	const tick = ref(0)
+
+	const secondsPlayed = computed<number>({
+		get() {
+			tick.value
+			return (sound.value?.seek() as number) || 0
+		},
+		set(value: number) {
+			sound.value?.seek(value)
+		},
+	})
+	const volume = computed<number>({
+		get() {
+			tick.value
+			return sound.value?.volume() ?? 1
+		},
+		set(value) {
+			sound.value?.volume(value)
+		},
+	})
+	const duration = ref(0)
+
+	const aniFrame = ref<number | null>(null)
+
+	// Helpers
+	const updateMediaSession = async () => {
+		if (!import.meta.client) return
+		if (!navigator.mediaSession) {
+			console.warn("Media Session API is not supported")
+			return
+		}
+
+		if (!currentSong.value) return
+
+		navigator.mediaSession.metadata = new MediaMetadata({
+			title: currentSong.value.name,
+			artist: currentSong.value.artists[0]?.name,
+			album: currentSong.value.album.name,
+			artwork: [
+				{
+					src: GET_FILE(currentSong.value.album.file),
+					sizes: "512x512",
+				},
+			],
+		})
+
+		navigator.mediaSession.setPositionState({
+			duration: duration.value,
+			position: secondsPlayed.value,
+		})
+	}
+
+	const startTracking = () => {
+		const update = () => {
+			tick.value++
+			aniFrame.value = requestAnimationFrame(update)
+		}
+
+		update()
+	}
+
+	const stopTracking = () => {
+		if (aniFrame.value) cancelAnimationFrame(aniFrame.value)
+		aniFrame.value = null
+	}
+
+	const createHowl = async (song: Track) => {
+		if (!import.meta.client) return
+		if (!song) throw new Error("Song not provided")
+
+		const newSound = new Howl({
+			src: [GET_AUDIO_FILE(song.fileDir)],
+			html5: false,
+			autoplay: false,
+			volume: 0.5,
+			onload: () => {
+				duration.value = sound.value?.duration() || 0
+				volume.value = sound.value?.volume() || 1
+			},
+			onend: () => {
+				next()
+				stopTracking()
+			},
+			onstop: () => {
+				isPlaying.value = false
+				stopTracking()
+				if (navigator.mediaSession)
+					navigator.mediaSession.playbackState = "none"
+			},
+			onplay: () => {
+				isPlaying.value = true
+				startTracking()
+				if (navigator.mediaSession)
+					navigator.mediaSession.playbackState = "playing"
+			},
+			onpause: () => {
+				isPlaying.value = false
+				stopTracking()
+				if (navigator.mediaSession)
+					navigator.mediaSession.playbackState = "paused"
+			},
+		})
+
+		sound.value = newSound
+		return newSound
+	}
+
+	// Core actions
+	const play = async () => {
+		if (!currentSong.value) await next()
+
+		if (!sound.value && currentSong.value) {
+			await createHowl(currentSong.value)
+		}
+
+		if (sound.value && !sound.value.playing()) {
+			sound.value.play()
+			isPlaying.value = true
+		}
+
+		updateMediaSession()
+	}
+
+	const pause = () => {
+		sound.value?.pause()
+		isPlaying.value = false
+		updateMediaSession()
+	}
+
+	const next = async () => {
+		if (currentSong.value) {
+			prevQueue.value.unshift(currentSong.value)
+		}
+
+		currentSong.value = queue.value.shift() || null
+
+		sound.value?.stop()
+		sound.value = null
+
+		if (!currentSong.value && repeat.value) {
+			queue.value = [...currentQueue.value]
+			currentSong.value = queue.value.shift() || null
+		}
+
+		if (currentSong.value) await play()
+
+		updateMediaSession()
+	}
+
+	const prev = async () => {
+		if (sound.value && sound.value.seek() > 5) {
+			sound.value.seek(0)
+			return
+		}
+
+		const prevSong = prevQueue.value.shift()
+		if (!prevSong) return
+
+		if (currentSong.value) queue.value.unshift(currentSong.value)
+
+		currentSong.value = prevSong
+		sound.value?.stop()
+		sound.value = null
+
+		if (currentSong.value) await play()
+
+		updateMediaSession()
+	}
+
+	// Queue
+	const addToQueue = (song: Track) => {
+		queue.value.push(song)
+		currentQueue.value.push(song)
+	}
+
+	const clear = () => {
+		queue.value = []
+		currentQueue.value = []
+		currentSong.value = null
+		sound.value?.stop()
+		sound.value = null
+	}
+
+	const shuffle = () => {
+		queue.value.sort(() => Math.random() - 0.5)
+	}
+
+	// Info
+	const getDuration = () =>
+		new Promise<number>((resolve) => {
+			if (!sound.value) return resolve(0)
+			if (sound.value.state() === "loaded") {
+				resolve(sound.value.duration())
+			} else {
+				sound.value.once("load", () => resolve(sound.value!.duration()))
+			}
+		})
+
+	return {
+		provide: {
+			player: {
+				isPlaying,
+				currentSong,
+				repeat,
+				play,
+				pause,
+				next,
+				prev,
+				addToQueue,
+				clear,
+				shuffle,
+				getDuration,
+				secondsPlayed,
+				duration,
+				volume,
+				queue,
+			},
+		},
+	}
+})

app/styles/_variables.scss

@@ -9,3 +9,6 @@ $color-button-hover: rgba(255, 255, 255, 0.16);
 $color-attention: #fc8181;
 
 $border-radius-standard: 0.3rem;
+$border-radius-lg: 0.6rem;
+
+$player-height: 72px;

app/ui/RangeSlider.vue

@@ -3,20 +3,30 @@ interface SliderProps {
 	min?: number
 	max?: number
 	step?: number
+	dontUpdateImmediately?: boolean
 }
 
 const props = withDefaults(defineProps<SliderProps>(), {
 	min: 0,
 	max: 100,
 	step: 1,
+	dontUpdateImmediately: false,
 })
 
 const value = defineModel<number>()
 
 const sliderRef = useTemplateRef("slider-ref")
+
+const isDragging = ref(false)
+const localValue = ref<number | null>(null)
+
 const percentage = computed(() => {
+	const currentValue =
+		isDragging.value && props.dontUpdateImmediately
+			? (localValue.value ?? value.value ?? 0)
+			: (value.value ?? 0)
 	const range = props.max - props.min
-	return (((value.value ?? 0) - props.min) / range) * 100
+	return (((currentValue ?? 0) - props.min) / range) * 100
 })
 
 const updateFromEvent = (event: MouseEvent) => {
@@ -26,16 +36,27 @@ const updateFromEvent = (event: MouseEvent) => {
 	const x = event.clientX - rect.left
 	const ratio = Math.min(Math.max(x / rect.width, 0), 1)
 
-	value.value = props.min + ratio * (props.max - props.min)
+	const newValue = props.min + ratio * (props.max - props.min)
+
+	if (props.dontUpdateImmediately) localValue.value = newValue
+	else value.value = newValue
 }
 
 const onMouseDown = (event: MouseEvent) => {
+	isDragging.value = true
 	updateFromEvent(event)
 
 	const move = (e: MouseEvent) => updateFromEvent(e)
 	const up = () => {
 		window.removeEventListener("mousemove", move)
 		window.removeEventListener("mouseup", up)
+
+		isDragging.value = false
+
+		if (localValue.value != null && props.dontUpdateImmediately)
+			value.value = localValue.value
+
+		localValue.value = null
 	}
 
 	window.addEventListener("mousemove", move)
@@ -76,6 +97,5 @@ const onMouseDown = (event: MouseEvent) => {
 	height: 100%;
 	background: $color-accent;
 	border-radius: 999px;
-	transition: width 0.08s linear;
 }
 </style>

app/ui/Sidebar.vue

@@ -39,6 +39,7 @@
 		height: 100%;
 		overflow-y: auto;
 		padding: 2rem 3rem;
+		position: relative;
 	}
 }
 </style>

app/ui/ToastContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const { toasts, remove } = useToast()
+const song = useSong()
 </script>
 
 <template>
-	<div class="toast-container">
+	<div class="toast-container" :class="{ playerShown: song != undefined }">
 		<TransitionGroup name="toast">
 			<div
 				v-for="toast in toasts"
@@ -27,11 +28,17 @@ const { toasts, remove } = useToast()
 	right: 0;
 	z-index: 100;
 
-	padding: 20px;
+	padding: 2rem;
 
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+
+	transition: trasnform 0.2s ease-out;
+}
+
+.playerShown {
+	transform: translateY(-$player-height);
 }
 
 .toast {
@@ -44,7 +51,9 @@ const { toasts, remove } = useToast()
 
 	cursor: pointer;
 
-	transition: transform 0.2s ease, opacity 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		opacity 0.2s ease;
 }
 
 .toast-enter-from {

app/utils/file.ts

@@ -1,3 +1,6 @@
 export const BACKEND_SERVE = `${import.meta.env.VITE_PUBLIC_BACKEND}/static/`
 
 export const GET_FILE = (file: string) => `${BACKEND_SERVE}${file}`
+export const GET_AUDIO_FILE = (file: string) => {
+	return `${GET_FILE(file)}/high.m4a`
+}