diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f1882cd..7184ba1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -13,8 +13,8 @@ import { WaveformCanvas } from './WaveformCanvas';
import { HudCanvas } from './HudCanvas';
import { Player, PlayState } from './Player';
import {
- CanvasLogicalWidth,
- CanvasLogicalHeight,
+ CanvasWidth,
+ 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 {
dispatch({ type: 'viewportchanged', event })
@@ -361,15 +361,15 @@ function App(): JSX.Element {
diff --git a/frontend/src/AppState.test.ts b/frontend/src/AppState.test.ts
index fc295a9..85c8162 100644
--- a/frontend/src/AppState.test.ts
+++ b/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: '',
diff --git a/frontend/src/AppState.tsx b/frontend/src/AppState.tsx
index a5ca426..02cc0fa 100644
--- a/frontend/src/AppState.tsx
+++ b/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(
- (viewport.start / mediaSet.audioFrames) * CanvasLogicalWidth
- ),
- x2: Math.round(
- (viewport.end / mediaSet.audioFrames) * CanvasLogicalWidth
- ),
+ x1: Math.round((viewport.start / mediaSet.audioFrames) * CanvasWidth),
+ x2: Math.round((viewport.end / mediaSet.audioFrames) * CanvasWidth),
},
selectionCanvas: selectionToWaveformCanvasRange(selection, viewport),
};
@@ -291,12 +287,8 @@ function handleViewportChanged(
}
const newViewport = {
- start: Math.round(
- mediaSet.audioFrames * (canvasRange.x1 / CanvasLogicalWidth)
- ),
- end: Math.round(
- mediaSet.audioFrames * (canvasRange.x2 / CanvasLogicalWidth)
- ),
+ start: Math.round(mediaSet.audioFrames * (canvasRange.x1 / CanvasWidth)),
+ end: Math.round(mediaSet.audioFrames * (canvasRange.x2 / CanvasWidth)),
};
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(
- selection.start,
- viewport,
- CanvasLogicalWidth
- );
- const x2 = frameToWaveformCanvasX(
- selection.end,
- viewport,
- CanvasLogicalWidth
- );
+ const x1 = frameToWaveformCanvasX(selection.start, viewport, CanvasWidth);
+ const x2 = frameToWaveformCanvasX(selection.end, viewport, CanvasWidth);
if (x1 == x2) {
return { x1: 0, x2: 0 };
}
- return { x1: x1 || 0, x2: x2 || CanvasLogicalWidth };
+ return { x1: x1 || 0, x2: x2 || CanvasWidth };
}
diff --git a/frontend/src/HudCanvasState.ts b/frontend/src/HudCanvasState.ts
index db78448..b9be2ab 100644
--- a/frontend/src/HudCanvasState.ts
+++ b/frontend/src/HudCanvasState.ts
@@ -1,7 +1,7 @@
import constrainNumeric from './helpers/constrainNumeric';
-export const CanvasLogicalWidth = 2000;
-export const CanvasLogicalHeight = 500;
+export const CanvasWidth = 2000;
+export const CanvasHeight = 500;
export interface CanvasRange {
x1: number;