patch duration issue when audio not yet loaded

Author: nicolvisser

src/App.tsx

@@ -49,8 +49,8 @@ function App() {
         annotations={annotations}
         navigator={true}
         settings={true}
-        startTimeInitial={2}
-        endTimeInitial={4}
+        //startTimeInitial={2}
+        //endTimeInitial={4}
         playbackSpeedInitial={1.0}
         playheadModeInitial="loop"
         specHeight={300}

src/lib/PlaybackProvider.tsx

@@ -10,20 +10,20 @@ import {
 import { useTheme } from "./ThemeProvider";
 
 export type PlaybackContextType = {
-  duration: number;
+  duration: number | null;
   currentTime: number;
   playbackRate: number;
   mode: string;
   sampleRate: number;
-  setDuration: Dispatch<SetStateAction<number>>;
+  setDuration: Dispatch<SetStateAction<number | null>>;
   setCurrentTime: (newTime: number) => void;
   setPlaybackRate: (newTime: number) => void;
   pause: () => void;
   audioSamples: Float32Array;
 };
 
 export const PlaybackContext = createContext<PlaybackContextType>({
-  duration: 999,
+  duration: null,
   currentTime: 0,
   playbackRate: 1.0,
   mode: "page",
@@ -61,7 +61,7 @@ function PlaybackProvider(props: PlaybackProviderProps) {
     playheadModeInitial = "page",
   } = props;
   const settings = props.settings ? true : false;
-  const [duration, setDuration] = useState(999);
+  const [duration, setDuration] = useState<number | null>(null);
   const [currentTime, _setCurrentTime] = useState(currentTimeInitial);
   const [playbackRate, _setPlaybackRate] = useState(playbackSpeedInitial);
   const [mode, setMode] = useState<string>(playheadModeInitial);
@@ -81,6 +81,11 @@ function PlaybackProvider(props: PlaybackProviderProps) {
       if (audioRef.current.duration) {
         setDuration(audioRef.current.duration);
       }
+
+      if (audioRef.current.readyState >= 1) {
+        setDuration(audioRef.current.duration);
+      }
+
       audioRef.current.playbackRate = playbackSpeedInitial;
 
       if (intervalRef.current) {

src/lib/SpectrogramContent.tsx

@@ -13,6 +13,10 @@ function SpectrogramContent(props: SpectrogramContentProps) {
   const { duration, currentTime } = usePlayback();
   const { zoomedDuration } = useZoom();
 
+  if (!duration) {
+    return null;
+  }
+
   return (
     <>
       <image

src/lib/SpectrogramGraphics.tsx

@@ -103,8 +103,8 @@ function SpectrogramGraphics(props: SpectrogramGraphicsProps) {
       // for backwards compatibility, where user could specify sxx as a number[][] array
       setSpec(
         sxx[0].map(
-          (_, colIndex) => new Float32Array(sxx.map((row) => row[colIndex]))
-        )
+          (_, colIndex) => new Float32Array(sxx.map((row) => row[colIndex])),
+        ),
       );
       return;
     }
@@ -119,7 +119,7 @@ function SpectrogramGraphics(props: SpectrogramGraphicsProps) {
         f_min,
         f_max,
         n_mels,
-        top_db
+        top_db,
       );
 
       setSpec(melSpec);
@@ -197,7 +197,7 @@ function SpectrogramGraphics(props: SpectrogramGraphicsProps) {
                 data={data}
                 strokeWidth={strokeWidth}
               />
-            ))
+            )),
           )}
           {navigator && (
             <SpectrogramNavigator height={navHeight}>

src/lib/SpectrogramNavigator.tsx

@@ -34,10 +34,10 @@ function SpectrogramNavigator(props: SpectrogramNavigatorProps) {
   const draggingToPan = isZoomed && dragStart;
 
   const getPointerCoordinate = (
-    e: React.MouseEvent<SVGSVGElement, MouseEvent>
+    e: React.MouseEvent<SVGSVGElement, MouseEvent>,
   ) => {
     const boundingClientRect = svgRef.current?.getBoundingClientRect();
-    if (boundingClientRect) {
+    if (boundingClientRect && duration) {
       const { left, right } = boundingClientRect;
       let newTime = (duration * (e.clientX - left)) / (right - left);
       return newTime;
@@ -53,10 +53,10 @@ function SpectrogramNavigator(props: SpectrogramNavigatorProps) {
     const newDragEnd = getPointerCoordinate(e);
     setDragEnd(newDragEnd);
     if (newDragEnd) {
-      if (draggingToPan) {
+      if (draggingToPan && duration) {
         const newCenterTime = Math.min(
           Math.max(zoomedDuration / 2, newDragEnd),
-          duration - zoomedDuration / 2
+          duration - zoomedDuration / 2,
         );
         setCenterTime(newCenterTime);
         setCurrentTime(newCenterTime - zoomedDuration / 2);
@@ -65,7 +65,7 @@ function SpectrogramNavigator(props: SpectrogramNavigatorProps) {
   };
 
   const onPointerUp = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
-    if (draggingToZoom) {
+    if (draggingToZoom && duration) {
       if (dragEnd - dragStart >= MINIMUM_ZOOM_WINDOW_DURATION) {
         setStartTime(dragStart);
         setEndTime(dragEnd);
@@ -80,47 +80,53 @@ function SpectrogramNavigator(props: SpectrogramNavigatorProps) {
     setDragEnd(null);
   };
 
+  const placeholder_svg = <svg width="100%" height={height} />;
+
   return (
     <div style={{ display: "flex", flexDirection: "row", gap: 5 }}>
       <button className={theme} onClick={zoomOut}>
         Zoom Out
       </button>
-      <svg
-        ref={svgRef}
-        width="100%"
-        height={height}
-        viewBox={`0,0,${duration},100`}
-        cursor={isZoomed ? "grabbing" : "zoom-in"}
-        preserveAspectRatio="none"
-        onPointerDown={onPointerDown}
-        onPointerUp={onPointerUp}
-        onPointerMove={onPointerMove}
-      >
-        {children}
-        <rect
-          x={0}
-          width={startTime}
-          y="0"
-          height="100"
-          style={{ fill: "white", opacity: 0.5 }}
-        />
-        <rect
-          x={endTime}
-          width={duration - endTime}
-          y="0"
-          height="100"
-          style={{ fill: "white", opacity: 0.5 }}
-        />
-        {draggingToZoom && dragEnd > dragStart && (
+      {duration ? (
+        <svg
+          ref={svgRef}
+          width="100%"
+          height={height}
+          viewBox={`0,0,${duration},100`}
+          cursor={isZoomed ? "grabbing" : "zoom-in"}
+          preserveAspectRatio="none"
+          onPointerDown={onPointerDown}
+          onPointerUp={onPointerUp}
+          onPointerMove={onPointerMove}
+        >
+          {children}
+          <rect
+            x={0}
+            width={startTime}
+            y="0"
+            height="100"
+            style={{ fill: "white", opacity: 0.5 }}
+          />
           <rect
-            x={dragStart}
-            width={dragEnd - dragStart}
+            x={endTime}
+            width={duration - endTime}
             y="0"
             height="100"
-            style={{ fill: "red", opacity: 0.5 }}
+            style={{ fill: "white", opacity: 0.5 }}
           />
-        )}
-      </svg>
+          {draggingToZoom && dragEnd > dragStart && (
+            <rect
+              x={dragStart}
+              width={dragEnd - dragStart}
+              y="0"
+              height="100"
+              style={{ fill: "red", opacity: 0.5 }}
+            />
+          )}
+        </svg>
+      ) : (
+        placeholder_svg
+      )}
       <button
         className={theme}
         style={{ fontFamily: "monospace" }}

src/lib/SpectrogramViewer.tsx

@@ -15,7 +15,7 @@ function SpectrogramViewer(props: SpectrogramViewerProps) {
 
   const onClick = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     const boundingClientRect = svgRef.current?.getBoundingClientRect();
-    if (boundingClientRect) {
+    if (boundingClientRect && duration) {
       const { left, right } = boundingClientRect;
       let newTime =
         startTime +
@@ -30,7 +30,9 @@ function SpectrogramViewer(props: SpectrogramViewerProps) {
     }
   };
 
-  return (
+  const placeholder_svg = <svg width="100%" height={height} />;
+
+  return duration ? (
     <svg
       ref={svgRef}
       width="100%"
@@ -42,6 +44,8 @@ function SpectrogramViewer(props: SpectrogramViewerProps) {
     >
       {children}
     </svg>
+  ) : (
+    placeholder_svg
   );
 }
 

src/lib/ZoomProvider.tsx

@@ -46,13 +46,15 @@ function ZoomProvider(props: ZoomProviderProps) {
   const { children, startTimeInitial, endTimeInitial } = props;
   const { duration, currentTime, mode, pause, setCurrentTime } = usePlayback();
   const [startTime, setStartTime] = useState(startTimeInitial ?? 0);
-  const [endTime, setEndTime] = useState(endTimeInitial ?? duration);
+  const [endTime, setEndTime] = useState(endTimeInitial ?? duration ?? 1);
 
   useEffect(() => {
-    setStartTime(startTimeInitial ?? 0);
-    setEndTime(endTimeInitial ?? duration);
-    setCurrentTime(startTimeInitial ?? 0);
-  }, [startTimeInitial, endTimeInitial]);
+    if (duration !== null) {
+      setStartTime(startTimeInitial ?? 0);
+      setEndTime(endTimeInitial ?? duration);
+      setCurrentTime(startTimeInitial ?? 0);
+    }
+  }, [duration, startTimeInitial, endTimeInitial]);
 
   const zoomedDuration = endTime - startTime;
 
@@ -111,6 +113,7 @@ function ZoomProvider(props: ZoomProviderProps) {
   }, [currentTime, mode]);
 
   const zoomIn = () => {
+    if (duration === null) return;
     const newStartTime = Math.max(0, startTime + 0.2 * zoomedDuration);
     const newEndTime = Math.min(duration, endTime - 0.2 * zoomedDuration);
     setStartTime(newStartTime);
@@ -119,6 +122,7 @@ function ZoomProvider(props: ZoomProviderProps) {
   };
 
   const zoomOut = () => {
+    if (duration === null) return;
     const newStartTime = Math.max(0, startTime - (1 / 3) * zoomedDuration);
     const newEndTime = Math.min(duration, endTime + (1 / 3) * zoomedDuration);
     setStartTime(newStartTime);
@@ -127,20 +131,22 @@ function ZoomProvider(props: ZoomProviderProps) {
   };
 
   const nextPage = () => {
+    if (duration === null) return;
     const newEndTime = Math.min(duration, endTime + zoomedDuration);
     const newStartTime = Math.max(0, newEndTime - zoomedDuration);
     setStartTime(newStartTime);
     setEndTime(newEndTime);
   };
 
   const previousPage = () => {
+    if (duration === null) return;
     const newStartTime = Math.max(0, startTime - zoomedDuration);
     const newEndTime = Math.min(duration, newStartTime + zoomedDuration);
     setStartTime(newStartTime);
     setEndTime(newEndTime);
   };
 
-  const isZoomed = startTime > 0 || endTime < duration;
+  const isZoomed = duration !== null && (startTime > 0 || endTime < duration);
 
   return (
     <ZoomContext.Provider