Merge pull request #171 from ragestudio/dev

Author: srgooglo

packages/app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@comty/app",
-	"version": "1.44.2@alpha",
+	"version": "1.44.3@alpha",
 	"license": "ComtyLicense",
 	"main": "electron/main",
 	"type": "module",

packages/app/src/cores/player/classes/AudioBase.js

@@ -216,8 +216,47 @@ export default class AudioBase {
 		return manifest.source
 	}
 
+	handleDemuxerError = async (event) => {
+		if (!event || !event.error) {
+			return null
+		}
+
+		if (
+			event.error.message &&
+			event.error.message.includes("QuotaExceededError")
+		) {
+			this.console.warn(
+				"QuotaExceededError detected, attempting buffer cleanup and recovery",
+			)
+
+			const currentTime = this.audio.currentTime
+
+			// try to clear buffers and recover
+			if (this.demuxer) {
+				// reset and reinitialize the demuxer
+				this.demuxer.reset()
+
+				// reattach the source
+				const manifest = this.player.queue.currentItem
+
+				if (manifest && manifest.dash_manifest) {
+					await this.demuxer.attachSource(manifest.dash_manifest, currentTime)
+
+					// resume playback from current position
+					this.audio.currentTime = currentTime
+
+					if (this.player.state.playback_status === "playing") {
+						await this.demuxer.play()
+					}
+
+					this.console.log("Successfully recovered from QuotaExceededError")
+				}
+			}
+		}
+	}
+
 	async createDemuxer() {
-		// Destroy previous instance if exists
+		// destroy previous instance if exists
 		if (this.demuxer) {
 			try {
 				this.demuxer.reset()
@@ -238,59 +277,75 @@ export default class AudioBase {
 
 		this.demuxer.updateSettings({
 			streaming: {
-				//cacheInitSegments: true,
+				//cacheInitSegments: true
 				buffer: {
-					bufferTimeAtTopQuality: 30,
-					bufferTimeAtTopQualityLongForm: 60,
-					bufferTimeDefault: 20,
-					initialBufferLevel: 5,
-					bufferToKeep: 10,
+					fastSwitchEnabled: true,
+					flushBufferAtTrackSwitch: true,
+					resetSourceBuffersForTrackSwitch: true,
+					bufferToKeep: 2,
+					bufferTimeDefault: 15,
+					bufferTimeAtTopQuality: 20,
+					bufferTimeAtTopQualityLongForm: 25,
 					longFormContentDurationThreshold: 300,
-					stallThreshold: 0.5,
-					bufferPruningInterval: 30,
-				},
-				abr: {
-					initialBitrate: {
-						audio: 128,
-					},
-					rules: {
-						insufficientBufferRule: {
-							active: true,
-							parameters: {
-								bufferLevel: 0.3,
-							},
-						},
-						switchHistoryRule: {
-							active: true,
-							parameters: {
-								sampleSize: 8,
-							},
-						},
-					},
-					throughput: {
-						averageCalculationMode: "slidingWindow",
-						slidingWindowSize: 20,
-						ewmaHalfLife: 4,
-					},
-				},
-				retrySettings: {
-					maxRetries: 5,
-					retryDelayMs: 1000,
-					retryBackoffFactor: 2,
-				},
-				requests: {
-					requestTimeout: 30000,
-					xhrWithCredentials: false,
+					stallThreshold: 1,
+					bufferPruningInterval: 3,
 				},
 			},
 		})
 
-		// Event listeners
+		// event listeners
 		this.demuxer.on(dashjs.MediaPlayer.events.ERROR, (event) => {
 			console.error("Demuxer error", event)
+			this.handleDemuxerError(event)
 		})
 	}
 
+	preventiveBufferCleanup = async () => {
+		if (!this.demuxer) {
+			return null
+		}
+
+		try {
+			const currentTime = this.audio.currentTime
+			const duration = this.audio.duration
+			const bufferCleanupThreshold = 30
+			const buffered = this.audio.buffered
+
+			// clean buffers that are more than 30 seconds behind current position
+			if (currentTime && duration && duration !== Infinity) {
+				if (currentTime > bufferCleanupThreshold) {
+					//  clean old ones
+					for (let i = 0; i < buffered.length; i++) {
+						const start = buffered.start(i)
+						const end = buffered.end(i)
+
+						// if this buffer range is too far behind, its a candidate for cleanup
+						if (end < currentTime - bufferCleanupThreshold) {
+							try {
+								// force demuxer to prune old buffers
+								this.demuxer.updateSettings({
+									streaming: {
+										buffer: {
+											...this.demuxer.getSettings().streaming.buffer,
+											bufferToKeep: 2,
+											bufferPruningInterval: 1,
+										},
+									},
+								})
+
+								this.console.log(`Cleaned buffer range: ${start}-${end}`)
+							} catch (cleanupError) {
+								this.console.warn("Buffer cleanup failed:", cleanupError)
+							}
+						}
+					}
+				}
+			}
+		} catch (error) {
+			this.console.warn("Preventive buffer cleanup failed:", error)
+		}
+	}
+
 	timeTick = async () => {
 		if (
 			!this.audio ||
@@ -314,11 +369,22 @@ export default class AudioBase {
 				)
 			}
 		}
+
+		// run preventive buffer cleanup every 10 seconds
+		if (Math.floor(this.audio.currentTime) % 10 === 0) {
+			await this.preventiveBufferCleanup()
+		}
 	}
 
 	async flush() {
 		this.audio.pause()
 		this.audio.currentTime = 0
+
+		// clear intervals
+		if (typeof this._timeTickInterval !== "undefined") {
+			clearInterval(this._timeTickInterval)
+		}
+
 		await this.createDemuxer()
 	}
 

packages/app/src/pages/lyrics/components/text/index.jsx

@@ -4,12 +4,15 @@ import { motion, AnimatePresence } from "motion/react"
 
 import { usePlayerStateContext } from "@contexts/WithPlayerContext"
 
+import "./index.less"
+
 // eslint-disable-next-line
-const LyricsText = React.forwardRef((props, textRef) => {
+const LyricsText = React.forwardRef((props, forwardedRef) => {
 	const [playerState] = usePlayerStateContext()
 
 	const { lyrics } = props
 
+	const textRef = forwardedRef ?? React.useRef(null)
 	const currentTrackId = React.useRef(null)
 	const [syncInterval, setSyncInterval] = React.useState(null)
 	const [currentLineIndex, setCurrentLineIndex] = React.useState(0)
@@ -131,13 +134,17 @@ const LyricsText = React.forwardRef((props, textRef) => {
 	}
 
 	return (
-		<div className="lyrics-text-wrapper">
+		<div
+			className={classnames("lyrics-text-wrapper", {
+				["static"]: props.static,
+			})}
+		>
 			<AnimatePresence>
 				<motion.div
 					ref={textRef}
 					className="lyrics-text"
 					animate={{
-						opacity: visible ? 1 : 0,
+						opacity: props.static ? 1 : visible ? 1 : 0,
 					}}
 					initial={{
 						opacity: 0,

packages/app/src/pages/lyrics/components/text/index.less

@@ -0,0 +1,62 @@
+.lyrics-text-wrapper {
+	z-index: 200;
+	position: fixed;
+
+	bottom: 0;
+	left: 0;
+
+	padding: 60px;
+
+	.lyrics-text {
+		display: flex;
+		flex-direction: column;
+
+		width: 600px;
+		height: 200px;
+
+		padding: 20px;
+		gap: 30px;
+
+		overflow: hidden;
+
+		background-color: rgba(var(--background-color-accent-values), 0.6);
+		border-radius: 12px;
+
+		backdrop-filter: blur(5px);
+		-webkit-backdrop-filter: blur(5px);
+
+		.line {
+			font-size: 2rem;
+
+			opacity: 0.1;
+
+			margin: 0;
+
+			&.current {
+				opacity: 1;
+			}
+		}
+	}
+
+	&.static {
+		position: relative;
+		padding: 0;
+
+		.lyrics-text {
+			width: 100%;
+
+			padding: 0;
+			background-color: unset;
+			border-radius: unset;
+
+			.line {
+				font-size: 1.6rem;
+				opacity: 0.4;
+
+				&.current {
+					opacity: 1;
+				}
+			}
+		}
+	}
+}

packages/app/src/pages/lyrics/components/video/index.jsx

@@ -59,6 +59,7 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
 				!videoRef.current ||
 				!lyrics ||
 				!lyrics.video_source ||
+				lyrics.video_loop ||
 				typeof lyrics.video_starts_at_ms === "undefined"
 			) {
 				stopSyncInterval()
@@ -74,9 +75,7 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
 			const currentVideoTime =
 				videoRef.current.currentTime - lyrics.video_starts_at_ms / 1000
 			const maxOffset = maxLatencyInMs / 1000
-			const currentVideoTimeDiff = Math.abs(
-				currentVideoTime - currentTrackTime,
-			)
+			const currentVideoTimeDiff = Math.abs(currentVideoTime - currentTrackTime)
 
 			setCurrentVideoLatency(currentVideoTimeDiff)
 
@@ -132,22 +131,21 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
 						hls.current.attachMedia(videoElement)
 					}
 					hls.current.loadSource(lyrics.video_source)
-				} else if (
-					videoElement.canPlayType("application/vnd.apple.mpegurl")
-				) {
+				} else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
 					videoElement.src = lyrics.video_source
 				}
 			}
 
 			if (typeof lyrics.video_starts_at_ms !== "undefined") {
-				videoElement.loop = false
+				videoElement.loop = lyrics.video_loop ?? false
 				syncPlayback(true)
 			} else {
-				videoElement.loop = true
+				videoElement.loop = lyrics.video_loop ?? true
 				videoElement.currentTime = 0
 			}
 		} else {
 			videoElement.src = ""
+
 			if (hls.current) {
 				hls.current.stopLoad()
 				if (hls.current.media) {
@@ -186,9 +184,7 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
 		if (playerState.playback_status === "playing") {
 			videoElement
 				.play()
-				.catch((error) =>
-					console.error("VIDEO:: Error playing video:", error),
-				)
+				.catch((error) => console.error("VIDEO:: Error playing video:", error))
 			if (shouldSync) {
 				startSyncInterval()
 			}