From a9ea462b413f95479d30567be7676a68150170dc Mon Sep 17 00:00:00 2001 From: Rob Watson Date: Fri, 4 Feb 2022 08:37:39 +0100 Subject: [PATCH] Rename CanvasLogicalWidth to CanvasWidth --- frontend/src/App.tsx | 28 +++++++++++++------------- frontend/src/AppState.test.ts | 4 ++-- frontend/src/AppState.tsx | 36 ++++++++++------------------------ frontend/src/HudCanvasState.ts | 4 ++-- 4 files changed, 28 insertions(+), 44 deletions(-) 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;