From 78c4a6cb8e4a6b6c2abbefcb92b708ad5d78bf58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Wed, 25 Feb 2026 17:21:31 +0100
Subject: [PATCH] Added fullscreen composable and background for fullscreen

---
 app/components/Player/Fullscreen.vue | 75 ++++++++++++++++++++++++++++
 app/components/Player/index.vue      |  7 ++-
 app/composables/useFullscreen.ts     |  1 +
 3 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 app/components/Player/Fullscreen.vue
 create mode 100644 app/composables/useFullscreen.ts

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
new file mode 100644
index 0000000..c002134
--- /dev/null
+++ b/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>
diff --git a/app/components/Player/index.vue b/app/components/Player/index.vue
index 2e7501f..ec78d9d 100644
--- a/app/components/Player/index.vue
+++ b/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>
diff --git a/app/composables/useFullscreen.ts b/app/composables/useFullscreen.ts
new file mode 100644
index 0000000..cf3c848
--- /dev/null
+++ b/app/composables/useFullscreen.ts
@@ -0,0 +1 @@
+export const useFullscreen = () => useState<boolean>("fullscreen", () => false)