Added play functionality to album page

app/pages/album/[id].vue

@@ -7,6 +7,8 @@ const { data: albumData } = await useApiFetch<Album>(`/albums/${id.value}`)
 const { data: tracksData } = await useApiFetch<Track[]>(
 	`/albums/${id.value}/tracks`,
 )
+
+const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
 </script>
 
 <template>
@@ -23,8 +25,16 @@ const { data: tracksData } = await useApiFetch<Track[]>(
 			<ArtistName :artists="albumData.artists" class="artist" />
 
 			<div class="buttons">
-				<Button icon-name="lucide:play">Play</Button>
-				<Button icon-name="lucide:shuffle">Shuffle</Button>
+				<Button
+					icon-name="lucide:play"
+					@click="() => playAlbum(tracksData)"
+					>Play</Button
+				>
+				<Button
+					icon-name="lucide:shuffle"
+					@click="() => playShuffledAlbum(tracksData)"
+					>Shuffle</Button
+				>
 			</div>
 		</div>
 	</section>
@@ -35,6 +45,7 @@ const { data: tracksData } = await useApiFetch<Track[]>(
 			:key="track._id"
 			:track="track"
 			:index="i"
+			@play-album-at-index="() => playAlbumAtIndex(tracksData, i)"
 		/>
 	</section>
 </template>

app/plugins/player.ts

@@ -138,7 +138,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 		updateMediaSession()
 	}
 
-	const next = async () => {
+	const next = async (autoplay: boolean = true) => {
 		if (currentSong.value) {
 			prevQueue.value.unshift(currentSong.value)
 		}
@@ -153,7 +153,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 			currentSong.value = queue.value.shift() || null
 		}
 
-		if (currentSong.value) await play()
+		if (currentSong.value && autoplay) await play()
 
 		updateMediaSession()
 	}
@@ -184,6 +184,11 @@ export default defineNuxtPlugin((nuxtApp) => {
 		currentQueue.value.push(song)
 	}
 
+	const addToFrontOfQueue = (song: Track) => {
+		queue.value.unshift(song)
+		currentQueue.value.unshift(song)
+	}
+
 	const clear = () => {
 		queue.value = []
 		currentQueue.value = []
@@ -196,6 +201,35 @@ export default defineNuxtPlugin((nuxtApp) => {
 		queue.value.sort(() => Math.random() - 0.5)
 	}
 
+	// Album
+	const playAlbum = async (songs: Track[]) => {
+		clear()
+
+		songs.forEach((song) => addToQueue(song))
+
+		await next()
+	}
+
+	const playShuffledAlbum = async (songs: Track[]) => {
+		clear()
+
+		songs.forEach((song) => addToQueue(song))
+		shuffle()
+
+		await next()
+	}
+
+	const playAlbumAtIndex = async (songs: Track[], index: number) => {
+		clear()
+		songs.forEach((song) => addToQueue(song))
+
+		for (let i = 0; i < index + 1; i++) {
+			await next(false)
+		}
+
+		await play()
+	}
+
 	// Info
 	const getDuration = () =>
 		new Promise<number>((resolve) => {
@@ -218,8 +252,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 				next,
 				prev,
 				addToQueue,
+				addToFrontOfQueue,
 				clear,
 				shuffle,
+				playAlbum,
+				playShuffledAlbum,
+				playAlbumAtIndex,
 				getDuration,
 				secondsPlayed,
 				duration,