Merge dynamic background

app/components/Player/Fullscreen.vue

@@ -1,57 +1,10 @@
 <script setup lang="ts">
 const { fullscreen, close: closeFullscreen } = useFullscreen()
 const song = useSong()
-const backgroundColors = ref(["#24202d", "#302238", "#182b35"])
-const backgroundPosition = ref("8% 14%, 88% 12%, 48% 76%, 0 0")
-
-const randomBackgroundPosition = () => {
-	return [0, 1, 2]
-		.map(() => `${Math.round(Math.random() * 100)}% ${Math.round(Math.random() * 100)}%`)
-		.concat("0 0")
-		.join(", ")
-}
-
-watch(
-	() => song.value?.album.file,
-	async (file) => {
-		if (!file || !import.meta.client) return
-
-		const image = new Image()
-		image.crossOrigin = "anonymous"
-		image.src = GET_FILE(file)
-		try {
-			await image.decode()
-			const canvas = document.createElement("canvas")
-			canvas.width = 3
-			canvas.height = 1
-			const context = canvas.getContext("2d", { willReadFrequently: true })
-			if (!context) return
-			context.drawImage(image, 0, 0, 3, 1)
-			const pixels = context.getImageData(0, 0, 3, 1).data
-			backgroundColors.value = [0, 1, 2].map((index) => {
-				const offset = index * 4
-				return `rgb(${pixels[offset]}, ${pixels[offset + 1]}, ${pixels[offset + 2]})`
-			})
-		} catch {
-			// Keep the default palette when the cover cannot be loaded or sampled.
-		}
-	},
-	{ immediate: true },
-)
-
 const mouseMovedRecently = ref(true)
 
 onMounted(() => {
 	let timeoutId: NodeJS.Timeout
-	let backgroundInterval: NodeJS.Timeout | undefined
-	const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
-
-	if (!reducedMotion.matches) {
-		backgroundPosition.value = randomBackgroundPosition()
-		backgroundInterval = setInterval(() => {
-			backgroundPosition.value = randomBackgroundPosition()
-		}, 9000)
-	}
 
 	const handleMouseMove = () => {
 		mouseMovedRecently.value = true
@@ -73,7 +26,6 @@ onMounted(() => {
 	onUnmounted(() => {
 		window.removeEventListener("mousemove", handleMouseMove)
 		window.removeEventListener("keydown", handleKeydown)
-		if (backgroundInterval) clearInterval(backgroundInterval)
 	})
 })
 
@@ -90,15 +42,12 @@ nuxtApp.hook("page:finish", () => {
 		:class="{ showCursor: mouseMovedRecently }"
 		v-show="fullscreen"
 	>
-		<div
-			class="background"
-			:style="{
-				'--background-color-one': backgroundColors[0],
-				'--background-color-two': backgroundColors[1],
-				'--background-color-three': backgroundColors[2],
-				backgroundPosition,
-			}"
-		/>
+		<template v-if="song">
+			<PlayerFullscreenBackgroundWash
+				:src="GET_FILE(song.album.file)"
+				:active="fullscreen"
+			/>
+		</template>
 
 		<section class="screen-container" v-if="song">
 			<Icon
@@ -131,8 +80,8 @@ nuxtApp.hook("page:finish", () => {
 	top: 0;
 	left: 0;
 
-	width: 200vw;
-	height: 200vh;
+	width: 100vw;
+	height: 100vh;
 	z-index: 150;
 
 	cursor: none;
@@ -142,33 +91,6 @@ nuxtApp.hook("page:finish", () => {
 	}
 }
 
-.background {
-	position: absolute;
-	inset: -25%;
-	background:
-		radial-gradient(ellipse, var(--background-color-one) 0%, transparent 74%),
-		radial-gradient(ellipse, var(--background-color-two) 0%, transparent 76%),
-		radial-gradient(ellipse, var(--background-color-three) 0%, transparent 72%),
-		#15131a;
-	background-repeat: no-repeat;
-	background-size: 48% 48%, 44% 44%, 46% 46%, auto;
-	filter: blur(28px);
-	transition: background-position 9s ease-in-out;
-	will-change: background-position;
-
-	&::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		background-color: rgb(0 0 0 / 55%);
-		pointer-events: none;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.background { transition: none; }
-}
-
 .screen-container {
 	position: fixed;
 	top: 0;
@@ -177,7 +99,7 @@ nuxtApp.hook("page:finish", () => {
 	width: 100vw;
 	height: 100vh;
 
-	background-color: rgba(0, 0, 0, 0.45);
+		background-color: rgba(0, 0, 0, 0.34);
 }
 
 .close-btn {