Applied browser fullscreen

app/components/Player/Fullscreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const fullscreen = useFullscreen()
+const { fullscreen, close: closeFullscreen } = useFullscreen()
 const song = useSong()
 
 const mouseMovedRecently = ref(true)
@@ -26,7 +26,7 @@ onMounted(() => {
 const nuxtApp = useNuxtApp()
 
 nuxtApp.hook("page:finish", () => {
-	fullscreen.value = false
+	closeFullscreen()
 })
 </script>
 
@@ -51,7 +51,7 @@ nuxtApp.hook("page:finish", () => {
 				name="lucide:x"
 				class="close-btn"
 				:class="{ show: mouseMovedRecently }"
-				@click="fullscreen = false"
+				@click="closeFullscreen()"
 			/>
 
 			<div class="content-container" :class="{ lyrics: song.lyrics }">

app/components/Player/Fullscreen/LyricsDisplay.vue

@@ -6,7 +6,7 @@ const { animationDuration, offset, showScrollBar } = defineProps<{
 }>()
 
 const song = useSong()
-const fullscreen = useFullscreen()
+const { fullscreen } = useFullscreen()
 const { secondsPlayed } = usePlayer()
 
 const parsedLyrics = computed(() => {

app/components/Player/index.vue

@@ -39,7 +39,7 @@ const durationFormatted = computed(() =>
 )
 
 const toast = useToast()
-const fullscreen = useFullscreen()
+const { open: openFullscreen } = useFullscreen()
 </script>
 
 <template>
@@ -107,7 +107,7 @@ const fullscreen = useFullscreen()
 					name="lucide:list"
 					@click="toast.show('Not yet implemented')"
 				/>
-				<Icon name="lucide:expand" @click="fullscreen = true" />
+				<Icon name="lucide:expand" @click="openFullscreen()" />
 			</div>
 		</template>
 	</article>