From 0eaecf6fd3456515cbe68bf72438b34a22f357e1 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Wed, 21 May 2025 19:03:08 +0000
Subject: [PATCH] Refactor player internals and sync

Replace `TrackInstance` with direct `TrackManifest` usage in the player
core. Introduce a `SyncRoom` class and related hooks (`useSyncRoom`,
`useLyrics`, etc.) for real-time state synchronization and shared lyrics
display. Enhance player indicators to show detailed audio format metadata
(codec, sample rate, bit depth). Relocate the Indicators component and update
the Lyrics page to utilize these new features and components.
---
 .../src/components/Player/Actions/index.jsx   |  26 +-
 .../src/components/Player/Actions/index.less  |   2 +-
 .../src/components/Player/Controls/index.jsx  |  19 +-
 .../components/Player/Indicators/index.jsx    |  84 +++++
 packages/app/src/components/Player/index.jsx  |  57 +---
 packages/app/src/components/Player/index.less |   9 +
 .../app/src/cores/player/classes/AudioBase.js | 315 +++++++++++++++---
 .../src/cores/player/classes/PlayerState.js   |  66 ++--
 .../app/src/cores/player/classes/Services.js  |  96 +++---
 .../app/src/cores/player/classes/SyncRoom.js  | 202 +++++++++++
 .../src/cores/player/classes/TrackInstance.js | 100 ------
 .../src/cores/player/classes/TrackManifest.js |  38 ++-
 .../player/helpers/findInitializationChunk.js |  81 +++++
 .../helpers/handleInlineDashManifest.js       |  15 +
 .../helpers/parseSourceFormatMetadata.js      |  12 +
 packages/app/src/cores/player/player.core.js  | 132 ++++----
 packages/app/src/hooks/index.js               |   2 -
 .../app/src/hooks/useCoverAnalysis/index.js   |  43 +++
 packages/app/src/hooks/useFullScreen/index.js |  47 +++
 packages/app/src/hooks/useLyrics/index.js     |  69 ++++
 packages/app/src/hooks/useSyncRoom/index.js   |  60 ++++
 .../app/src/hooks/useTrackManifest/index.js   |  19 ++
 .../components/@mobile/bottomBar/index.jsx    |   4 +-
 .../pages/lyrics/components/Background.jsx    |  22 ++
 .../lyrics/components/controller/index.jsx    | 107 +-----
 .../pages/lyrics/components/text/index.jsx    |  29 +-
 packages/app/src/pages/lyrics/index.jsx       | 186 +++--------
 packages/app/src/pages/lyrics/index.less      |  52 ++-
 28 files changed, 1266 insertions(+), 628 deletions(-)
 create mode 100644 packages/app/src/components/Player/Indicators/index.jsx
 create mode 100644 packages/app/src/cores/player/classes/SyncRoom.js
 delete mode 100644 packages/app/src/cores/player/classes/TrackInstance.js
 create mode 100644 packages/app/src/cores/player/helpers/findInitializationChunk.js
 create mode 100644 packages/app/src/cores/player/helpers/handleInlineDashManifest.js
 create mode 100644 packages/app/src/cores/player/helpers/parseSourceFormatMetadata.js
 delete mode 100755 packages/app/src/hooks/index.js
 create mode 100644 packages/app/src/hooks/useCoverAnalysis/index.js
 create mode 100644 packages/app/src/hooks/useFullScreen/index.js
 create mode 100644 packages/app/src/hooks/useLyrics/index.js
 create mode 100644 packages/app/src/hooks/useSyncRoom/index.js
 create mode 100644 packages/app/src/hooks/useTrackManifest/index.js
 create mode 100644 packages/app/src/pages/lyrics/components/Background.jsx

