RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix nested optional chaining in lossless tag & improve video sync

Browse Source
This commit is contained in:
SrGooglo 2025-04-24 06:14:25 +00:00
parent 6e80fc67fa
commit 6100feb608
3 changed files with 161 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/pages/lyrics/components/controller/index.jsx
View File

@ -177,7 +177,7 @@ const PlayerController = React.forwardRef((props, ref) => {
)}
<div className="lyrics-player-controller-tags">
{playerState.track_manifest?.metadata.lossless && (
{playerState.track_manifest?.metadata?.lossless && (
<Tag
icon={
<Icons.Lossless

65
packages/app/src/pages/lyrics/components/video/index.jsx
View File

@ -22,7 +22,10 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
return null
}
if (!lyrics.video_source || typeof lyrics.sync_audio_at_ms === "undefined") {
if (
!lyrics.video_source ||
typeof lyrics.sync_audio_at_ms === "undefined"
) {
return null
}
@ -30,7 +33,8 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
setSyncingVideo(true)
let newTime = currentTrackTime + (lyrics.sync_audio_at_ms / 1000) + app.cores.player.gradualFadeMs / 1000
let newTime =
currentTrackTime + lyrics.sync_audio_at_ms / 1000 + 150 / 1000
// dec some ms to ensure the video seeks correctly
newTime -= 5 / 1000
@ -40,17 +44,26 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
async function syncPlayback() {
// if something is wrong, stop syncing
if (videoRef.current === null || !lyrics || !lyrics.video_source || typeof lyrics.sync_audio_at_ms === "undefined" || playerState.playback_status !== "playing") {
if (
videoRef.current === null ||
!lyrics ||
!lyrics.video_source ||
typeof lyrics.sync_audio_at_ms === "undefined" ||
playerState.playback_status !== "playing"
) {
return stopSyncInterval()
}
const currentTrackTime = app.cores.player.controls.seek()
const currentVideoTime = videoRef.current.currentTime - (lyrics.sync_audio_at_ms / 1000)
const currentVideoTime =
videoRef.current.currentTime - lyrics.sync_audio_at_ms / 1000
//console.log(`Current track time: ${currentTrackTime}, current video time: ${currentVideoTime}`)
const maxOffset = maxLatencyInMs / 1000
const currentVideoTimeDiff = Math.abs(currentVideoTime - currentTrackTime)
const currentVideoTimeDiff = Math.abs(
currentVideoTime - currentTrackTime,
)
setCurrentVideoLatency(currentVideoTimeDiff)
@ -75,11 +88,19 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
//* handle when player is loading
React.useEffect(() => {
if (lyrics?.video_source && playerState.loading === true && playerState.playback_status === "playing") {
if (
lyrics?.video_source &&
playerState.loading === true &&
playerState.playback_status === "playing"
) {
videoRef.current.pause()
}
if (lyrics?.video_source && playerState.loading === false && playerState.playback_status === "playing") {
if (
lyrics?.video_source &&
playerState.loading === false &&
playerState.playback_status === "playing"
) {
videoRef.current.play()
}
}, [playerState.loading])
@ -87,7 +108,9 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
//* Handle when playback status change
React.useEffect(() => {
if (initialLoading === false) {
console.log(`VIDEO:: Playback status changed to ${playerState.playback_status}`)
console.log(
`VIDEO:: Playback status changed to ${playerState.playback_status}`,
)
if (lyrics && lyrics.video_source) {
if (playerState.playback_status === "playing") {
@ -118,7 +141,8 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
if (typeof lyrics.sync_audio_at_ms !== "undefined") {
videoRef.current.loop = false
videoRef.current.currentTime = lyrics.sync_audio_at_ms / 1000
videoRef.current.currentTime =
lyrics.sync_audio_at_ms / 1000
startSyncInterval()
} else {
@ -147,13 +171,10 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
}
}, [])
return <>
{
props.lyrics?.sync_audio_at && <div
className={classnames(
"videoDebugOverlay",
)}
>
return (
<>
{props.lyrics?.sync_audio_at && (
<div className={classnames("videoDebugOverlay")}>
<div>
<p>Maximun latency</p>
<p>{maxLatencyInMs}ms</p>
@ -164,21 +185,19 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
</div>
{syncingVideo ? <p>Syncing video...</p> : null}
</div>
}
)}
<video
className={classnames(
"lyrics-video",
{
["hidden"]: !lyrics || !lyrics?.video_source
}
)}
className={classnames("lyrics-video", {
["hidden"]: !lyrics || !lyrics?.video_source,
})}
ref={videoRef}
controls={false}
muted
preload="auto"
/>
</>
)
})
export default LyricsVideo

3
packages/app/src/pages/lyrics/index.jsx
View File

@ -89,7 +89,8 @@ const EnhancedLyricsPage = () => {
// Track manifest comparison
useEffect(() => {
const newManifest = playerState.track_manifest?.toSeriableObject()
const newManifest = playerState.track_manifest
if (JSON.stringify(newManifest) !== JSON.stringify(trackManifest)) {
setTrackManifest(newManifest)
}