Rename CanvasLogicalWidth to CanvasWidth

frontend/src/App.tsx

@@ -13,8 +13,8 @@ import { WaveformCanvas } from './WaveformCanvas';
 import { HudCanvas } from './HudCanvas';
 import { Player, PlayState } from './Player';
 import {
-  CanvasLogicalWidth,
+  CanvasWidth,
-  CanvasLogicalHeight,
+  CanvasHeight,
   EmptySelectionAction,
 } from './HudCanvasState';
 import { ControlBar } from './ControlBar';
@@ -95,7 +95,7 @@ function App(): JSX.Element {
       console.log('fetching audio...');
       const audioProgressStream = service.GetPeaks({
         id: mediaSet.id,
-        numBins: CanvasLogicalWidth,
+        numBins: CanvasWidth,
       });
       const peaks = audioProgressStream.pipe(map((progress) => progress.peaks));
       dispatch({ type: 'overviewpeaksloaded', peaks: peaks });
@@ -142,7 +142,7 @@ function App(): JSX.Element {
       const service = new MediaSetServiceClientImpl(newRPC());
       const segment = await service.GetPeaksForSegment({
         id: mediaSet.id,
-        numBins: CanvasLogicalWidth,
+        numBins: CanvasWidth,
         startFrame: viewport.start,
         endFrame: viewport.end,
       });
@@ -332,15 +332,15 @@ function App(): JSX.Element {
               <WaveformCanvas
                 peaks={overviewPeaks}
                 channels={mediaSet.audioChannels}
-                width={CanvasLogicalWidth}
+                width={CanvasWidth}
-                height={CanvasLogicalHeight}
+                height={CanvasHeight}
                 strokeStyle="black"
                 fillStyle="#003300"
                 alpha={1}
               ></WaveformCanvas>
               <HudCanvas
-                width={CanvasLogicalWidth}
+                width={CanvasWidth}
-                height={CanvasLogicalHeight}
+                height={CanvasHeight}
                 emptySelectionAction={EmptySelectionAction.SelectPrevious}
                 styles={{
                   borderLineWidth: 4,
@@ -349,7 +349,7 @@ function App(): JSX.Element {
                   positionStrokeStyle: 'red',
                   hoverPositionStrokeStyle: 'transparent',
                 }}
-                position={(position.percent / 100) * CanvasLogicalWidth}
+                position={(position.percent / 100) * CanvasWidth}
                 selection={viewportCanvas}
                 onSelectionChange={(event) =>
                   dispatch({ type: 'viewportchanged', event })
@@ -361,15 +361,15 @@ function App(): JSX.Element {
               <WaveformCanvas
                 peaks={waveformPeaks}
                 channels={mediaSet.audioChannels}
-                width={CanvasLogicalWidth}
+                width={CanvasWidth}
-                height={CanvasLogicalHeight}
+                height={CanvasHeight}
                 strokeStyle="green"
                 fillStyle="black"
                 alpha={1}
               ></WaveformCanvas>
               <HudCanvas
-                width={CanvasLogicalWidth}
+                width={CanvasWidth}
-                height={CanvasLogicalHeight}
+                height={CanvasHeight}
                 emptySelectionAction={EmptySelectionAction.SelectNothing}
                 styles={{
                   borderLineWidth: 0,
@@ -381,7 +381,7 @@ function App(): JSX.Element {
                 position={frameToWaveformCanvasX(
                   position.frame,
                   viewport,
-                  CanvasLogicalWidth
+                  CanvasWidth
                 )}
                 selection={selectionCanvas}
                 onSelectionChange={(event) =>

frontend/src/AppState.test.ts

@@ -2,7 +2,7 @@ import { MediaSet } from './generated/media_set';
 import { stateReducer, State } from './AppState';
 import { from } from 'rxjs';
 import { PlayState } from './Player';
-import { CanvasLogicalWidth } from './HudCanvasState';
+import { CanvasWidth } from './HudCanvasState';
 
 const initialState: State = {
   selection: { start: 0, end: 0 },
@@ -10,7 +10,7 @@ const initialState: State = {
   overviewPeaks: from([]),
   waveformPeaks: from([]),
   selectionCanvas: { x1: 0, x2: 0 },
-  viewportCanvas: { x1: 0, x2: CanvasLogicalWidth },
+  viewportCanvas: { x1: 0, x2: CanvasWidth },
   position: { currentTime: 0, frame: 0, percent: 0 },
   audioSrc: '',
   videoSrc: '',

frontend/src/AppState.tsx

@@ -1,7 +1,7 @@
 import { MediaSet } from './generated/media_set';
 import { Observable } from 'rxjs';
 import { SelectionChangeEvent } from './HudCanvas';
-import { CanvasRange, SelectionMode, CanvasLogicalWidth } from './HudCanvasState';
+import { CanvasRange, SelectionMode, CanvasWidth } from './HudCanvasState';
 import { PlayState } from './Player';
 import { zoomViewportIn, zoomViewportOut } from './helpers/zoom';
 import frameToWaveformCanvasX from './helpers/frameToWaveformCanvasX';
@@ -160,7 +160,7 @@ function handleMediaSetLoaded(
   { mediaSet }: MediaSetLoadedAction
 ): State {
   const numFrames = Math.min(
-    Math.round(mediaSet.audioFrames / CanvasLogicalWidth) *
+    Math.round(mediaSet.audioFrames / CanvasWidth) *
       initialViewportCanvasPixels,
     mediaSet.audioFrames
   );
@@ -218,12 +218,8 @@ function setViewport(state: State, { viewport }: SetViewportAction): State {
     ...state,
     viewport: viewport,
     viewportCanvas: {
-      x1: Math.round(
+      x1: Math.round((viewport.start / mediaSet.audioFrames) * CanvasWidth),
-        (viewport.start / mediaSet.audioFrames) * CanvasLogicalWidth
+      x2: Math.round((viewport.end / mediaSet.audioFrames) * CanvasWidth),
-      ),
-      x2: Math.round(
-        (viewport.end / mediaSet.audioFrames) * CanvasLogicalWidth
-      ),
     },
     selectionCanvas: selectionToWaveformCanvasRange(selection, viewport),
   };
@@ -291,12 +287,8 @@ function handleViewportChanged(
   }
 
   const newViewport = {
-    start: Math.round(
+    start: Math.round(mediaSet.audioFrames * (canvasRange.x1 / CanvasWidth)),
-      mediaSet.audioFrames * (canvasRange.x1 / CanvasLogicalWidth)
+    end: Math.round(mediaSet.audioFrames * (canvasRange.x2 / CanvasWidth)),
-    ),
-    end: Math.round(
-      mediaSet.audioFrames * (canvasRange.x2 / CanvasLogicalWidth)
-    ),
   };
 
   return {
@@ -323,7 +315,7 @@ function handleWaveformSelectionChanged(
     return state;
   }
 
-  const framesPerPixel = (viewport.end - viewport.start) / CanvasLogicalWidth;
+  const framesPerPixel = (viewport.end - viewport.start) / CanvasWidth;
   const newSelection = {
     start: Math.round(viewport.start + canvasRange.x1 * framesPerPixel),
     end: Math.round(viewport.start + canvasRange.x2 * framesPerPixel),
@@ -415,20 +407,12 @@ function selectionToWaveformCanvasRange(
   selection: FrameRange,
   viewport: FrameRange
 ): CanvasRange {
-  const x1 = frameToWaveformCanvasX(
+  const x1 = frameToWaveformCanvasX(selection.start, viewport, CanvasWidth);
-    selection.start,
+  const x2 = frameToWaveformCanvasX(selection.end, viewport, CanvasWidth);
-    viewport,
-    CanvasLogicalWidth
-  );
-  const x2 = frameToWaveformCanvasX(
-    selection.end,
-    viewport,
-    CanvasLogicalWidth
-  );
 
   if (x1 == x2) {
     return { x1: 0, x2: 0 };
   }
 
-  return { x1: x1 || 0, x2: x2 || CanvasLogicalWidth };
+  return { x1: x1 || 0, x2: x2 || CanvasWidth };
 }

frontend/src/HudCanvasState.ts

@@ -1,7 +1,7 @@
 import constrainNumeric from './helpers/constrainNumeric';
 
-export const CanvasLogicalWidth = 2000;
+export const CanvasWidth = 2000;
-export const CanvasLogicalHeight = 500;
+export const CanvasHeight = 500;
 
 export interface CanvasRange {
   x1: number;