diff --git a/frontend/app/components/Session/Player/ReplayPlayer/AudioPlayer.tsx b/frontend/app/components/Session/Player/ReplayPlayer/AudioPlayer.tsx index 70e13c16e..e93699fa2 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/AudioPlayer.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/AudioPlayer.tsx @@ -29,16 +29,18 @@ function DropdownAudioPlayer({ const files = React.useMemo(() => audioEvents.map((pa) => { const data = pa.payload; + const nativeTs = data.timestamp return { url: data.url, timestamp: data.timestamp, - start: pa.timestamp - sessionStart, + start: nativeTs ? nativeTs : pa.timestamp - sessionStart, }; - }), [audioEvents, sessionStart]) + }), [audioEvents.length, sessionStart]) React.useEffect(() => { Object.entries(audioRefs.current).forEach(([url, audio]) => { if (audio) { + audio.loop = false; audio.addEventListener('loadedmetadata', () => { fileLengths.current[url] = audio.duration; }) @@ -99,10 +101,14 @@ function DropdownAudioPlayer({ if (audio) { const file = files.find((f) => f.url === key); if (file) { - audio.currentTime = Math.max( - (timeMs + delta * 1000 - file.start) / 1000, - 0 - ); + const targetTime = (timeMs + delta * 1000 - file.start) / 1000; + const fileLength = fileLengths.current[key]; + if (targetTime < 0 || (fileLength && targetTime > fileLength)) { + audio.pause(); + return; + } else { + audio.currentTime = targetTime; + } } } }); @@ -118,21 +124,25 @@ function DropdownAudioPlayer({ useEffect(() => { const deltaMs = delta * 1000; - if (Math.abs(lastPlayerTime.current - time - deltaMs) >= 250) { + const deltaTime = Math.abs(lastPlayerTime.current - time - deltaMs) + if (deltaTime >= 250) { handleSeek(time); } Object.entries(audioRefs.current).forEach(([url, audio]) => { if (audio) { const file = files.find((f) => f.url === url); - if (audio.ended && fileLengths.current[url] < time) { - return; - } - if (file && time >= file.start) { - if (audio.paused && playing) { - audio.play(); + const fileLength = fileLengths.current[url]; + if (file) { + if (fileLength && (fileLength*1000)+file.start < time) { + return; + } + if (time >= file.start) { + if (audio.paused && playing) { + audio.play(); + } + } else { + audio.pause(); } - } else { - audio.pause(); } } }); @@ -155,10 +165,17 @@ function DropdownAudioPlayer({ Object.entries(audioRefs.current).forEach(([url, audio]) => { if (audio) { const file = files.find((f) => f.url === url); - if (file && playing && time >= file.start) { - audio.play(); - } else { - audio.pause(); + const fileLength = fileLengths.current[url]; + if (file) { + if (fileLength && (fileLength*1000)+file.start < time) { + audio.pause(); + return; + } + if (playing && time >= file.start) { + audio.play(); + } else { + audio.pause(); + } } } }); diff --git a/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx index 855ece5eb..c7bed7040 100644 --- a/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx +++ b/frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx @@ -19,7 +19,7 @@ function ConsoleRow(props: Props) { return (