diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e105a0c..fae48ba 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -14,9 +14,9 @@ import { Waveform } from './Waveform';
 import { ControlBar } from './ControlBar';
 import { SeekBar } from './SeekBar';
 import './App.css';
-import { Duration } from './generated/google/protobuf/duration';
 import { firstValueFrom, from, Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
+import millisFromDuration from './helpers/millisFromDuration';
 
 // ported from backend, where should they live?
 const thumbnailWidth = 177;
@@ -391,13 +391,6 @@ function App(): JSX.Element {
 
 export default App;
 
-function millisFromDuration(dur?: Duration): number {
-  if (dur == undefined) {
-    return 0;
-  }
-  return Math.floor(dur.seconds * 1000.0 + dur.nanos / 1000.0 / 1000.0);
-}
-
 export function newRPC(): GrpcWebImpl {
   return new GrpcWebImpl(apiURL, {});
 }