Added fullscreen composable and background for fullscreen

app/components/Player/Fullscreen.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const fullscreen = useFullscreen()
+const song = useSong()
+</script>
+
+<template>
+	<section class="fullscreen" v-show="fullscreen">
+		<template v-if="song">
+			<NuxtImg
+				:src="GET_FILE(song.album.file)"
+				:alt="song.name"
+				width="500"
+				height="500"
+				class="background"
+			/>
+		</template>
+
+		<section class="container">
+			<Icon
+				name="lucide:x"
+				class="close-btn show"
+				@click="fullscreen = false"
+			/>
+		</section>
+	</section>
+</template>
+
+<style lang="scss" scoped>
+.fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 200vw;
+	height: 200vh;
+	z-index: 150;
+}
+
+.background {
+	position: absolute;
+	top: -25%;
+	left: -25%;
+
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	filter: blur(40px);
+}
+
+.container {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100vw;
+	height: 100vh;
+
+	background-color: rgba(0, 0, 0, 0.45);
+}
+
+.close-btn {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+
+	cursor: pointer;
+	font-size: 24px;
+	transition: opacity 0.2s ease;
+	opacity: 0;
+
+	&.show {
+		opacity: 1;
+	}
+}
+</style>

app/components/Player/index.vue

@@ -39,6 +39,7 @@ const durationFormatted = computed(() =>
 )
 
 const toast = useToast()
+const fullscreen = useFullscreen()
 </script>
 
 <template>
@@ -106,13 +107,11 @@ const toast = useToast()
 					name="lucide:list"
 					@click="toast.show('Not yet implemented')"
 				/>
-				<Icon
-					name="lucide:expand"
-					@click="toast.show('Not yet implemented')"
-				/>
+				<Icon name="lucide:expand" @click="fullscreen = true" />
 			</div>
 		</template>
 	</article>
+	<PlayerFullscreen />
 </template>
 
 <style lang="scss" scoped>

app/composables/useFullscreen.ts

@@ -0,0 +1 @@
+export const useFullscreen = () => useState<boolean>("fullscreen", () => false)