frontend: Add Zoom buttons

frontend/src/App.tsx

@@ -276,6 +276,36 @@ function App(): JSX.Element {
     })();
   }, [mediaSet, selection]);
 
+  const handleZoomIn = useCallback(() => {
+    if (mediaSet == null) {
+      return;
+    }
+    if (viewport.start == viewport.end) {
+      return;
+    }
+    setViewport({
+      ...viewport,
+      end: viewport.end - Math.round((viewport.end - viewport.start) / 2),
+    });
+  }, [mediaSet, viewport]);
+
+  const handleZoomOut = useCallback(() => {
+    if (mediaSet == null) {
+      return;
+    }
+    if (viewport.start == viewport.end) {
+      return;
+    }
+    let end = viewport.end + Math.round(viewport.end - viewport.start);
+    if (end > mediaSet.audioFrames) {
+      end = mediaSet.audioFrames;
+    }
+    setViewport({
+      ...viewport,
+      end: end,
+    });
+  }, [mediaSet, viewport]);
+
   const setPositionFromFrame = useCallback(
     (frame: number) => {
       if (mediaSet == null) {
@@ -331,6 +361,8 @@ function App(): JSX.Element {
             onPlay={handlePlay}
             onPause={handlePause}
             onClip={handleClip}
+            onZoomIn={handleZoomIn}
+            onZoomOut={handleZoomOut}
           />
 
           <Overview

frontend/src/ControlBar.tsx

@@ -4,6 +4,8 @@ interface Props {
   onPlay: () => void;
   onPause: () => void;
   onClip: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
 }
 
 const ControlBar: React.FC<Props> = React.memo((props: Props) => {
@@ -30,6 +32,12 @@ const ControlBar: React.FC<Props> = React.memo((props: Props) => {
         <button style={buttonStyles} onClick={props.onClip}>
           Clip
         </button>
+        <button style={buttonStyles} onClick={props.onZoomIn}>
+          Zoom In
+        </button>
+        <button style={buttonStyles} onClick={props.onZoomOut}>
+          Zoom Out
+        </button>
       </div>
     </>
   );

frontend/src/Waveform.tsx

@@ -45,7 +45,12 @@ export const Waveform: React.FC<Props> = ({
         return;
       }
 
-      console.log('fetch audio segment, frames', viewport);
+      console.log(
+        'fetch audio segment, range',
+        viewport,
+        'numFrames',
+        viewport.end - viewport.start
+      );
 
       const service = new MediaSetServiceClientImpl(newRPC());
       const segment = await service.GetPeaksForSegment({