@djangocfg/ui-tools 2.1.209 → 2.1.210

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkHJMDAPQH_cjs = require('./chunk-HJMDAPQH.cjs');
+var chunkDF6ORMTF_cjs = require('./chunk-DF6ORMTF.cjs');
 var chunk46VDB3BJ_cjs = require('./chunk-46VDB3BJ.cjs');
 require('./chunk-F2N7P5XU.cjs');
 var chunkIPRNIM7L_cjs = require('./chunk-IPRNIM7L.cjs');
@@ -791,21 +791,21 @@ function AudioLoadingFallback() {
 }
 chunkWGEGR3DF_cjs.__name(AudioLoadingFallback, "AudioLoadingFallback");
 var LazyHybridAudioPlayer = createLazyComponent(
-  () => import('./components-F2ZYYCH4.cjs').then((mod) => ({ default: mod.HybridAudioPlayer })),
+  () => import('./components-4Z2JIRZI.cjs').then((mod) => ({ default: mod.HybridAudioPlayer })),
   {
     displayName: "LazyHybridAudioPlayer",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(AudioLoadingFallback, {})
   }
 );
 var LazyHybridSimplePlayer = createLazyComponent(
-  () => import('./components-F2ZYYCH4.cjs').then((mod) => ({ default: mod.HybridSimplePlayer })),
+  () => import('./components-4Z2JIRZI.cjs').then((mod) => ({ default: mod.HybridSimplePlayer })),
   {
     displayName: "LazyHybridSimplePlayer",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(AudioLoadingFallback, {})
   }
 );
 var LazyHybridCompactPlayer = createLazyComponent(
-  () => import('./components-F2ZYYCH4.cjs').then((mod) => ({ default: mod.HybridCompactPlayer })),
+  () => import('./components-4Z2JIRZI.cjs').then((mod) => ({ default: mod.HybridCompactPlayer })),
   {
     displayName: "LazyHybridCompactPlayer",
     fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 h-8 px-1 animate-pulse", children: [
@@ -906,143 +906,143 @@ chunkWGEGR3DF_cjs.__name(CronSchedulerFallback, "CronSchedulerFallback");
 
 Object.defineProperty(exports, "AudioReactiveCover", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.AudioReactiveCover; }
+  get: function () { return chunkDF6ORMTF_cjs.AudioReactiveCover; }
 });
 Object.defineProperty(exports, "COLOR_SCHEMES", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.COLOR_SCHEMES; }
+  get: function () { return chunkDF6ORMTF_cjs.COLOR_SCHEMES; }
 });
 Object.defineProperty(exports, "COLOR_SCHEME_INFO", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.COLOR_SCHEME_INFO; }
+  get: function () { return chunkDF6ORMTF_cjs.COLOR_SCHEME_INFO; }
 });
 Object.defineProperty(exports, "EFFECT_ANIMATIONS", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.EFFECT_ANIMATIONS; }
+  get: function () { return chunkDF6ORMTF_cjs.EFFECT_ANIMATIONS; }
 });
 Object.defineProperty(exports, "GlowEffect", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.GlowEffect; }
+  get: function () { return chunkDF6ORMTF_cjs.GlowEffect; }
 });
 Object.defineProperty(exports, "HybridAudioPlayer", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.HybridAudioPlayer; }
+  get: function () { return chunkDF6ORMTF_cjs.HybridAudioPlayer; }
 });
 Object.defineProperty(exports, "HybridAudioProvider", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.HybridAudioProvider; }
+  get: function () { return chunkDF6ORMTF_cjs.HybridAudioProvider; }
 });
 Object.defineProperty(exports, "HybridSimplePlayer", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.HybridSimplePlayer; }
+  get: function () { return chunkDF6ORMTF_cjs.HybridSimplePlayer; }
 });
 Object.defineProperty(exports, "HybridWaveform", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.HybridWaveform; }
+  get: function () { return chunkDF6ORMTF_cjs.HybridWaveform; }
 });
 Object.defineProperty(exports, "INTENSITY_CONFIG", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.INTENSITY_CONFIG; }
+  get: function () { return chunkDF6ORMTF_cjs.INTENSITY_CONFIG; }
 });
 Object.defineProperty(exports, "INTENSITY_INFO", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.INTENSITY_INFO; }
