mirror of
https://github.com/ragestudio/comty.git
synced 2025-07-10 17:54:16 +00:00
Fix nested optional chaining in lossless tag & improve video sync
This commit is contained in:
parent
6e80fc67fa
commit
6100feb608
@ -177,7 +177,7 @@ const PlayerController = React.forwardRef((props, ref) => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="lyrics-player-controller-tags">
|
<div className="lyrics-player-controller-tags">
|
||||||
{playerState.track_manifest?.metadata.lossless && (
|
{playerState.track_manifest?.metadata?.lossless && (
|
||||||
<Tag
|
<Tag
|
||||||
icon={
|
icon={
|
||||||
<Icons.Lossless
|
<Icons.Lossless
|
||||||
|
@ -22,7 +22,10 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
return null
|
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
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -30,7 +33,8 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
|
|
||||||
setSyncingVideo(true)
|
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
|
// dec some ms to ensure the video seeks correctly
|
||||||
newTime -= 5 / 1000
|
newTime -= 5 / 1000
|
||||||
@ -40,17 +44,26 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
|
|
||||||
async function syncPlayback() {
|
async function syncPlayback() {
|
||||||
// if something is wrong, stop syncing
|
// 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()
|
return stopSyncInterval()
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentTrackTime = app.cores.player.controls.seek()
|
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}`)
|
//console.log(`Current track time: ${currentTrackTime}, current video time: ${currentVideoTime}`)
|
||||||
|
|
||||||
const maxOffset = maxLatencyInMs / 1000
|
const maxOffset = maxLatencyInMs / 1000
|
||||||
const currentVideoTimeDiff = Math.abs(currentVideoTime - currentTrackTime)
|
const currentVideoTimeDiff = Math.abs(
|
||||||
|
currentVideoTime - currentTrackTime,
|
||||||
|
)
|
||||||
|
|
||||||
setCurrentVideoLatency(currentVideoTimeDiff)
|
setCurrentVideoLatency(currentVideoTimeDiff)
|
||||||
|
|
||||||
@ -75,11 +88,19 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
|
|
||||||
//* handle when player is loading
|
//* handle when player is loading
|
||||||
React.useEffect(() => {
|
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()
|
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()
|
videoRef.current.play()
|
||||||
}
|
}
|
||||||
}, [playerState.loading])
|
}, [playerState.loading])
|
||||||
@ -87,7 +108,9 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
//* Handle when playback status change
|
//* Handle when playback status change
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (initialLoading === false) {
|
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 (lyrics && lyrics.video_source) {
|
||||||
if (playerState.playback_status === "playing") {
|
if (playerState.playback_status === "playing") {
|
||||||
@ -118,7 +141,8 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
|
|
||||||
if (typeof lyrics.sync_audio_at_ms !== "undefined") {
|
if (typeof lyrics.sync_audio_at_ms !== "undefined") {
|
||||||
videoRef.current.loop = false
|
videoRef.current.loop = false
|
||||||
videoRef.current.currentTime = lyrics.sync_audio_at_ms / 1000
|
videoRef.current.currentTime =
|
||||||
|
lyrics.sync_audio_at_ms / 1000
|
||||||
|
|
||||||
startSyncInterval()
|
startSyncInterval()
|
||||||
} else {
|
} else {
|
||||||
@ -147,13 +171,10 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return <>
|
return (
|
||||||
{
|
<>
|
||||||
props.lyrics?.sync_audio_at && <div
|
{props.lyrics?.sync_audio_at && (
|
||||||
className={classnames(
|
<div className={classnames("videoDebugOverlay")}>
|
||||||
"videoDebugOverlay",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<p>Maximun latency</p>
|
<p>Maximun latency</p>
|
||||||
<p>{maxLatencyInMs}ms</p>
|
<p>{maxLatencyInMs}ms</p>
|
||||||
@ -164,21 +185,19 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
|
|||||||
</div>
|
</div>
|
||||||
{syncingVideo ? <p>Syncing video...</p> : null}
|
{syncingVideo ? <p>Syncing video...</p> : null}
|
||||||
</div>
|
</div>
|
||||||
}
|
)}
|
||||||
|
|
||||||
<video
|
<video
|
||||||
className={classnames(
|
className={classnames("lyrics-video", {
|
||||||
"lyrics-video",
|
["hidden"]: !lyrics || !lyrics?.video_source,
|
||||||
{
|
})}
|
||||||
["hidden"]: !lyrics || !lyrics?.video_source
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
ref={videoRef}
|
ref={videoRef}
|
||||||
controls={false}
|
controls={false}
|
||||||
muted
|
muted
|
||||||
preload="auto"
|
preload="auto"
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
export default LyricsVideo
|
export default LyricsVideo
|
@ -89,7 +89,8 @@ const EnhancedLyricsPage = () => {
|
|||||||
|
|
||||||
// Track manifest comparison
|
// Track manifest comparison
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const newManifest = playerState.track_manifest?.toSeriableObject()
|
const newManifest = playerState.track_manifest
|
||||||
|
|
||||||
if (JSON.stringify(newManifest) !== JSON.stringify(trackManifest)) {
|
if (JSON.stringify(newManifest) !== JSON.stringify(trackManifest)) {
|
||||||
setTrackManifest(newManifest)
|
setTrackManifest(newManifest)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user