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>

app/composables/useFullscreen.ts

@@ -1 +1,66 @@
-export const useFullscreen = () => useState<boolean>("fullscreen", () => false)
+type FullscreenState = ReturnType<typeof useState<boolean>>
+
+type FullscreenControls = {
+	fullscreen: FullscreenState
+	open: () => Promise<boolean>
+	close: () => Promise<boolean>
+	toggle: () => Promise<boolean>
+}
+
+const syncFullscreenState = (fullscreen: FullscreenState) => {
+	fullscreen.value = Boolean(document.fullscreenElement)
+}
+
+let fullscreenListenerInstalled = false
+
+export const useFullscreen = () => {
+	const fullscreen = useState<boolean>("fullscreen", () => false)
+
+	const open = async () => {
+		fullscreen.value = true
+
+		if (!import.meta.client) return true
+		if (!document.documentElement.requestFullscreen) return true
+
+		try {
+			await document.documentElement.requestFullscreen()
+			return true
+		} catch {
+			fullscreen.value = false
+			return false
+		}
+	}
+
+	const close = async () => {
+		if (import.meta.client && document.fullscreenElement) {
+			try {
+				await document.exitFullscreen()
+			} catch {
+				// Fall through to keep the app state consistent.
+			}
+		}
+
+		fullscreen.value = false
+		return true
+	}
+
+	const toggle = async () => {
+		if (fullscreen.value) return close()
+		return open()
+	}
+
+	if (import.meta.client && !fullscreenListenerInstalled) {
+		fullscreenListenerInstalled = true
+		document.addEventListener("fullscreenchange", () => {
+			syncFullscreenState(fullscreen)
+		})
+		syncFullscreenState(fullscreen)
+	}
+
+	return {
+		fullscreen,
+		open,
+		close,
+		toggle,
+	} as FullscreenControls
+}