+  get: function () { return chunkDF6ORMTF_cjs.INTENSITY_INFO; }
 });
 Object.defineProperty(exports, "MeshEffect", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.MeshEffect; }
+  get: function () { return chunkDF6ORMTF_cjs.MeshEffect; }
 });
 Object.defineProperty(exports, "OrbsEffect", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.OrbsEffect; }
+  get: function () { return chunkDF6ORMTF_cjs.OrbsEffect; }
 });
 Object.defineProperty(exports, "SpotlightEffect", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.SpotlightEffect; }
+  get: function () { return chunkDF6ORMTF_cjs.SpotlightEffect; }
 });
 Object.defineProperty(exports, "VARIANT_INFO", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.VARIANT_INFO; }
+  get: function () { return chunkDF6ORMTF_cjs.VARIANT_INFO; }
 });
 Object.defineProperty(exports, "VisualizationProvider", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.VisualizationProvider; }
+  get: function () { return chunkDF6ORMTF_cjs.VisualizationProvider; }
 });
 Object.defineProperty(exports, "calculateGlowLayers", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.calculateGlowLayers; }
+  get: function () { return chunkDF6ORMTF_cjs.calculateGlowLayers; }
 });
 Object.defineProperty(exports, "calculateMeshGradients", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.calculateMeshGradients; }
+  get: function () { return chunkDF6ORMTF_cjs.calculateMeshGradients; }
 });
 Object.defineProperty(exports, "calculateOrbs", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.calculateOrbs; }
+  get: function () { return chunkDF6ORMTF_cjs.calculateOrbs; }
 });
 Object.defineProperty(exports, "calculateSpotlight", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.calculateSpotlight; }
+  get: function () { return chunkDF6ORMTF_cjs.calculateSpotlight; }
 });
 Object.defineProperty(exports, "formatTime", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.formatTime; }
+  get: function () { return chunkDF6ORMTF_cjs.formatTime; }
 });
 Object.defineProperty(exports, "getColors", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.getColors; }
+  get: function () { return chunkDF6ORMTF_cjs.getColors; }
 });
 Object.defineProperty(exports, "getEffectConfig", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.getEffectConfig; }
+  get: function () { return chunkDF6ORMTF_cjs.getEffectConfig; }
 });
 Object.defineProperty(exports, "prepareEffectColors", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.prepareEffectColors; }
+  get: function () { return chunkDF6ORMTF_cjs.prepareEffectColors; }
 });
 Object.defineProperty(exports, "useAudioBus", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useAudioBus; }
+  get: function () { return chunkDF6ORMTF_cjs.useAudioBus; }
 });
 Object.defineProperty(exports, "useAudioBusStore", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useAudioBusStore; }
+  get: function () { return chunkDF6ORMTF_cjs.useAudioBusStore; }
 });
 Object.defineProperty(exports, "useAudioVisualization", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useAudioVisualization; }
+  get: function () { return chunkDF6ORMTF_cjs.useAudioVisualization; }
 });
 Object.defineProperty(exports, "useHybridAudio", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridAudio; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridAudio; }
 });
 Object.defineProperty(exports, "useHybridAudioAnalysis", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridAudioAnalysis; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridAudioAnalysis; }
 });
 Object.defineProperty(exports, "useHybridAudioContext", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridAudioContext; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridAudioContext; }
 });
 Object.defineProperty(exports, "useHybridAudioControls", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridAudioControls; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridAudioControls; }
 });
 Object.defineProperty(exports, "useHybridAudioLevels", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridAudioLevels; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridAudioLevels; }
 });
 Object.defineProperty(exports, "useHybridAudioState", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridAudioState; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridAudioState; }
 });
 Object.defineProperty(exports, "useHybridWebAudio", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useHybridWebAudio; }
