UI patch 1337 (#2606)

* ui: debugging audio

* ui: debugging audio pt2

* ui: remove select-none from console rows

* ui: fix audioplayer file length calculation and checks

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,16 +124,19 @@ 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) {
+        const fileLength = fileLengths.current[url];
+        if (file) {
+          if (fileLength && (fileLength*1000)+file.start < time) {
             return;
           }
-        if (file && time >= file.start) {
+          if (time >= file.start) {
             if (audio.paused && playing) {
               audio.play();
             }
@@ -135,6 +144,7 @@ function DropdownAudioPlayer({
             audio.pause();
           }
         }
+      }
     });
     lastPlayerTime.current = time + deltaMs;
   }, [time, delta]);
@@ -155,12 +165,19 @@ 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) {
+        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();
           }
         }
+      }
     });
     setVolume(isMuted ? 0 : volume);
   }, [playing]);

frontend/app/components/Session_/Console/ConsoleRow/ConsoleRow.tsx

@@ -19,7 +19,7 @@ function ConsoleRow(props: Props) {
 
   return (
     <div
-      className={cn(stl.line, 'flex py-2 px-4 overflow-hidden group relative select-none', {
+      className={cn(stl.line, 'flex py-2 px-4 overflow-hidden group relative', {
         info: !log.isYellow && !log.isRed,
         warn: log.isYellow,
         error: log.isRed,

frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx

@@ -45,7 +45,7 @@ function ConsoleRow(props: Props) {
     <div
       style={style}
       className={cn(
-        'border-b flex items-start py-1 px-4 pe-8 overflow-hidden group relative select-none',
+        'border-b flex items-start py-1 px-4 pe-8 overflow-hidden group relative',
         {
           info: !log.isYellow && !log.isRed,
           warn: log.isYellow,