diff --git a/packages/app/src/components/Player/Actions/index.jsx b/packages/app/src/components/Player/Actions/index.jsx
index a70b2976..b996fc4b 100755
--- a/packages/app/src/components/Player/Actions/index.jsx
+++ b/packages/app/src/components/Player/Actions/index.jsx
@@ -9,28 +9,25 @@ import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 import "./index.less"
 
 const ExtraActions = (props) => {
-	const [trackInstance, setTrackInstance] = React.useState({})
+	const [track, setTrack] = React.useState({})
 
 	const onPlayerStateChange = React.useCallback((state) => {
-		const instance = app.cores.player.track()
+		const track = app.cores.player.track()
 
-		if (instance) {
-			setTrackInstance(instance)
+		if (track) {
+			setTrack(track)
 		}
 	}, [])
 
-	const [playerState] = usePlayerStateContext(onPlayerStateChange)
+	usePlayerStateContext(onPlayerStateChange)
 
 	const handleClickLike = async () => {
-		if (!trackInstance) {
+		if (!track) {
 			console.error("Cannot like a track if nothing is playing")
 			return false
 		}
 
-		await trackInstance.manifest.serviceOperations.toggleItemFavorite(
-			"tracks",
-			trackInstance.manifest._id,
-		)
+		await track.serviceOperations.toggleItemFavorite("tracks", track._id)
 	}
 
 	return (
@@ -39,18 +36,15 @@ const ExtraActions = (props) => {
 				<Button
 					type="ghost"
 					icon={<Icons.MdAbc />}
-					disabled={!trackInstance?.manifest?.lyrics_enabled}
+					disabled={!track?.lyrics_enabled}
 				/>
 			)}
 
 			{!app.isMobile && (
 				<LikeButton
-					liked={
-						trackInstance?.manifest?.serviceOperations
-							?.isItemFavorited
-					}
+					liked={track?.serviceOperations?.isItemFavorited}
 					onClick={handleClickLike}
-					disabled={!trackInstance?.manifest?._id}
+					disabled={!track?._id}
 				/>
 			)}
 
diff --git a/packages/app/src/components/Player/Actions/index.less b/packages/app/src/components/Player/Actions/index.less
index 7ef2ef0f..048a0efd 100644
--- a/packages/app/src/components/Player/Actions/index.less
+++ b/packages/app/src/components/Player/Actions/index.less
@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 
-	width: 70%;
+	width: 50%;
 	margin: auto;
 
 	padding: 2px 25px;
diff --git a/packages/app/src/components/Player/Controls/index.jsx b/packages/app/src/components/Player/Controls/index.jsx
index 044d45ad..c455372d 100755
--- a/packages/app/src/components/Player/Controls/index.jsx
+++ b/packages/app/src/components/Player/Controls/index.jsx
@@ -39,21 +39,21 @@ const EventsHandlers = {
 
 		const track = app.cores.player.track()
 
-		return await track.manifest.serviceOperations.toggleItemFavorite(
+		return await track.serviceOperations.toggleItemFavorite(
 			"track",
-			ctx.track_manifest._id,
+			track._id,
 		)
 	},
 }
 
 const Controls = (props) => {
-	const [trackInstance, setTrackInstance] = React.useState({})
+	const [trackManifest, setTrackManifest] = React.useState({})
 
 	const onPlayerStateChange = React.useCallback((state) => {
-		const instance = app.cores.player.track()
+		const track = app.cores.player.track()
 
-		if (instance) {
-			setTrackInstance(instance)
+		if (track) {
+			setTrackManifest(track)
 		}
 	}, [])
 
@@ -131,12 +131,9 @@ const Controls = (props) => {
 
 			{app.isMobile && (
 				<LikeButton
-					liked={
-						trackInstance?.manifest?.serviceOperations
-							?.isItemFavorited
-					}
+					liked={trackManifest?.serviceOperations?.isItemFavorited}
 					onClick={() => handleAction("like")}
-					disabled={!trackInstance?.manifest?._id}
+					disabled={!trackManifest?._id}
 				/>
 			)}
 		</div>
diff --git a/packages/app/src/components/Player/Indicators/index.jsx b/packages/app/src/components/Player/Indicators/index.jsx
new file mode 100644
index 00000000..b2918915
--- /dev/null
+++ b/packages/app/src/components/Player/Indicators/index.jsx
@@ -0,0 +1,84 @@
+import React from "react"
+import { Tooltip } from "antd"
+import { Icons } from "@components/Icons"
+
+function getIndicators(track, playerState) {
+	const indicators = []
+
+	if (playerState.live) {
+		indicators.push({
+			icon: <Icons.FiRadio style={{ color: "var(--colorPrimary)" }} />,
+		})
+	}
+
+	if (playerState.format_metadata && playerState.format_metadata?.trackInfo) {
+		const dmuxData = playerState.format_metadata
+
+		// this commonly used my mpd's
+		const trackInfo = dmuxData.trackInfo[0]
+		const trackAudio = trackInfo?.audio
+
+		const codec = trackInfo?.codecName ?? dmuxData.codec
+		const sampleRate = trackAudio?.samplingFrequency ?? dmuxData.sampleRate
+		const bitDepth = trackAudio?.bitDepth ?? dmuxData.bitsPerSample
+		const bitrate = trackAudio?.bitrate ?? dmuxData.bitrate
+
+		if (codec) {
+			if (codec.toLowerCase().includes("flac")) {
+				indicators.push({
+					icon: <Icons.Lossless />,
+					tooltip: `${sampleRate / 1000} kHz / ${bitDepth ?? 16} Bits`,
+				})
+			}
+
+			if (codec.toLowerCase().includes("vorbis")) {
+				indicators.push({
+					icon: <Icons.Ogg />,
+					tooltip: `Vorbis ${sampleRate / 1000} kHz / ${bitrate / 1000} kbps`,
+				})
+			}
+		}
+	}
+
+	return indicators
+}
+
+const Indicators = ({ track, playerState }) => {
+	if (!track) {
+		return null
+	}
+
+	const indicators = React.useMemo(
+		() => getIndicators(track, playerState),
+		[track, playerState],
+	)
+
+	if (indicators.length === 0) {
+		return null
+	}
+
+	return (
+		<div className="toolbar_player_indicators_wrapper">
+			<div className="toolbar_player_indicators">
+				{indicators.map((indicator, index) => {
+					if (indicator.tooltip) {
+						return (
+							<Tooltip
+								key={indicators.length}
+								title={indicator.tooltip}
+							>
+								{indicator.icon}
+							</Tooltip>
+						)
+					}
+
+					return React.cloneElement(indicator.icon, {
+						key: index,
+					})
+				})}
+			</div>
+		</div>
+	)
+}
+
+export default Indicators
diff --git a/packages/app/src/components/Player/index.jsx b/packages/app/src/components/Player/index.jsx
index 887635f7..804440f6 100755
--- a/packages/app/src/components/Player/index.jsx
+++ b/packages/app/src/components/Player/index.jsx
@@ -9,6 +9,7 @@ import LiveInfo from "@components/Player/LiveInfo"
 import SeekBar from "@components/Player/SeekBar"
 import Controls from "@components/Player/Controls"
 import Actions from "@components/Player/Actions"
+import Indicators from "@components/Player/Indicators"
 
 import RGBStringToValues from "@utils/rgbToValues"
 
@@ -25,40 +26,6 @@ function isOverflown(parent, element) {
 	return elementRect.width > parentRect.width
 }
 
-const Indicators = ({ track, playerState }) => {
-	if (!track) {
-		return null
-	}
-
-	const indicators = []
-
-	if (track.metadata) {
-		if (track.metadata.lossless) {
-			indicators.push(
-				<antd.Tooltip title="Lossless Audio">
-					<Icons.Lossless />
-				</antd.Tooltip>,
-			)
-		}
-	}
-
-	if (playerState.live) {
-		indicators.push(
-			<Icons.FiRadio style={{ color: "var(--colorPrimary)" }} />,
-		)
-	}
-
-	if (indicators.length === 0) {
-		return null
-	}
-
-	return (
-		<div className="toolbar_player_indicators_wrapper">
-			<div className="toolbar_player_indicators">{indicators}</div>
-		</div>
-	)
-}
-
 const ServiceIndicator = (props) => {
 	if (!props.service) {
 		return null
@@ -96,14 +63,12 @@ const Player = (props) => {
 		}
 	}
 
-	const { title, artist, service, cover_analysis, cover } =
-		playerState.track_manifest ?? {}
+	const { title, artist, service, cover } = playerState.track_manifest ?? {}
 
 	const playing = playerState.playback_status === "playing"
 	const stopped = playerState.playback_status === "stopped"
 
 	const titleText = !playing && stopped ? "Stopped" : (title ?? "Untitled")
-	const subtitleText = ""
 
 	React.useEffect(() => {
 		const titleIsOverflown = isOverflown(
@@ -115,13 +80,11 @@ const Player = (props) => {
 	}, [title])
 
 	React.useEffect(() => {
-		const trackInstance = app.cores.player.track()
+		const track = app.cores.player.track()
 
-		if (playerState.track_manifest && trackInstance) {
-			if (
-				typeof trackInstance.manifest.analyzeCoverColor === "function"
-			) {
-				trackInstance.manifest
+		if (playerState.track_manifest && track) {
+			if (typeof track.analyzeCoverColor === "function") {
+				track
 					.analyzeCoverColor()
 					.then((analysis) => {
 						setCoverAnalysis(analysis)
@@ -203,9 +166,11 @@ const Player = (props) => {
 							</Marquee>
 						)}
 
-						<p className="toolbar_player_info_subtitle">
-							{artist ?? ""}
-						</p>
+						{!playerState.radioId && (
+							<p className="toolbar_player_info_subtitle">
+								{artist ?? ""}
+							</p>
+						)}
 					</div>
 
 					{playerState.radioId && (
diff --git a/packages/app/src/components/Player/index.less b/packages/app/src/components/Player/index.less
index 6a21b0df..479ef956 100755
--- a/packages/app/src/components/Player/index.less
+++ b/packages/app/src/components/Player/index.less
@@ -159,6 +159,13 @@
 			}
 
 			.toolbar_player_info_subtitle {
+				display: inline-block;
+
+				overflow: hidden;
+				white-space: nowrap;
+
+				text-overflow: ellipsis;
+
 				font-size: 0.8rem;
 				font-weight: 400;
 
@@ -246,6 +253,8 @@
 
 		border-radius: 12px;
 
+		gap: 10px;
+
 		background-color: rgba(var(--layoutBackgroundColor), 0.7);
 		-webkit-backdrop-filter: blur(5px);
 		backdrop-filter: blur(5px);
diff --git a/packages/app/src/cores/player/classes/AudioBase.js b/packages/app/src/cores/player/classes/AudioBase.js
index 6e9a2ae0..67f668b4 100644
--- a/packages/app/src/cores/player/classes/AudioBase.js
+++ b/packages/app/src/cores/player/classes/AudioBase.js
@@ -1,10 +1,17 @@
-import { MediaPlayer, Debug } from "dashjs"
+import shaka from "shaka-player/dist/shaka-player.compiled.js"
+
 import PlayerProcessors from "./PlayerProcessors"
 import AudioPlayerStorage from "../player.storage"
+import TrackManifest from "../classes/TrackManifest"
+
+import findInitializationChunk from "../helpers/findInitializationChunk"
+import parseSourceFormatMetadata from "../helpers/parseSourceFormatMetadata"
+import handleInlineDashManifest from "../helpers/handleInlineDashManifest"
 
 export default class AudioBase {
 	constructor(player) {
 		this.player = player
+		this.console = player.console
 	}
 
 	audio = new Audio()
@@ -16,6 +23,7 @@ export default class AudioBase {
 	processors = {}
 
 	waitUpdateTimeout = null
+	_firstSegmentReceived = false
 
 	initialize = async () => {
 		// create a audio context
@@ -26,73 +34,289 @@ export default class AudioBase {
 			latencyHint: "playback",
 		})
 
-		// configure some settings for audio
+		// configure some settings for audio with optimized settings
 		this.audio.crossOrigin = "anonymous"
-		this.audio.preload = "metadata"
+		this.audio.preload = "auto"
 		this.audio.loop = this.player.state.playback_mode === "repeat"
+		this.audio.volume = 1
 
 		// listen all events
 		for (const [key, value] of Object.entries(this.audioEvents)) {
 			this.audio.addEventListener(key, value)
 		}
 
-		// setup demuxer for mpd
+		// setup shaka player for mpd
 		this.createDemuxer()
 
-		// create element source
+		// create element source with low latency buffer
 		this.elementSource = this.context.createMediaElementSource(this.audio)
 
-		// initialize audio processors
-		await this.processorsManager.initialize()
-		await this.processorsManager.attachAllNodes()
+		await this.processorsManager.initialize(),
+			await this.processorsManager.attachAllNodes()
 	}
 
-	createDemuxer() {
-		this.demuxer = MediaPlayer().create()
+	itemInit = async (manifest) => {
+		if (!manifest) {
+			return null
+		}
 
-		this.demuxer.updateSettings({
-			streaming: {
-				buffer: {
-					resetSourceBuffersForTrackSwitch: true,
+		if (
+			typeof manifest === "string" ||
+			(!manifest.source && !manifest.dash_manifest)
+		) {
+			this.console.time("resolve")
+			manifest = await this.player.serviceProviders.resolve(manifest)
+			this.console.timeEnd("resolve")
+		}
+
+		if (!(manifest instanceof TrackManifest)) {
+			this.console.time("init manifest")
+			manifest = new TrackManifest(manifest, this.player)
+			this.console.timeEnd("init manifest")
+		}
+
+		if (manifest.mpd_mode === true && !manifest.dash_manifest) {
+			this.console.time("fetch dash manifest")
+			manifest.dash_manifest = await fetch(manifest.source).then((r) =>
+				r.text(),
+			)
+			this.console.timeEnd("fetch dash manifest")
+		}
+
+		return manifest
+	}
+
+	play = async (manifest, params = {}) => {
+		// Pre-initialize audio context if needed
+		if (this.context.state === "suspended") {
+			await this.context.resume()
+		}
+
+		manifest = await this.itemInit(manifest)
+
+		this.console.time("load source")
+		await this.loadSource(manifest)
+		this.console.timeEnd("load source")
+
+		this.player.queue.currentItem = manifest
+		this.player.state.track_manifest = manifest.toSeriableObject()
+		this.player.nativeControls.update(manifest.toSeriableObject())
+
+		// reset audio properties
+		this.audio.currentTime = params.time ?? 0
+		this.audio.volume = 1
+
+		if (this.processors && this.processors.gain) {
+			this.processors.gain.set(this.player.state.volume)
+		}
+
+		if (this.audio.paused) {
+			try {
+				this.console.time("play")
+				await this.audio.play()
+				this.console.timeEnd("play")
+			} catch (error) {
+				this.console.error(
+					"Error during audio.play():",
+					error,
+					"State:",
+					this.audio.readyState,
+				)
+			}
+		}
+
+		let initChunk = manifest.source
+
+		if (this.demuxer && manifest.dash_manifest) {
+			initChunk = findInitializationChunk(
+				manifest.source,
+				manifest.dash_manifest,
+			)
+		}
+
+		try {
+			this.player.state.format_metadata =
+				await parseSourceFormatMetadata(initChunk)
+		} catch (e) {
+			this.player.state.format_metadata = null
+			console.warn("Could not parse audio metadata from source:", e)
+		}
+	}
+
+	pause = async () => {
+		this.audio.pause()
+	}
+
+	resume = async () => {
+		this.audio.play()
+	}
+
+	async loadSource(manifest) {
+		if (!manifest || !(manifest instanceof TrackManifest)) {
+			return null
+		}
+
+		// reset some state
+		this._firstSegmentReceived = false
+		this.player.state.format_metadata = null
+
+		const isMpd = manifest.mpd_mode
+
+		if (isMpd) {
+			const audioSrcAtt = this.audio.getAttribute("src")
+
+			if (audioSrcAtt && !audioSrcAtt.startsWith("blob:")) {
+				this.audio.removeAttribute("src")
+				this.audio.load()
+			}
+
+			if (!this.demuxer) {
+				this.console.log("Creating demuxer cause not initialized")
+				this.createDemuxer()
+			}
+
+			if (manifest._preloaded) {
+				this.console.log(
+					`using preloaded source >`,
+					manifest._preloaded,
+				)
+
+				return await this.demuxer.load(manifest._preloaded)
+			}
+
+			const inlineManifest =
+				"inline://" + manifest.source + "::" + manifest.dash_manifest
+
+			return await this.demuxer
+				.load(inlineManifest, 0, "application/dash+xml")
+				.catch((err) => {
+					this.console.error("Error loading inline manifest", err)
+				})
+		}
+
+		// if not using demuxer, destroy previous instance
+		if (this.demuxer) {
+			await this.demuxer.unload()
+			await this.demuxer.destroy()
+			this.demuxer = null
+		}
+
+		// load source
+		this.audio.src = manifest.source
+		return this.audio.load()
+	}
+
+	async createDemuxer() {
+		// Destroy previous instance if exists
+		if (this.demuxer) {
+			await this.demuxer.unload()
+			await this.demuxer.detach()
+			await this.demuxer.destroy()
+		}
+
+		this.demuxer = new shaka.Player()
+
+		this.demuxer.attach(this.audio)
+
+		this.demuxer.configure({
+			manifest: {
+				//updatePeriod: 5,
+				disableVideo: true,
+				disableText: true,
+				dash: {
+					ignoreMinBufferTime: true,
+					ignoreMaxSegmentDuration: true,
+					autoCorrectDrift: false,
+					enableFastSwitching: true,
+					useStreamOnceInPeriodFlattening: false,
 				},
 			},
-			// debug: {
-			// 	logLevel: Debug.LOG_LEVEL_DEBUG,
-			// },
+			streaming: {
+				bufferingGoal: 15,
+				rebufferingGoal: 1,
+				bufferBehind: 30,
+				stallThreshold: 0.5,
+			},
 		})
 
-		this.demuxer.initialize(this.audio, null, false)
+		shaka.net.NetworkingEngine.registerScheme(
+			"inline",
+			handleInlineDashManifest,
+		)
+
+		this.demuxer.addEventListener("error", (event) => {
+			console.error("Demuxer error", event)
+		})
+	}
+
+	timeTick = async () => {
+		if (
+			!this.audio ||
+			!this.audio.duration ||
+			this.audio.duration === Infinity
+		) {
+			return false
+		}
+
+		const remainingTime = this.audio.duration - this.audio.currentTime
+
+		// if remaining time is less than 3s, try to init next item
+		if (parseInt(remainingTime) <= 10) {
+			// check if queue has next item
+			if (this.player.queue.nextItems[0]) {
+				this.player.queue.nextItems[0] = await this.itemInit(
+					this.player.queue.nextItems[0],
+				)
+
+				if (
+					this.demuxer &&
+					this.player.queue.nextItems[0].source &&
+					this.player.queue.nextItems[0].mpd_mode &&
+					!this.player.queue.nextItems[0]._preloaded
+				) {
+					const manifest = this.player.queue.nextItems[0]
+
+					// preload next item
+					this.console.time("preload next item")
+					this.player.queue.nextItems[0]._preloaded =
+						await this.demuxer.preload(
+							"inline://" +
+								manifest.source +
+								"::" +
+								manifest.dash_manifest,
+							0,
+							"application/dash+xml",
+						)
+					this.console.timeEnd("preload next item")
+				}
+			}
+		}
 	}
 
 	flush() {
 		this.audio.pause()
-		this.audio.src = null
 		this.audio.currentTime = 0
-
-		if (this.demuxer) {
-			this.demuxer.destroy()
-		}
-
 		this.createDemuxer()
 	}
 
 	audioEvents = {
 		ended: () => {
-			this.player.next()
-		},
-		loadeddata: () => {
-			this.player.state.loading = false
-		},
-		loadedmetadata: () => {
-			if (this.audio.duration === Infinity) {
-				this.player.state.live = true
-			} else {
-				this.player.state.live = false
+			try {
+				this.player.next()
+			} catch (e) {
+				console.error(e)
 			}
 		},
 		play: () => {
 			this.player.state.playback_status = "playing"
 		},
+		pause: () => {
+			this.player.state.playback_status = "paused"
+
+			if (typeof this._timeTickInterval !== "undefined") {
+				clearInterval(this._timeTickInterval)
+			}
+		},
 		playing: () => {
 			this.player.state.loading = false
 
@@ -102,15 +326,24 @@ export default class AudioBase {
 				clearTimeout(this.waitUpdateTimeout)
 				this.waitUpdateTimeout = null
 			}
+
+			if (typeof this._timeTickInterval !== "undefined") {
+				clearInterval(this._timeTickInterval)
+			}
+
+			this.timeTick()
+
+			this._timeTickInterval = setInterval(this.timeTick, 1000)
 		},
-		pause: () => {
-			this.player.state.playback_status = "paused"
+		loadeddata: () => {
+			this.player.state.loading = false
 		},
-		durationchange: () => {
-			this.player.eventBus.emit(
-				`player.durationchange`,
-				this.audio.duration,
-			)
+		loadedmetadata: () => {
+			if (this.audio.duration === Infinity) {
+				this.player.state.live = true
+			} else {
+				this.player.state.live = false
+			}
 		},
 		waiting: () => {
 			if (this.waitUpdateTimeout) {
diff --git a/packages/app/src/cores/player/classes/PlayerState.js b/packages/app/src/cores/player/classes/PlayerState.js
index c2d71115..a43c1057 100644
--- a/packages/app/src/cores/player/classes/PlayerState.js
+++ b/packages/app/src/cores/player/classes/PlayerState.js
@@ -2,36 +2,48 @@ import { Observable } from "object-observer"
 import AudioPlayerStorage from "../player.storage"
 
 export default class PlayerState {
-    static defaultState = {
-        loading: false,
-        playback_status: "stopped",
-        track_manifest: null,
+	static defaultState = {
+		loading: false,
 
-        muted: app.isMobile ? false : (AudioPlayerStorage.get("mute") ?? false),
-        volume: app.isMobile ? 1 : (AudioPlayerStorage.get("volume") ?? 0.3),
-        playback_mode: AudioPlayerStorage.get("mode") ?? "normal",
-    }
+		playback_status: "stopped",
+		playback_mode: AudioPlayerStorage.get("mode") ?? "normal",
 
-    constructor(player) {
-        this.player = player
+		track_manifest: null,
+		demuxer_metadata: null,
 
-        this.state = Observable.from(PlayerState.defaultState)
+		muted: app.isMobile ? false : (AudioPlayerStorage.get("mute") ?? false),
+		volume: app.isMobile ? 1 : (AudioPlayerStorage.get("volume") ?? 0.3),
+	}
 
-        Observable.observe(this.state, async (changes) => {
-            try {
-                changes.forEach((change) => {
-                    if (change.type === "update") {
-                        const stateKey = change.path[0]
+	constructor(player) {
+		this.player = player
 
-                        this.player.eventBus.emit(`player.state.update:${stateKey}`, change.object[stateKey])
-                        this.player.eventBus.emit("player.state.update", change.object)
-                    }
-                })
-            } catch (error) {
-                this.player.console.error(`Failed to dispatch state updater >`, error)
-            }
-        })
+		this.state = Observable.from(PlayerState.defaultState)
 
-        return this.state
-    }
-}
\ No newline at end of file
+		Observable.observe(this.state, async (changes) => {
+			try {
+				changes.forEach((change) => {
+					if (change.type === "update") {
+						const stateKey = change.path[0]
+
+						this.player.eventBus.emit(
+							`player.state.update:${stateKey}`,
+							change.object[stateKey],
+						)
+						this.player.eventBus.emit(
+							"player.state.update",
+							change.object,
+						)
+					}
+				})
+			} catch (error) {
+				this.player.console.error(
+					`Failed to dispatch state updater >`,
+					error,
+				)
+			}
+		})
+
+		return this.state
+	}
+}
diff --git a/packages/app/src/cores/player/classes/Services.js b/packages/app/src/cores/player/classes/Services.js
index 2b2e2c66..e2c492f8 100755
--- a/packages/app/src/cores/player/classes/Services.js
+++ b/packages/app/src/cores/player/classes/Services.js
@@ -1,59 +1,71 @@
 import ComtyMusicServiceInterface from "../providers/comtymusic"
 
 export default class ServiceProviders {
-    providers = [
-        // add by default here
-        new ComtyMusicServiceInterface()
-    ]
+	providers = [
+		// add by default here
+		new ComtyMusicServiceInterface(),
+	]
 
-    findProvider(providerId) {
-        return this.providers.find((provider) => provider.constructor.id === providerId)
-    }
+	findProvider(providerId) {
+		return this.providers.find(
+			(provider) => provider.constructor.id === providerId,
+		)
+	}
 
-    register(provider) {
-        this.providers.push(provider)
-    }
+	register(provider) {
+		this.providers.push(provider)
+	}
 
-    has(providerId) {
-        return this.providers.some((provider) => provider.constructor.id === providerId)
-    }
+	has(providerId) {
+		return this.providers.some(
+			(provider) => provider.constructor.id === providerId,
+		)
+	}
 
-    operation = async (operationName, providerId, manifest, args) => {
-        const provider = await this.findProvider(providerId)
+	operation = async (operationName, providerId, manifest, args) => {
+		const provider = await this.findProvider(providerId)
 
-        if (!provider) {
-            console.error(`Failed to resolve manifest, provider [${providerId}] not registered`)
-            return manifest
-        }
+		if (!provider) {
+			console.error(
+				`Failed to resolve manifest, provider [${providerId}] not registered`,
+			)
+			return manifest
+		}
 
-        const operationFn = provider[operationName]
+		const operationFn = provider[operationName]
 
-        if (typeof operationFn !== "function") {
-            console.error(`Failed to resolve manifest, provider [${providerId}] operation [${operationName}] not found`)
-            return manifest
-        }
+		if (typeof operationFn !== "function") {
+			console.error(
+				`Failed to resolve manifest, provider [${providerId}] operation [${operationName}] not found`,
+			)
+			return manifest
+		}
 
-        return await operationFn(manifest, args)
-    }
+		return await operationFn(manifest, args)
+	}
 
-    resolve = async (providerId, manifest) => {
-        const provider = await this.findProvider(providerId)
+	resolve = async (manifest) => {
+		let providerId = manifest.service ?? "default"
 
-        if (!provider) {
-            console.error(`Failed to resolve manifest, provider [${providerId}] not registered`)
-            return manifest
-        }
+		const provider = this.findProvider(providerId)
 
-        return await provider.resolve(manifest)
-    }
+		if (!provider) {
+			console.error(
+				`Failed to resolve manifest, provider [${providerId}] not registered`,
+			)
+			return manifest
+		}
 
-    resolveMany = async (manifests) => {
-        manifests = manifests.map(async (manifest) => {
-            return await this.resolve(manifest.service ?? "default", manifest)
-        })
+		return await provider.resolve(manifest)
+	}
 
-        manifests = await Promise.all(manifests)
+	resolveMany = async (manifests) => {
+		manifests = manifests.map(async (manifest) => {
+			return await this.resolve(manifest)
+		})
 
-        return manifests
-    }
-}
\ No newline at end of file
+		manifests = await Promise.all(manifests)
+
+		return manifests
+	}
+}
diff --git a/packages/app/src/cores/player/classes/SyncRoom.js b/packages/app/src/cores/player/classes/SyncRoom.js
new file mode 100644
index 00000000..6b332b4b
--- /dev/null
+++ b/packages/app/src/cores/player/classes/SyncRoom.js
@@ -0,0 +1,202 @@
+import { RTEngineClient } from "linebridge-client"
+import SessionModel from "@models/session"
+
+export default class SyncRoom {
+	constructor(player) {
+		this.player = player
+	}
+
+	static pushInterval = 1000
+	static maxTimeOffset = parseFloat(0.15)
+
+	state = {
+		joined_room: null,
+		last_track_id: null,
+	}
+
+	pushInterval = null
+
+	socket = null
+
+	start = async () => {
+		if (!this.socket) {
+			await this.createSocket()
+		}
+
+		await this.pushState()
+		setInterval(this.pushState, SyncRoom.pushInterval)
+
+		this.player.eventBus.on("player.state.update", this.pushState)
+
+		this.socket.on(
+			`sync_room:${app.userData._id}:request_lyrics`,
+			async () => {
+				let lyrics = null
+
+				if (this.player.queue.currentItem) {
+					lyrics =
+						await this.player.queue.currentItem.manifest.serviceOperations.fetchLyrics(
+							{
+								preferTranslation: false,
+							},
+						)
+				}
+
+				this.socket.emit(
+					`sync_room:${app.userData._id}:request_lyrics`,
+					lyrics,
+				)
+			},
+		)
+	}
+
+	stop = async () => {
+		if (this.pushInterval) {
+			clearInterval(this.pushInterval)
+		}
+
+		if (this.socket) {
+			await this.socket.destroy()
+		}
+	}
+
+	pushState = async () => {
+		if (!this.socket) {
+			return null
+		}
+
+		let track_manifest = null
+		const currentItem = this.player.queue.currentItem
+
+		if (currentItem) {
+			track_manifest = {
+				...currentItem.toSeriableObject(),
+			}
+		}
+
+		// check if has changed the track
+		if (
+			this.state.last_track_id &&
+			this.state.last_track_id !== track_manifest?._id
+		) {
+			// try to get lyrics
+			const lyrics = await currentItem.serviceOperations
+				.fetchLyrics()
+				.catch(() => null)
+
+			this.socket.emit(`sync_room:push_lyrics`, lyrics)
+		}
+
+		this.state.last_track_id = track_manifest?._id
+
+		await this.socket.emit(`sync_room:push`, {
+			...this.player.state,
+			track_manifest: track_manifest,
+			duration: this.player.duration(),
+			currentTime: this.player.seek(),
+		})
+	}
+
+	syncState = async (data) => {
+		console.log(data)
+
+		if (!data || !data.track_manifest) {
+			return false
+		}
+
+		// first check if manifest id is different
+		if (
+			!this.player.state.track_manifest ||
+			data.track_manifest._id !== this.player.state.track_manifest._id
+		) {
+			if (data.track_manifest && data.track_manifest.encoded_manifest) {
+				let mpd = new Blob(
+					[window.atob(data.track_manifest.encoded_manifest)],
+					{
+						type: "application/dash+xml",
+					},
+				)
+
+				data.track_manifest.dash_manifest = URL.createObjectURL(mpd)
+			}
+
+			// start the player
+			this.player.start(data.track_manifest)
+		}
+
+		// check if currentTime is more than maxTimeOffset
+		const serverTime = data.currentTime ?? 0
+		const currentTime = this.player.seek()
+		const offset = serverTime - currentTime
+
+		console.log({
+			serverTime: serverTime,
+			currentTime: currentTime,
+			maxTimeOffset: SyncRoom.maxTimeOffset,
+			offset: offset,
+		})
+
+		if (
+			typeof serverTime === "number" &&
+			typeof currentTime === "number" &&
+			Math.abs(offset) > SyncRoom.maxTimeOffset
+		) {
+			// seek to currentTime
+			this.player.seek(serverTime)
+		}
+
+		// check if playback is paused
+		if (
+			!app.cores.player.base().audio.paused &&
+			data.playback_status === "paused"
+		) {
+			this.player.pausePlayback()
+		}
+
+		if (
+			app.cores.player.base().audio.paused &&
+			data.playback_status === "playing"
+		) {
+			this.player.resumePlayback()
+		}
+	}
+
+	join = async (user_id) => {
+		if (!this.socket) {
+			await this.createSocket()
+		}
+
+		this.socket.emit(`sync_room:join`, user_id)
+
+		this.socket.on(`sync:receive`, this.syncState)
+
+		this.state.joined_room = {
+			user_id: user_id,
+			members: [],
+		}
+	}
+
+	leave = async () => {
+		await this.socket.emit(`sync_room:leave`, this.state.joined_room)
+
+		this.state.joined_room = null
+
+		if (this.socket) {
+			await this.socket.disconnect()
+		}
+	}
+
+	createSocket = async () => {
+		if (this.socket) {
+			await this.socket.disconnect()
+		}
+
+		this.socket = new RTEngineClient({
+			refName: "sync-room",
+			url: app.cores.api.client().mainOrigin + "/music",
+			token: SessionModel.token,
+		})
+
+		await this.socket.connect()
+	}
+}
diff --git a/packages/app/src/cores/player/classes/TrackInstance.js b/packages/app/src/cores/player/classes/TrackInstance.js
deleted file mode 100644
index d8069ba6..00000000
--- a/packages/app/src/cores/player/classes/TrackInstance.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import TrackManifest from "./TrackManifest"
-
-export default class TrackInstance {
-	constructor(manifest, player) {
-		if (typeof manifest === "undefined") {
-			throw new Error("Manifest is required")
-		}
-
-		if (!player) {
-			throw new Error("Player core is required")
-		}
-
-		if (!(manifest instanceof TrackManifest)) {
-			manifest = new TrackManifest(manifest, player)
-		}
-
-		if (!manifest.source) {
-			throw new Error("Manifest must have a source")
-		}
-
-		this.player = player
-		this.manifest = manifest
-
-		this.id = this.manifest.id ?? this.manifest._id
-	}
-
-	play = async (params = {}) => {
-		const startTime = performance.now()
-
-		const isMpd = this.manifest.source.endsWith(".mpd")
-		const audioEl = this.player.base.audio
-
-		if (!isMpd) {
-			// if a demuxer exists (from a previous MPD track), destroy it
-			if (this.player.base.demuxer) {
-				this.player.base.demuxer.destroy()
-				this.player.base.demuxer = null
-			}
-
-			// set the audio source directly
-			if (audioEl.src !== this.manifest.source) {
-				audioEl.src = this.manifest.source
-				audioEl.load() // important to apply the new src and stop previous playback
-			}
-		} else {
-			// ensure the direct 'src' attribute is removed if it was set
-			const currentSrc = audioEl.getAttribute("src")
-
-			if (currentSrc && !currentSrc.startsWith("blob:")) {
-				// blob: indicates MSE is likely already in use
-				audioEl.removeAttribute("src")
-				audioEl.load() // tell the element to update its state after src removal
-			}
-
-			// ensure a demuxer instance exists
-			if (!this.player.base.demuxer) {
-				this.player.base.createDemuxer()
-			}
-
-			// attach the mpd source to the demuxer
-			await this.player.base.demuxer.attachSource(this.manifest.source)
-		}
-
-		// reset audio properties
-		audioEl.currentTime = params.time ?? 0
-		audioEl.volume = 1
-
-		if (this.player.base.processors && this.player.base.processors.gain) {
-			this.player.base.processors.gain.set(this.player.state.volume)
-		}
-
-		if (audioEl.paused) {
-			try {
-				await audioEl.play()
-			} catch (error) {
-				console.error("[INSTANCE] Error during audio.play():", error)
-			}
-		} else {
-			console.log(
-				"[INSTANCE] Audio is already playing or will start shortly.",
-			)
-		}
-
-		this._loadMs = performance.now() - startTime
-
-		console.log(`[INSTANCE] [tooks ${this._loadMs}ms] Playing >`, this)
-	}
-
-	pause = async () => {
-		console.log("[INSTANCE] Pausing >", this)
-
-		this.player.base.audio.pause()
-	}
-
-	resume = async () => {
-		console.log("[INSTANCE] Resuming >", this)
-
-		this.player.base.audio.play()
-	}
-}
diff --git a/packages/app/src/cores/player/classes/TrackManifest.js b/packages/app/src/cores/player/classes/TrackManifest.js
index a2dd06b1..2bd15498 100644
--- a/packages/app/src/cores/player/classes/TrackManifest.js
+++ b/packages/app/src/cores/player/classes/TrackManifest.js
@@ -27,16 +27,32 @@ export default class TrackManifest {
 
 		if (typeof params.album !== "undefined") {
 			this.album = params.album
+
+			if (typeof this.album === "object") {
+				this.album = this.album.title
+			}
 		}
 
 		if (typeof params.artist !== "undefined") {
 			this.artist = params.artist
+
+			if (typeof this.artist === "object") {
+				this.artist = this.artist.name
+			}
 		}
 
 		if (typeof params.source !== "undefined") {
 			this.source = params.source
 		}
 
+		if (typeof params.dash_manifest !== "undefined") {
+			this.dash_manifest = params.dash_manifest
+		}
+
+		if (typeof params.encoded_manifest !== "undefined") {
+			this.encoded_manifest = params.encoded_manifest
+		}
+
 		if (typeof params.metadata !== "undefined") {
 			this.metadata = params.metadata
 		}
@@ -45,6 +61,15 @@ export default class TrackManifest {
 			this.liked = params.liked
 		}
 
+		if (typeof params.public !== "undefined") {
+			this.public = params.public
+		}
+
+		if (this.source) {
+			this.mpd_mode =
+				this.source.startsWith("blob:") || this.source.endsWith(".mpd")
+		}
+
 		return this
 	}
 
@@ -60,9 +85,10 @@ export default class TrackManifest {
 
 	// set default service to default
 	service = "default"
+	mpd_mode = false
 
 	async initialize() {
-		if (!this.params.file) {
+		if (!this.params.file || !(this.params.file instanceof File)) {
 			return this
 		}
 
@@ -93,7 +119,12 @@ export default class TrackManifest {
 	analyzeCoverColor = async () => {
 		const fac = new FastAverageColor()
 
-		return await fac.getColorAsync(this.cover)
+		const img = new Image()
+
+		img.src = this.cover + "?t=a"
+		img.crossOrigin = "anonymous"
+
+		return await fac.getColorAsync(img)
 	}
 
 	serviceOperations = {
@@ -164,8 +195,11 @@ export default class TrackManifest {
 			album: this.album,
 			artist: this.artist,
 			source: this.source,
+			dash_manifest: this.dash_manifest,
+			encoded_manifest: this.encoded_manifest,
 			metadata: this.metadata,
 			liked: this.liked,
+			service: this.service,
 		}
 	}
 }
diff --git a/packages/app/src/cores/player/helpers/findInitializationChunk.js b/packages/app/src/cores/player/helpers/findInitializationChunk.js
new file mode 100644
index 00000000..1b50ae93
--- /dev/null
+++ b/packages/app/src/cores/player/helpers/findInitializationChunk.js
@@ -0,0 +1,81 @@
+export default (baseUri, mpdText, periodId = null, repId = null) => {
+	// parse xml
+	const parser = new DOMParser()
+	const xml = parser.parseFromString(mpdText, "application/xml")
+
+	// check parse errors
+	const err = xml.querySelector("parsererror")
+
+	if (err) {
+		console.error("Failed to parse MPD:", err.textContent)
+		return null
+	}
+
+	// select period (by ID or first)
+	let period = null
+
+	if (periodId) {
+		period = xml.querySelector(`Period[id="${periodId}"]`)
+	}
+
+	// if not found, select first
+	if (!period) {
+		period = xml.querySelector("Period")
+	}
+
+	// ultimately, return err
+	if (!period) {
+		console.error("Cannot find a <Period> on provided MPD")
+		return null
+	}
+
+	// select representation (by ID or first)
+	let rep = null
+
+	if (repId) {
+		rep = xml.querySelector(`Representation[id="${repId}"]`)
+	}
+
+	if (!rep) {
+		rep = period.querySelector("AdaptationSet Representation")
+	}
+
+	if (!rep) {
+		console.error("Cannot find a <Representation> on Period")
+		return null
+	}
+
+	// read the associated SegmentTemplate (it may be in AdaptationSet or in Representation)
+	let tmpl = rep.querySelector("SegmentTemplate")
+
+	if (!tmpl) {
+		// fallback: look in the parent AdaptationSet
+		const adaptation = rep.closest("AdaptationSet")
+		tmpl = adaptation && adaptation.querySelector("SegmentTemplate")
+	}
+
+	if (!tmpl) {
+		console.error(
+			"Could not find <SegmentTemplate> in either Representation or AdaptationSet.",
+		)
+		return null
+	}
+
+	// extract the initialization attribute
+	const initAttr = tmpl.getAttribute("initialization")
+
+	if (!initAttr) {
+		console.warn(
+			"The <SegmentTemplate> does not declare initialization; it may be self-initializing.",
+		)
+		return null
+	}
+
+	// replace $RepresentationID$ if necessary
+	const initPath = initAttr.replace(
+		/\$RepresentationID\$/g,
+		rep.getAttribute("id"),
+	)
+
+	return new URL(initPath, baseUri).toString()
+}
diff --git a/packages/app/src/cores/player/helpers/handleInlineDashManifest.js b/packages/app/src/cores/player/helpers/handleInlineDashManifest.js
new file mode 100644
index 00000000..4e2e8036
--- /dev/null
+++ b/packages/app/src/cores/player/helpers/handleInlineDashManifest.js
@@ -0,0 +1,15 @@
+export default (uri) => {
+	const manifest = uri.split("inline://")[1]
+	const [baseUri, manifestString] = manifest.split("::")
+
+	const response = {
+		data: new Uint8Array(new TextEncoder().encode(manifestString)).buffer,
+		headers: {},
+		uri: baseUri,
+		originalUri: baseUri,
+		timeMs: performance.now(),
+		fromCache: true,
+	}
+
+	return Promise.resolve(response)
+}
diff --git a/packages/app/src/cores/player/helpers/parseSourceFormatMetadata.js b/packages/app/src/cores/player/helpers/parseSourceFormatMetadata.js
new file mode 100644
index 00000000..fe258159
--- /dev/null
+++ b/packages/app/src/cores/player/helpers/parseSourceFormatMetadata.js
@@ -0,0 +1,12 @@
+import { parseWebStream } from "music-metadata"
+
+export default async (source) => {
+	const stream = await fetch(source, {
+		method: "GET",
+		headers: {
+			//Range: "bytes=0-1024",
+		},
+	}).then((response) => response.body)
+
+	return (await parseWebStream(stream)).format
+}
diff --git a/packages/app/src/cores/player/player.core.js b/packages/app/src/cores/player/player.core.js
index 484d6c8f..7acb8227 100755
--- a/packages/app/src/cores/player/player.core.js
+++ b/packages/app/src/cores/player/player.core.js
@@ -2,12 +2,13 @@ import { Core } from "@ragestudio/vessel"
 
 import ActivityEvent from "@classes/ActivityEvent"
 import QueueManager from "@classes/QueueManager"
-import TrackInstance from "./classes/TrackInstance"
+import TrackManifest from "./classes/TrackManifest"
 import MediaSession from "./classes/MediaSession"
 import ServiceProviders from "./classes/Services"
 import PlayerState from "./classes/PlayerState"
 import PlayerUI from "./classes/PlayerUI"
 import AudioBase from "./classes/AudioBase"
+import SyncRoom from "./classes/SyncRoom"
 
 import setSampleRate from "./helpers/setSampleRate"
 
@@ -23,16 +24,14 @@ export default class Player extends Core {
 	// player config
 	static defaultSampleRate = 48000
 
+	base = new AudioBase(this)
 	state = new PlayerState(this)
 	ui = new PlayerUI(this)
 	serviceProviders = new ServiceProviders()
 	nativeControls = new MediaSession(this)
+	syncRoom = new SyncRoom(this)
 
-	base = new AudioBase(this)
-
-	queue = new QueueManager({
-		loadFunction: this.createInstance,
-	})
+	queue = new QueueManager()
 
 	public = {
 		start: this.start,
@@ -68,10 +67,16 @@ export default class Player extends Core {
 		base: () => {
 			return this.base
 		},
+		sync: () => this.syncRoom,
+		inOnSyncMode: this.inOnSyncMode,
 		state: this.state,
 		ui: this.ui.public,
 	}
 
+	inOnSyncMode() {
+		return !!this.syncRoom.state.joined_room
+	}
+
 	async afterInitialize() {
 		if (app.isMobile) {
 			this.state.volume = 1
@@ -81,53 +86,20 @@ export default class Player extends Core {
 		await this.base.initialize()
 	}
 
-	//
-	//  Instance managing methods
-	//
-	async abortPreloads() {
-		for await (const instance of this.queue.nextItems) {
-			if (instance.abortController?.abort) {
-				instance.abortController.abort()
-			}
-		}
-	}
-
-	//
-	// Playback methods
-	//
-	async play(instance, params = {}) {
-		if (!instance) {
-			throw new Error("Audio instance is required")
-		}
-
-		// resume audio context if needed
-		if (this.base.context.state === "suspended") {
-			this.base.context.resume()
-		}
-
-		// update manifest
-		this.state.track_manifest =
-			this.queue.currentItem.manifest.toSeriableObject()
-
-		// play
-		//await this.queue.currentItem.audio.play()
-		await this.queue.currentItem.play(params)
-
-		// update native controls
-		this.nativeControls.update(this.queue.currentItem.manifest)
-
-		return this.queue.currentItem
-	}
-
-	// TODO: Improve performance for large playlists
 	async start(manifest, { time, startIndex = 0, radioId } = {}) {
+		this.console.debug("start():", {
+			manifest: manifest,
+			time: time,
+			startIndex: startIndex,
+			radioId: radioId,
+		})
+
 		this.ui.attachPlayerComponent()
 
 		if (this.queue.currentItem) {
-			await this.queue.currentItem.pause()
+			await this.base.pause()
 		}
 
-		//await this.abortPreloads()
 		await this.queue.flush()
 
 		this.state.loading = true
@@ -147,32 +119,31 @@ export default class Player extends Core {
 			return false
 		}
 
-		if (playlist.some((item) => typeof item === "string")) {
-			playlist = await this.serviceProviders.resolveMany(playlist)
+		// resolve only the first item if needed
+		if (
+			typeof playlist[0] === "string" ||
+			(!playlist[0].source && !playlist[0].dash_manifest)
+		) {
+			playlist[0] = await this.serviceProviders.resolve(playlist[0])
 		}
 
-		if (playlist.some((item) => !item.source)) {
-			playlist = await this.serviceProviders.resolveMany(playlist)
-		}
+		// create instance for the first element
+		playlist[0] = new TrackManifest(playlist[0], this)
 
-		for await (let [index, _manifest] of playlist.entries()) {
-			let instance = new TrackInstance(_manifest, this)
+		this.queue.add(playlist)
 
-			this.queue.add(instance)
-		}
+		const item = this.queue.setCurrent(startIndex)
 
-		const item = this.queue.set(startIndex)
-
-		this.play(item, {
+		this.base.play(item, {
 			time: time ?? 0,
 		})
 
 		// send the event to the server
-		if (item.manifest._id && item.manifest.service === "default") {
+		if (item._id && item.service === "default") {
 			new ActivityEvent("player.play", {
 				identifier: "unique", // this must be unique to prevent duplicate events and ensure only have unique track events
-				track_id: item.manifest._id,
-				service: item.manifest.service,
+				track_id: item._id,
+				service: item.service,
 			})
 		}
 
@@ -182,13 +153,15 @@ export default class Player extends Core {
 	// similar to player.start, but add to the queue
 	// if next is true, it will add to the queue to the top of the queue
 	async addToQueue(manifest, { next = false } = {}) {
-		if (typeof manifest === "string") {
-			manifest = await this.serviceProviders.resolve(manifest)
+		if (this.inOnSyncMode()) {
+			return false
 		}
 
-		let instance = new TrackInstance(manifest, this)
+		if (this.state.playback_status === "stopped") {
+			return this.start(manifest)
+		}
 
-		this.queue.add(instance, next === true ? "start" : "end")
+		this.queue.add(manifest, next === true ? "start" : "end")
 
 		console.log("Added to queue", {
 			manifest,
@@ -197,6 +170,10 @@ export default class Player extends Core {
 	}
 
 	next() {
+		if (this.inOnSyncMode()) {
+			return false
+		}
+
 		//const isRandom = this.state.playback_mode === "shuffle"
 		const item = this.queue.next()
 
@@ -204,19 +181,27 @@ export default class Player extends Core {
 			return this.stopPlayback()
 		}
 
-		return this.play(item)
+		return this.base.play(item)
 	}
 
 	previous() {
+		if (this.inOnSyncMode()) {
+			return false
+		}
+
 		const item = this.queue.previous()
 
-		return this.play(item)
+		return this.base.play(item)
 	}
 
 	//
 	// Playback Control
 	//
 	async togglePlayback() {
+		if (this.inOnSyncMode()) {
+			return false
+		}
+
 		if (this.state.playback_status === "paused") {
 			await this.resumePlayback()
 		} else {
@@ -238,7 +223,7 @@ export default class Player extends Core {
 			this.base.processors.gain.fade(0)
 
 			setTimeout(() => {
-				this.queue.currentItem.pause()
+				this.base.pause()
 				resolve()
 			}, Player.gradualFadeMs)
 
@@ -258,7 +243,7 @@ export default class Player extends Core {
 			}
 
 			// ensure audio elemeto starts from 0 volume
-			this.queue.currentItem.resume().then(() => {
+			this.base.resume().then(() => {
 				resolve()
 			})
 			this.base.processors.gain.fade(this.state.volume)
@@ -282,14 +267,13 @@ export default class Player extends Core {
 	}
 
 	stopPlayback() {
-		this.base.flush()
-		this.queue.flush()
-
 		this.state.playback_status = "stopped"
 		this.state.track_manifest = null
 		this.queue.currentItem = null
 
-		//this.abortPreloads()
+		this.base.flush()
+		this.queue.flush()
+
 		this.nativeControls.flush()
 	}
 
diff --git a/packages/app/src/hooks/index.js b/packages/app/src/hooks/index.js
deleted file mode 100755
index 19de4fb9..00000000
--- a/packages/app/src/hooks/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as useHacks } from "./useHacks"
-export { default as useCenteredContainer } from "./useCenteredContainer"
\ No newline at end of file
diff --git a/packages/app/src/hooks/useCoverAnalysis/index.js b/packages/app/src/hooks/useCoverAnalysis/index.js
new file mode 100644
index 00000000..424bcf9e
--- /dev/null
+++ b/packages/app/src/hooks/useCoverAnalysis/index.js
@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react"
+
+const getDominantColorStr = (analysis) => {
+	if (!analysis) return "0,0,0"
+	return analysis.value?.join(", ") || "0,0,0"
+}
+
+export default (trackManifest) => {
+	const [coverAnalysis, setCoverAnalysis] = useState(null)
+
+	useEffect(() => {
+		const getCoverAnalysis = async () => {
+			const track = app.cores.player.track()
+
+			if (!track?.analyzeCoverColor) {
+				return null
+			}
+
+			try {
+				const analysis = await track.analyzeCoverColor()
+				setCoverAnalysis(analysis)
+			} catch (error) {
+				console.error("Failed to get cover analysis:", error)
+				setCoverAnalysis(null)
+			}
+		}
+
+		if (trackManifest) {
+			getCoverAnalysis()
+		} else {
+			setCoverAnalysis(null)
+		}
+	}, [trackManifest])
+
+	const dominantColor = {
+		"--dominant-color": getDominantColorStr(coverAnalysis),
+	}
+
+	return {
+		coverAnalysis,
+		dominantColor,
+	}
+}
diff --git a/packages/app/src/hooks/useFullScreen/index.js b/packages/app/src/hooks/useFullScreen/index.js
new file mode 100644
index 00000000..f8e9500d
--- /dev/null
+++ b/packages/app/src/hooks/useFullScreen/index.js
@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from "react"
+
+const toggleFullScreen = (to) => {
+	const targetState = to ?? !document.fullscreenElement
+
+	try {
+		if (targetState) {
+			document.documentElement.requestFullscreen()
+		} else if (document.fullscreenElement) {
+			document.exitFullscreen()
+		}
+	} catch (error) {
+		console.error("Fullscreen toggle failed:", error)
+	}
+}
+
+export default ({ onEnter, onExit } = {}) => {
+	const [isFullScreen, setIsFullScreen] = useState(false)
+
+	const handleFullScreenChange = useCallback(() => {
+		const fullScreenState = !!document.fullscreenElement
+		setIsFullScreen(fullScreenState)
+
+		if (fullScreenState) {
+			onEnter?.()
+		} else {
+			onExit?.()
+		}
+	}, [onEnter, onExit])
+
+	useEffect(() => {
+		document.addEventListener("fullscreenchange", handleFullScreenChange)
+
+		return () => {
+			document.removeEventListener(
+				"fullscreenchange",
+				handleFullScreenChange,
+			)
+		}
+	}, [handleFullScreenChange])
+
+	return {
+		isFullScreen,
+		toggleFullScreen,
+		handleFullScreenChange,
+	}
+}
diff --git a/packages/app/src/hooks/useLyrics/index.js b/packages/app/src/hooks/useLyrics/index.js
new file mode 100644
index 00000000..0a8df714
--- /dev/null
+++ b/packages/app/src/hooks/useLyrics/index.js
@@ -0,0 +1,69 @@
+import { useState, useCallback, useEffect } from "react"
+import parseTimeToMs from "@utils/parseTimeToMs"
+
+export default ({ trackManifest }) => {
+	const [lyrics, setLyrics] = useState(null)
+
+	const processLyrics = useCallback((rawLyrics) => {
+		if (!rawLyrics) return false
+
+		return rawLyrics.sync_audio_at && !rawLyrics.sync_audio_at_ms
+			? {
+					...rawLyrics,
+					sync_audio_at_ms: parseTimeToMs(rawLyrics.sync_audio_at),
+				}
+			: rawLyrics
+	}, [])
+
+	const loadCurrentTrackLyrics = useCallback(async () => {
+		let data = null
+
+		const track = app.cores.player.track()
+
+		if (!trackManifest || !track) {
+			return null
+		}
+
+		// if is in sync mode, fetch lyrics from sync room
+		if (app.cores.player.inOnSyncMode()) {
+			const syncRoomSocket = app.cores.player.sync().socket
+
+			if (syncRoomSocket) {
+				data = await syncRoomSocket
+					.call("sync_room:request_lyrics")
+					.catch(() => null)
+			}
+		} else {
+			data = await track.serviceOperations.fetchLyrics().catch(() => null)
+		}
+
+		// if no data founded, flush lyrics
+		if (!data) {
+			return setLyrics(null)
+		}
+
+		// process & set lyrics
+		data = processLyrics(data)
+		setLyrics(data)
+
+		console.log("Track Lyrics:", data)
+	}, [trackManifest, processLyrics])
+
+	// Load lyrics when track manifest changes or when translation is toggled
+	useEffect(() => {
+		if (!trackManifest) {
+			setLyrics(null)
+			return
+		}
+
+		if (!lyrics || lyrics.track_id !== trackManifest._id) {
+			loadCurrentTrackLyrics()
+		}
+	}, [trackManifest, lyrics?.track_id, loadCurrentTrackLyrics])
+
+	return {
+		lyrics,
+		setLyrics,
+		loadCurrentTrackLyrics,
+	}
+}
diff --git a/packages/app/src/hooks/useSyncRoom/index.js b/packages/app/src/hooks/useSyncRoom/index.js
new file mode 100644
index 00000000..8b850419
--- /dev/null
+++ b/packages/app/src/hooks/useSyncRoom/index.js
@@ -0,0 +1,60 @@
+import { useState, useRef, useCallback, useEffect } from "react"
+
+export default () => {
+	const [syncRoom, setSyncRoom] = useState(null)
+	const syncSocket = useRef(null)
+
+	const subscribeLyricsUpdates = useCallback(
+		(callback) => {
+			if (!syncSocket.current) {
+				return null
+			}
+
+			syncSocket.current.on("sync:lyrics:receive", callback)
+
+			return () => syncSocket.current.off("sync:lyrics:receive", callback)
+		},
+		[syncSocket.current],
+	)
+
+	const unsubscribeLyricsUpdates = useCallback(
+		(callback) => {
+			if (!syncSocket.current) {
+				return null
+			}
+
+			syncSocket.current.off("sync:lyrics:receive", callback)
+		},
+		[syncSocket.current],
+	)
+
+	useEffect(() => {
+		const roomId = new URLSearchParams(window.location.search).get("sync")
+
+		if (roomId) {
+			app.cores.player
+				.sync()
+				.join(roomId)
+				.then(() => {
+					setSyncRoom(roomId)
+					syncSocket.current = app.cores.player.sync().socket
+				})
+		}
+
+		return () => {
+			if (syncSocket.current) {
+				app.cores.player.sync().leave()
+
+				setSyncRoom(null)
+				syncSocket.current = null
+			}
+		}
+	}, [])
+
+	return {
+		syncRoom,
+		subscribeLyricsUpdates,
+		unsubscribeLyricsUpdates,
+		isInSyncMode: app.cores.player.inOnSyncMode(),
+	}
+}
diff --git a/packages/app/src/hooks/useTrackManifest/index.js b/packages/app/src/hooks/useTrackManifest/index.js
new file mode 100644
index 00000000..f94896d1
--- /dev/null
+++ b/packages/app/src/hooks/useTrackManifest/index.js
@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react"
+
+export default (playerTrackManifest) => {
+	const [trackManifest, setTrackManifest] = useState(null)
+
+	useEffect(() => {
+		if (
+			JSON.stringify(playerTrackManifest) !==
+			JSON.stringify(trackManifest)
+		) {
+			setTrackManifest(playerTrackManifest)
+		}
+	}, [playerTrackManifest, trackManifest])
+
+	return {
+		trackManifest,
+		setTrackManifest,
+	}
+}
diff --git a/packages/app/src/layouts/components/@mobile/bottomBar/index.jsx b/packages/app/src/layouts/components/@mobile/bottomBar/index.jsx
index 301819c1..84e4be0d 100755
--- a/packages/app/src/layouts/components/@mobile/bottomBar/index.jsx
+++ b/packages/app/src/layouts/components/@mobile/bottomBar/index.jsx
@@ -71,8 +71,8 @@ const PlayerButton = (props) => {
 				openPlayerView()
 			}
 
-			if (track.manifest?.analyzeCoverColor) {
-				track.manifest
+			if (track?.analyzeCoverColor) {
+				track
 					.analyzeCoverColor()
 					.then((analysis) => {
 						setCoverAnalyzed(analysis)
diff --git a/packages/app/src/pages/lyrics/components/Background.jsx b/packages/app/src/pages/lyrics/components/Background.jsx
new file mode 100644
index 00000000..843690e9
--- /dev/null
+++ b/packages/app/src/pages/lyrics/components/Background.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Background = ({ trackManifest, hasVideoSource }) => {
+    if (!trackManifest || hasVideoSource) {
+        return null;
+    }
+
+    return (
+        <div className="lyrics-background-wrapper">
+            <div className="lyrics-background-cover">
+                <img
+                    src={trackManifest.cover}
+                    alt="Album cover"
+                    loading="eager"
+                    draggable={false}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default React.memo(Background);
\ No newline at end of file
diff --git a/packages/app/src/pages/lyrics/components/controller/index.jsx b/packages/app/src/pages/lyrics/components/controller/index.jsx
index 238b1ec7..b2b4b3ae 100644
--- a/packages/app/src/pages/lyrics/components/controller/index.jsx
+++ b/packages/app/src/pages/lyrics/components/controller/index.jsx
@@ -3,13 +3,13 @@ import { Tag, Button } from "antd"
 import classnames from "classnames"
 import Marquee from "react-fast-marquee"
 
-import useHideOnMouseStop from "@hooks/useHideOnMouseStop"
-
 import { Icons } from "@components/Icons"
 import Controls from "@components/Player/Controls"
+import Indicators from "@components/Player/Indicators"
 import SeekBar from "@components/Player/SeekBar"
 import LiveInfo from "@components/Player/LiveInfo"
 
+import useHideOnMouseStop from "@hooks/useHideOnMouseStop"
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 
 function isOverflown(element) {
@@ -23,7 +23,7 @@ function isOverflown(element) {
 	)
 }
 
-const PlayerController = React.forwardRef((props, ref) => {
+const PlayerController = (props, ref) => {
 	const [playerState] = usePlayerStateContext()
 
 	const titleRef = React.useRef()
@@ -34,51 +34,13 @@ const PlayerController = React.forwardRef((props, ref) => {
 	})
 	const [titleIsOverflown, setTitleIsOverflown] = React.useState(false)
 
-	const [currentTime, setCurrentTime] = React.useState(0)
-	const [trackDuration, setTrackDuration] = React.useState(0)
-	const [draggingTime, setDraggingTime] = React.useState(false)
-	const [currentDragWidth, setCurrentDragWidth] = React.useState(0)
-	const [syncInterval, setSyncInterval] = React.useState(null)
-
-	async function onDragEnd(seekTime) {
-		setDraggingTime(false)
-
-		app.cores.player.controls.seek(seekTime)
-
-		syncPlayback()
-	}
-
-	async function syncPlayback() {
-		if (!playerState.track_manifest) {
-			return false
-		}
-
-		const currentTrackTime = app.cores.player.controls.seek()
-
-		setCurrentTime(currentTrackTime)
-	}
-
-	//* Handle when playback status change
-	React.useEffect(() => {
-		if (playerState.playback_status === "playing") {
-			setSyncInterval(setInterval(syncPlayback, 1000))
-		} else {
-			if (syncInterval) {
-				clearInterval(syncInterval)
-			}
-		}
-	}, [playerState.playback_status])
-
 	React.useEffect(() => {
 		setTitleIsOverflown(isOverflown(titleRef.current))
-		setTrackDuration(app.cores.player.controls.duration())
 	}, [playerState.track_manifest])
 
-	React.useEffect(() => {
-		syncPlayback()
-	}, [])
-
-	const isStopped = playerState.playback_status === "stopped"
+	if (playerState.playback_status === "stopped") {
+		return null
+	}
 
 	return (
 		<div
@@ -101,12 +63,7 @@ const PlayerController = React.forwardRef((props, ref) => {
 									},
 								)}
 							>
-								{playerState.playback_status === "stopped" ||
-									(!playerState.track_manifest?.title &&
-										"Nothing is playing")}
-
-								{playerState.playback_status !== "stopped" &&
-									playerState.track_manifest?.title}
+								{playerState.track_manifest?.title}
 							</h4>
 						}
 
@@ -115,17 +72,11 @@ const PlayerController = React.forwardRef((props, ref) => {
 								//gradient
 								//gradientColor={bgColor}
 								//gradientWidth={20}
-								play={!isStopped}
+								play={playerState.playback_status === "playing"}
 							>
 								<h4>
-									{isStopped ? (
-										"Nothing is playing"
-									) : (
-										<>
-											{playerState.track_manifest
-												?.title ?? "Untitled"}
-										</>
-									)}
+									{playerState.track_manifest?.title ??
+										"Untitled"}
 								</h4>
 							</Marquee>
 						)}
@@ -146,41 +97,13 @@ const PlayerController = React.forwardRef((props, ref) => {
 
 				{!playerState.live && <SeekBar />}
 
-				<div className="lyrics-player-controller-tags">
-					{playerState.track_manifest?.metadata?.lossless && (
-						<Tag
-							icon={
-								<Icons.Lossless
-									style={{
-										margin: 0,
-									}}
-								/>
-							}
-							bordered={false}
-						/>
-					)}
-					{playerState.track_manifest?.explicit && (
-						<Tag bordered={false}>Explicit</Tag>
-					)}
-					{props.lyrics?.sync_audio_at && (
-						<Tag bordered={false} icon={<Icons.TbMovie />}>
-							Video
-						</Tag>
-					)}
-					{props.lyrics?.available_langs?.length > 1 && (
-						<Button
-							icon={<Icons.MdTranslate />}
-							type={
-								props.translationEnabled ? "primary" : "default"
-							}
-							onClick={() => props.toggleTranslationEnabled()}
-							size="small"
-						/>
-					)}
-				</div>
+				<Indicators
+					track={playerState.track_manifest}
+					playerState={playerState}
+				/>
 			</div>
 		</div>
 	)
-})
+}
 
 export default PlayerController
diff --git a/packages/app/src/pages/lyrics/components/text/index.jsx b/packages/app/src/pages/lyrics/components/text/index.jsx
index e784df86..76d1f734 100644
--- a/packages/app/src/pages/lyrics/components/text/index.jsx
+++ b/packages/app/src/pages/lyrics/components/text/index.jsx
@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from "motion/react"
 
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 
+// eslint-disable-next-line
 const LyricsText = React.forwardRef((props, textRef) => {
 	const [playerState] = usePlayerStateContext()
 
@@ -74,20 +75,22 @@ const LyricsText = React.forwardRef((props, textRef) => {
 		} else {
 			setVisible(true)
 
-			// find line element by id
-			const lineElement = textRef.current.querySelector(
-				`#lyrics-line-${currentLineIndex}`,
-			)
+			if (textRef.current) {
+				// find line element by id
+				const lineElement = textRef.current.querySelector(
+					`#lyrics-line-${currentLineIndex}`,
+				)
 
-			// center scroll to current line
-			if (lineElement) {
-				lineElement.scrollIntoView({
-					behavior: "smooth",
-					block: "center",
-				})
-			} else {
-				// scroll to top
-				textRef.current.scrollTop = 0
+				// center scroll to current line
+				if (lineElement) {
+					lineElement.scrollIntoView({
+						behavior: "smooth",
+						block: "center",
+					})
+				} else {
+					// scroll to top
+					textRef.current.scrollTop = 0
+				}
 			}
 		}
 	}, [currentLineIndex])
diff --git a/packages/app/src/pages/lyrics/index.jsx b/packages/app/src/pages/lyrics/index.jsx
index 320ca842..61e2002e 100644
--- a/packages/app/src/pages/lyrics/index.jsx
+++ b/packages/app/src/pages/lyrics/index.jsx
@@ -1,171 +1,61 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react"
+import React from "react"
 import classnames from "classnames"
 
-import parseTimeToMs from "@utils/parseTimeToMs"
+import useFullScreen from "@hooks/useFullScreen"
+import useSyncRoom from "@hooks/useSyncRoom"
+import useCoverAnalysis from "@hooks/useCoverAnalysis"
+import useLyrics from "@hooks/useLyrics"
 import useMaxScreen from "@hooks/useMaxScreen"
+import useTrackManifest from "@hooks/useTrackManifest"
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 
 import PlayerController from "./components/controller"
 import LyricsVideo from "./components/video"
 import LyricsText from "./components/text"
+import Background from "./components/Background"
 
 import "./index.less"
 
-const getDominantColorStr = (analysis) => {
-	if (!analysis) return "0,0,0"
-	return analysis.value?.join(", ") || "0,0,0"
-}
-
-const toggleFullScreen = (to) => {
-	const targetState = to ?? !document.fullscreenElement
-
-	try {
-		if (targetState) {
-			document.documentElement.requestFullscreen()
-		} else if (document.fullscreenElement) {
-			document.exitFullscreen()
-		}
-	} catch (error) {
-		console.error("Fullscreen toggle failed:", error)
-	}
-}
-
 const EnhancedLyricsPage = () => {
 	useMaxScreen()
 
 	const [playerState] = usePlayerStateContext()
-	const [trackManifest, setTrackManifest] = React.useState(null)
-	const [lyrics, setLyrics] = React.useState(null)
-	const [translationEnabled, setTranslationEnabled] = React.useState(false)
-	const [coverAnalysis, setCoverAnalysis] = React.useState(null)
 
-	const videoRef = useRef()
-	const textRef = useRef()
-	const isMounted = useRef(true)
-	const currentTrackId = useRef(null)
+	const videoRef = React.useRef()
+	const textRef = React.useRef()
 
-	const dominantColor = useMemo(
-		() => ({ "--dominant-color": getDominantColorStr(coverAnalysis) }),
-		[coverAnalysis],
-	)
+	const { toggleFullScreen } = useFullScreen({
+		onExit: () => app?.location?.last && app.location.back(),
+	})
 
-	const handleFullScreenChange = useCallback(() => {
-		if (!document.fullscreenElement && app?.location?.last) {
-			app.location.back()
-		}
-	}, [])
+	const { trackManifest } = useTrackManifest(playerState.track_manifest)
 
-	const loadCurrentTrackLyrics = useCallback(async () => {
-		if (!playerState.track_manifest) return
+	const { dominantColor } = useCoverAnalysis(trackManifest)
 
-		const instance = app.cores.player.track()
-		if (!instance) return
+	const { syncRoom, subscribeLyricsUpdates, unsubscribeLyricsUpdates } =
+		useSyncRoom()
 
-		try {
-			const result =
-				await instance.manifest.serviceOperations.fetchLyrics({
-					preferTranslation: translationEnabled,
-				})
+	const { lyrics, setLyrics } = useLyrics({
+		trackManifest,
+	})
 
-			if (!isMounted.current) return
-
-			const processedLyrics =
-				result.sync_audio_at && !result.sync_audio_at_ms
-					? {
-							...result,
-							sync_audio_at_ms: parseTimeToMs(
-								result.sync_audio_at,
-							),
-						}
-					: result
-
-			console.log("Fetched Lyrics >", processedLyrics)
-			setLyrics(processedLyrics || false)
-		} catch (error) {
-			console.error("Failed to fetch lyrics", error)
-			setLyrics(false)
-		}
-	}, [translationEnabled, playerState.track_manifest])
-
-	// Track manifest comparison
-	useEffect(() => {
-		const newManifest = playerState.track_manifest
-
-		if (JSON.stringify(newManifest) !== JSON.stringify(trackManifest)) {
-			setTrackManifest(newManifest)
-		}
-	}, [playerState.track_manifest])
-
-	// Lyrics loading trigger
-	useEffect(() => {
-		if (!trackManifest) {
-			setLyrics(null)
-			return
-		}
-
-		if (!lyrics || lyrics.track_id !== trackManifest._id) {
-			loadCurrentTrackLyrics()
-		}
-	}, [trackManifest, lyrics?.track_id])
-
-	// Cover analysis
-	useEffect(() => {
-		const getCoverAnalysis = async () => {
-			const trackInstance = app.cores.player.track()
-			if (!trackInstance?.manifest.analyzeCoverColor) return
-
-			try {
-				const analysis =
-					await trackInstance.manifest.analyzeCoverColor()
-				if (isMounted.current) setCoverAnalysis(analysis)
-			} catch (error) {
-				console.error("Failed to get cover analysis", error)
-			}
-		}
-
-		if (playerState.track_manifest) {
-			getCoverAnalysis()
-		}
-	}, [playerState.track_manifest])
-
-	// Initialization and cleanup
-	useEffect(() => {
-		isMounted.current = true
+	// Inicialización y limpieza
+	React.useEffect(() => {
 		toggleFullScreen(true)
-		document.addEventListener("fullscreenchange", handleFullScreenChange)
+
+		if (syncRoom) {
+			subscribeLyricsUpdates(setLyrics)
+		}
 
 		return () => {
-			isMounted.current = false
 			toggleFullScreen(false)
-			document.removeEventListener(
-				"fullscreenchange",
-				handleFullScreenChange,
-			)
+
+			if (syncRoom) {
+				unsubscribeLyricsUpdates(setLyrics)
+			}
 		}
 	}, [])
 
-	// Translation toggler
-	const handleTranslationToggle = useCallback(
-		(to) => setTranslationEnabled((prev) => to ?? !prev),
-		[],
-	)
-
-	// Memoized background component
-	const renderBackground = useMemo(() => {
-		if (!playerState.track_manifest || lyrics?.video_source) return null
-
-		return (
-			<div className="lyrics-background-wrapper">
-				<div className="lyrics-background-cover">
-					<img
-						src={playerState.track_manifest.cover}
-						alt="Album cover"
-					/>
-				</div>
-			</div>
-		)
-	}, [playerState.track_manifest, lyrics?.video_source])
-
 	return (
 		<div
 			className={classnames("lyrics", {
@@ -175,15 +65,21 @@ const EnhancedLyricsPage = () => {
 		>
 			<div className="lyrics-background-color" />
 
-			{renderBackground}
+			{playerState.playback_status === "stopped" && (
+				<div className="lyrics-stopped-decorator">
+					<img src="./basic_alt.svg" alt="Basic Logo" />
+				</div>
+			)}
+
+			<Background
+				trackManifest={trackManifest}
+				hasVideoSource={!!lyrics?.video_source}
+			/>
 
 			<LyricsVideo ref={videoRef} lyrics={lyrics} />
 			<LyricsText ref={textRef} lyrics={lyrics} />
-			<PlayerController
-				lyrics={lyrics}
-				translationEnabled={translationEnabled}
-				toggleTranslationEnabled={handleTranslationToggle}
-			/>
+
+			<PlayerController lyrics={lyrics} />
 		</div>
 	)
 }
diff --git a/packages/app/src/pages/lyrics/index.less b/packages/app/src/pages/lyrics/index.less
index 07bd1f0b..0f713cfc 100644
--- a/packages/app/src/pages/lyrics/index.less
+++ b/packages/app/src/pages/lyrics/index.less
@@ -15,10 +15,34 @@
 		}
 	}
 
+	.lyrics-stopped-decorator {
+		position: absolute;
+		z-index: 100;
+
+		top: 0;
+		left: 0;
+
+		width: 100vw;
+		height: 100vh;
+
+		padding: 35vh;
+
+		opacity: 0.5;
+		filter: grayscale(0.9);
+
+		img {
+			position: relative;
+			width: 100%;
+			height: 100%;
+
+			object-fit: contain;
+		}
+	}
+
 	.lyrics-background-color {
 		position: absolute;
 
-		z-index: 100;
+		z-index: 105;
 
 		width: 100%;
 		height: 100%;
@@ -170,11 +194,6 @@
 					opacity: 1;
 					height: 30px;
 				}
-
-				.lyrics-player-controller-tags {
-					opacity: 1;
-					height: 10px;
-				}
 			}
 
 			.lyrics-player-controller-info {
@@ -187,6 +206,8 @@
 
 				transition: all 150ms ease-in-out;
 
+				overflow: hidden;
+
 				.lyrics-player-controller-info-title {
 					font-size: 1.4rem;
 					font-weight: 600;
@@ -219,6 +240,7 @@
 				.lyrics-player-controller-info-details {
 					display: flex;
 					flex-direction: row;
+					width: 100%;
 
 					align-items: center;
 
@@ -229,7 +251,7 @@
 					font-weight: 400;
 
 					// do not wrap text
-					white-space: nowrap;
+					word-break: break-word;
 
 					h3 {
 						margin: 0;
@@ -243,22 +265,24 @@
 				transition: all 150ms ease-in-out;
 			}
 
-			.lyrics-player-controller-tags {
+			.toolbar_player_indicators_wrapper {
+				position: absolute;
+
 				display: flex;
 				flex-direction: row;
 
 				align-items: center;
-
 				justify-content: center;
 
 				width: 100%;
-				height: 0px;
+				padding: 4px;
 
-				gap: 10px;
+				.toolbar_player_indicators {
+					padding: 4px 6px;
+					font-size: 0.9rem;
 
-				opacity: 0;
-
-				transition: all 150ms ease-in-out;
+					border-radius: 8px;
+				}
 			}
 		}
 	}