+  get: function () { return chunkDF6ORMTF_cjs.useHybridWebAudio; }
 });
 Object.defineProperty(exports, "useVisualization", {
   enumerable: true,
-  get: function () { return chunkHJMDAPQH_cjs.useVisualization; }
+  get: function () { return chunkDF6ORMTF_cjs.useVisualization; }
 });
 Object.defineProperty(exports, "NativeProvider", {
   enumerable: true,

package/dist/index.d.cts

@@ -842,6 +842,8 @@ interface HybridCompactPlayerProps {
     waveformMode?: 'frequency' | 'static';
     /** Show timer */
     showTimer?: boolean;
+    /** Button size — 'sm' (h-6 w-6) | 'md' (h-8 w-8, default) */
+    buttonSize?: 'sm' | 'md';
     /** Additional class name */
     className?: string;
     /** Callbacks */

package/dist/index.d.ts

@@ -842,6 +842,8 @@ interface HybridCompactPlayerProps {
     waveformMode?: 'frequency' | 'static';
     /** Show timer */
     showTimer?: boolean;
+    /** Button size — 'sm' (h-6 w-6) | 'md' (h-8 w-8, default) */
+    buttonSize?: 'sm' | 'md';
     /** Additional class name */
     className?: string;
     /** Callbacks */

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { AudioReactiveCover, COLOR_SCHEMES, COLOR_SCHEME_INFO, EFFECT_ANIMATIONS, GlowEffect, HybridAudioPlayer, HybridAudioProvider, HybridSimplePlayer, HybridWaveform, INTENSITY_CONFIG, INTENSITY_INFO, MeshEffect, OrbsEffect, SpotlightEffect, VARIANT_INFO, VisualizationProvider, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, formatTime, getColors, getEffectConfig, prepareEffectColors, useAudioBus, useAudioBusStore, useAudioVisualization, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useVisualization } from './chunk-CDP3K6BI.mjs';
+export { AudioReactiveCover, COLOR_SCHEMES, COLOR_SCHEME_INFO, EFFECT_ANIMATIONS, GlowEffect, HybridAudioPlayer, HybridAudioProvider, HybridSimplePlayer, HybridWaveform, INTENSITY_CONFIG, INTENSITY_INFO, MeshEffect, OrbsEffect, SpotlightEffect, VARIANT_INFO, VisualizationProvider, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, formatTime, getColors, getEffectConfig, prepareEffectColors, useAudioBus, useAudioBusStore, useAudioVisualization, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useVisualization } from './chunk-52WXASRO.mjs';
 export { NativeProvider, StreamProvider, VideoControls, VideoErrorFallback, VideoPlayer, VideoPlayerProvider, VidstackProvider, createVideoErrorFallback, isSimpleStreamSource, resolveFileSource, resolvePlayerMode, resolveStreamSource, useVideoPlayerContext } from './chunk-QKG4LERV.mjs';
 import './chunk-JWB2EWQO.mjs';
 export { ImageViewer } from './chunk-BEURMR25.mjs';
@@ -767,21 +767,21 @@ function AudioLoadingFallback() {
 }
 __name(AudioLoadingFallback, "AudioLoadingFallback");
 var LazyHybridAudioPlayer = createLazyComponent(
-  () => import('./components-3RJ5Y3TB.mjs').then((mod) => ({ default: mod.HybridAudioPlayer })),
+  () => import('./components-YWYUZQIH.mjs').then((mod) => ({ default: mod.HybridAudioPlayer })),
   {
     displayName: "LazyHybridAudioPlayer",
     fallback: /* @__PURE__ */ jsx(AudioLoadingFallback, {})
   }
 );
 var LazyHybridSimplePlayer = createLazyComponent(
-  () => import('./components-3RJ5Y3TB.mjs').then((mod) => ({ default: mod.HybridSimplePlayer })),
+  () => import('./components-YWYUZQIH.mjs').then((mod) => ({ default: mod.HybridSimplePlayer })),
   {
     displayName: "LazyHybridSimplePlayer",
     fallback: /* @__PURE__ */ jsx(AudioLoadingFallback, {})
   }
 );
 var LazyHybridCompactPlayer = createLazyComponent(
-  () => import('./components-3RJ5Y3TB.mjs').then((mod) => ({ default: mod.HybridCompactPlayer })),
+  () => import('./components-YWYUZQIH.mjs').then((mod) => ({ default: mod.HybridCompactPlayer })),
   {
     displayName: "LazyHybridCompactPlayer",
     fallback: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 h-8 px-1 animate-pulse", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.209",
+  "version": "2.1.210",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -78,8 +78,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.209",
-    "@djangocfg/ui-core": "^2.1.209",
+    "@djangocfg/i18n": "^2.1.210",
+    "@djangocfg/ui-core": "^2.1.210",
     "lucide-react": "^0.545.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -112,10 +112,10 @@
     "@maplibre/maplibre-gl-geocoder": "^1.7.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.209",
+    "@djangocfg/i18n": "^2.1.210",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.209",
-    "@djangocfg/ui-core": "^2.1.209",
+    "@djangocfg/typescript-config": "^2.1.210",
+    "@djangocfg/ui-core": "^2.1.210",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",

package/src/tools/AudioPlayer/AudioPlayer.story.tsx

@@ -121,3 +121,14 @@ export const CompactNoTimer = () => (
     />
   </div>
 );
+
+export const CompactSmall = () => (
+  <div className="max-w-sm space-y-2">
+    <p className="text-sm text-muted-foreground mb-3">
+      Small button size — for inline use in lists and cards.
+    </p>
+    <HybridCompactPlayer src={AUDIO_SAMPLES.sample1} title="Track 1" buttonSize="sm" />
+    <HybridCompactPlayer src={AUDIO_SAMPLES.sample2} title="Track 2" buttonSize="sm" waveformMode="static" />
+    <HybridCompactPlayer src={AUDIO_SAMPLES.sample3} title="Track 3" buttonSize="sm" showTimer={false} />
+  </div>
+);

package/src/tools/AudioPlayer/README.md

@@ -179,6 +179,7 @@ Single-row player — play/pause + waveform + timer. No cover art, no volume sli
 | `title` | `string` | - | Tooltip / aria-label |
 | `waveformMode` | `'frequency' \| 'static'` | `'frequency'` | Visualization mode |
 | `showTimer` | `boolean` | `true` | Show current/total time |
+| `buttonSize` | `'sm' \| 'md'` | `'md'` | Play button size (`sm` = h-6 w-6, `md` = h-8 w-8) |
 | `autoPlay` | `boolean` | `false` | Auto-play on load |
 | `loop` | `boolean` | `false` | Loop playback |
 | `initialVolume` | `number` | `1` | Initial volume 0-1 |

package/src/tools/AudioPlayer/components/HybridCompactPlayer.tsx

@@ -43,6 +43,8 @@ export interface HybridCompactPlayerProps {
   waveformMode?: 'frequency' | 'static';
   /** Show timer */
   showTimer?: boolean;
+  /** Button size — 'sm' (h-6 w-6) | 'md' (h-8 w-8, default) */
+  buttonSize?: 'sm' | 'md';
   /** Additional class name */
   className?: string;
   /** Callbacks */
@@ -64,6 +66,7 @@ export function HybridCompactPlayer({
   initialVolume = 1,
   waveformMode = 'frequency',
   showTimer = true,
+  buttonSize = 'md',
   className,
   onPlay,
   onPause,
@@ -85,6 +88,7 @@ export function HybridCompactPlayer({
         title={title}
         waveformMode={waveformMode}
         showTimer={showTimer}
+        buttonSize={buttonSize}
         className={className}
       />
     </HybridAudioProvider>
@@ -95,14 +99,20 @@ export function HybridCompactPlayer({
 // INNER (needs context)
 // =============================================================================
 
+const BUTTON_SIZE = {
+  sm: 'h-6 w-6',
+  md: 'h-8 w-8',
+} as const;
+
 interface InnerProps {
   title?: string;
   waveformMode: 'frequency' | 'static';
   showTimer: boolean;
+  buttonSize: 'sm' | 'md';
   className?: string;
 }
 
-function HybridCompactPlayerInner({ title, waveformMode, showTimer, className }: InnerProps) {
+function HybridCompactPlayerInner({ title, waveformMode, showTimer, buttonSize, className }: InnerProps) {
   const { state, controls } = useHybridAudioContext();
   const isLoading = !state.isReady;
 
@@ -112,7 +122,7 @@ function HybridCompactPlayerInner({ title, waveformMode, showTimer, className }:
       <Button
         variant="outline"
         size="icon"
-        className="h-8 w-8 flex-shrink-0"
+        className={cn(BUTTON_SIZE[buttonSize], 'flex-shrink-0')}
         onClick={controls.togglePlay}
         disabled={!state.isReady && !isLoading}
         title={title ?? (state.isPlaying ? 'Pause' : 'Play')}

package/src/tools/AudioPlayer/components/HybridWaveform.tsx

@@ -16,6 +16,7 @@
 import { useRef, useEffect, useCallback, memo } from 'react';
 import { useHybridAudioContext } from '../context/HybridAudioProvider';
 import { cn } from '@djangocfg/ui-core/lib';
+import { useThemeColor } from '@djangocfg/ui-core/styles/palette';
 
 // =============================================================================
 // TYPES
@@ -54,12 +55,18 @@ export const HybridWaveform = memo(function HybridWaveform({
   barWidth = 3,
   barGap = 2,
   barRadius = 2,
-  progressColor = 'hsl(217 91% 60%)',
-  waveColor = 'hsl(217 91% 60% / 0.3)',
-  bufferedColor = 'hsl(217 91% 60% / 0.15)',
+  progressColor,
+  waveColor,
+  bufferedColor,
   className,
   onSeek,
 }: HybridWaveformProps) {
+  const themePrimary = useThemeColor('primary');
+  const themePrimaryWave = useThemeColor('primary', 0.3);
+  const themePrimaryBuffered = useThemeColor('primary', 0.15);
+  const resolvedProgressColor = progressColor ?? themePrimary;
+  const resolvedWaveColor = waveColor ?? themePrimaryWave;
+  const resolvedBufferedColor = bufferedColor ?? themePrimaryBuffered;
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const animationRef = useRef<number | null>(null);
@@ -106,7 +113,7 @@ export const HybridWaveform = memo(function HybridWaveform({
 
     // Draw buffered regions at bottom
     if (state.buffered && state.duration > 0) {
-      ctx.fillStyle = bufferedColor;
+      ctx.fillStyle = resolvedBufferedColor;
       for (let i = 0; i < state.buffered.length; i++) {
         const start = (state.buffered.start(i) / state.duration) * width;
         const end = (state.buffered.end(i) / state.duration) * width;
@@ -136,7 +143,7 @@ export const HybridWaveform = memo(function HybridWaveform({
       const x = i * (barWidth + barGap) * dpr;
       const y = (canvasHeight - barHeight) / 2;
 
-      ctx.fillStyle = x < progressX ? progressColor : waveColor;
+      ctx.fillStyle = x < progressX ? resolvedProgressColor : resolvedWaveColor;
 
       // Draw rounded rect
       const radius = barRadius * dpr;
@@ -159,9 +166,9 @@ export const HybridWaveform = memo(function HybridWaveform({
     barWidth,
     barGap,
     barRadius,
-    progressColor,
-    waveColor,
-    bufferedColor,
+    resolvedProgressColor,
+    resolvedWaveColor,
+    resolvedBufferedColor,
   ]);
 
   // Render static progress bar
@@ -179,7 +186,7 @@ export const HybridWaveform = memo(function HybridWaveform({
 
     // Draw buffered regions
     if (state.buffered && state.duration > 0) {
-      ctx.fillStyle = bufferedColor;
+      ctx.fillStyle = resolvedBufferedColor;
       for (let i = 0; i < state.buffered.length; i++) {
         const start = (state.buffered.start(i) / state.duration) * width;
         const end = (state.buffered.end(i) / state.duration) * width;
@@ -192,11 +199,11 @@ export const HybridWaveform = memo(function HybridWaveform({
     const progressWidth = width * progress;
 
     // Background
-    ctx.fillStyle = waveColor;
+    ctx.fillStyle = resolvedWaveColor;
     ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, width, 4 * dpr);
 
     // Progress
-    ctx.fillStyle = progressColor;
+    ctx.fillStyle = resolvedProgressColor;
     ctx.fillRect(0, canvasHeight / 2 - 2 * dpr, progressWidth, 4 * dpr);
 
     // Handle
@@ -205,7 +212,7 @@ export const HybridWaveform = memo(function HybridWaveform({
       ctx.arc(progressWidth, canvasHeight / 2, 6 * dpr, 0, Math.PI * 2);
       ctx.fill();
     }
-  }, [state.buffered, state.duration, state.currentTime, progressColor, waveColor, bufferedColor]);
+  }, [state.buffered, state.duration, state.currentTime, resolvedProgressColor, resolvedWaveColor, resolvedBufferedColor]);
 
   // Resize canvas to match container
   useEffect(() => {