fix waveform color

use css filter
closes #2262

src/renderer/src/App.tsx

@@ -537,7 +537,7 @@ function App() {
   const shouldShowWaveform = calcShouldShowWaveform(zoomedDuration);
 
   const { neighbouringKeyFrames, findNearestKeyFrameTime } = useKeyframes({ keyframesEnabled, filePath, commandedTime, videoStream: activeVideoStream, detectedFps, ffmpegExtractWindow });
-  const { waveforms } = useWaveform({ darkMode, filePath, relevantTime, waveformEnabled, audioStream: activeAudioStream, ffmpegExtractWindow, duration });
+  const { waveforms } = useWaveform({ filePath, relevantTime, waveformEnabled, audioStream: activeAudioStream, ffmpegExtractWindow, duration });
 
   const resetState = useCallback(() => {
     console.log('State reset');
@@ -2418,7 +2418,7 @@ function App() {
                     {filePath != null && compatPlayerEnabled && <MediaSourcePlayer rotate={effectiveRotation} filePath={filePath} videoStream={activeVideoStream} audioStream={activeAudioStream} playerTime={playerTime ?? 0} commandedTime={commandedTime} playing={playing} eventId={compatPlayerEventId} masterVideoRef={videoRef} mediaSourceQuality={mediaSourceQuality} playbackVolume={playbackVolume} />}
                   </div>
 
-                  {bigWaveformEnabled && <BigWaveform waveforms={waveforms} relevantTime={relevantTime} playing={playing} durationSafe={durationSafe} zoom={zoomUnrounded} seekRel={seekRel} />}
+                  {bigWaveformEnabled && <BigWaveform waveforms={waveforms} relevantTime={relevantTime} playing={playing} durationSafe={durationSafe} zoom={zoomUnrounded} seekRel={seekRel} darkMode={darkMode} />}
 
                   {compatPlayerEnabled && (
                     <div style={{ position: 'absolute', top: 0, right: 0, left: 0, marginTop: '1em', marginLeft: '1em', color: 'white', opacity: 0.7, display: 'flex', alignItems: 'center', pointerEvents: 'none' }}>

src/renderer/src/colors.ts

@@ -1,8 +1,6 @@
 export const saveColor = 'var(--green11)';
 export const primaryColor = 'var(--cyan9)';
 export const primaryTextColor = 'var(--cyan11)';
-export const waveformColorLight = '#000000'; // Must be hex because used by ffmpeg
-export const waveformColorDark = '#ffffff'; // Must be hex because used by ffmpeg
 export const controlsBackground = 'var(--gray4)';
 export const timelineBackground = 'var(--gray2)';
 export const darkModeTransition = 'background .5s';

src/renderer/src/components/BigWaveform.tsx

@@ -5,8 +5,14 @@ import { ffmpegExtractWindow } from '../util/constants';
 import { RenderableWaveform } from '../types';
 
 
-function BigWaveform({ waveforms, relevantTime, playing, durationSafe, zoom, seekRel }: {
-  waveforms: RenderableWaveform[], relevantTime: number, playing: boolean, durationSafe: number, zoom: number, seekRel: (a: number) => void,
+function BigWaveform({ waveforms, relevantTime, playing, durationSafe, zoom, seekRel, darkMode }: {
+  waveforms: RenderableWaveform[],
+  relevantTime: number,
+  playing: boolean,
+  durationSafe: number,
+  zoom: number,
+  seekRel: (a: number) => void,
+  darkMode: boolean,
 }) {
   const windowSize = ffmpegExtractWindow * 2;
   const windowStart = Math.max(0, relevantTime - windowSize);
@@ -79,7 +85,7 @@ function BigWaveform({ waveforms, relevantTime, playing, durationSafe, zoom, see
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       ref={containerRef}
-      style={{ height: '100%', width: '100%', position: 'relative', cursor: 'grab' }}
+      style={{ height: '100%', width: '100%', position: 'relative', cursor: 'grab', backgroundColor: 'var(--gray3)' }}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp}
@@ -94,13 +100,13 @@ function BigWaveform({ waveforms, relevantTime, playing, durationSafe, zoom, see
 
         const style: CSSProperties = {
           pointerEvents: 'none',
-          backgroundColor: 'var(--gray3)',
           position: 'absolute',
           height: '100%',
           width: widthPercent,
           left: leftPercent,
           borderLeft: waveform.from === 0 ? '1px solid var(--gray11)' : undefined,
           borderRight: waveform.to >= durationSafe ? '1px solid var(--gray11)' : undefined,
+          filter: darkMode ? undefined : 'invert(1)',
         };
 
         if (waveform.url == null) {

src/renderer/src/hooks/useWaveform.ts

@@ -1,7 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import sortBy from 'lodash/sortBy';
 import { useThrottle } from '@uidotdev/usehooks';
-import { waveformColorDark, waveformColorLight } from '../colors';
 
 import { renderWaveformPng, safeCreateBlob } from '../ffmpeg';
 import { RenderableWaveform } from '../types';
@@ -11,8 +10,13 @@ import { FFprobeStream } from '../../../../ffprobe';
 const maxWaveforms = 100;
 // const maxWaveforms = 3; // testing
 
-export default ({ darkMode, filePath, relevantTime, duration, waveformEnabled, audioStream, ffmpegExtractWindow }: {
-  darkMode: boolean, filePath: string | undefined, relevantTime: number, duration: number | undefined, waveformEnabled: boolean, audioStream: FFprobeStream | undefined, ffmpegExtractWindow: number,
+export default ({ filePath, relevantTime, duration, waveformEnabled, audioStream, ffmpegExtractWindow }: {
+  filePath: string | undefined,
+  relevantTime: number,
+  duration: number | undefined,
+  waveformEnabled: boolean,
+  audioStream: FFprobeStream | undefined,
+  ffmpegExtractWindow: number,
 }) => {
   const creatingWaveformPromise = useRef<Promise<unknown>>();
   const [waveforms, setWaveforms] = useState<RenderableWaveform[]>([]);
@@ -22,8 +26,6 @@ export default ({ darkMode, filePath, relevantTime, duration, waveformEnabled, a
     waveformsRef.current = waveforms;
   }, [waveforms]);
 
-  const waveformColor = darkMode ? waveformColorDark : waveformColorLight;
-
   useEffect(() => {
     waveformsRef.current = [];
     setWaveforms([]);
@@ -43,7 +45,7 @@ export default ({ darkMode, filePath, relevantTime, duration, waveformEnabled, a
       if (!shouldRun) return;
 
       try {
-        const promise = renderWaveformPng({ filePath, start: waveformStartTimeThrottled, duration: safeExtractDuration, color: waveformColor, streamIndex: audioStream.index });
+        const promise = renderWaveformPng({ filePath, start: waveformStartTimeThrottled, duration: safeExtractDuration, color: '##000000', streamIndex: audioStream.index });
         creatingWaveformPromise.current = promise;
 
         setWaveforms((currentWaveforms) => {
@@ -88,7 +90,7 @@ export default ({ darkMode, filePath, relevantTime, duration, waveformEnabled, a
     return () => {
       aborted = true;
     };
-  }, [audioStream, filePath, safeExtractDuration, waveformColor, waveformEnabled, waveformStartTimeThrottled]);
+  }, [audioStream, filePath, safeExtractDuration, waveformEnabled, waveformStartTimeThrottled]);
 
   const lastWaveformsRef = useRef<RenderableWaveform[]>([]);
   useEffect(() => {