@waveform-playlist/ui-components 9.1.0 → 9.1.2

package/dist/index.d.mts

@@ -375,10 +375,10 @@ declare const PlayheadWithMarker: react__default.FC<PlayheadProps>;
 
 interface PlaylistProps {
     readonly theme: DefaultTheme;
-    readonly children?: JSX.Element | JSX.Element[];
+    readonly children?: react__default.ReactNode;
     readonly backgroundColor?: string;
     readonly timescaleBackgroundColor?: string;
-    readonly timescale?: JSX.Element;
+    readonly timescale?: react__default.ReactElement;
     readonly timescaleWidth?: number;
     readonly tracksWidth?: number;
     readonly controlsWidth?: number;

package/dist/index.d.ts

@@ -375,10 +375,10 @@ declare const PlayheadWithMarker: react__default.FC<PlayheadProps>;
 
 interface PlaylistProps {
     readonly theme: DefaultTheme;
-    readonly children?: JSX.Element | JSX.Element[];
+    readonly children?: react__default.ReactNode;
     readonly backgroundColor?: string;
     readonly timescaleBackgroundColor?: string;
-    readonly timescale?: JSX.Element;
+    readonly timescale?: react__default.ReactElement;
     readonly timescaleWidth?: number;
     readonly tracksWidth?: number;
     readonly controlsWidth?: number;

package/dist/index.js

@@ -1214,6 +1214,7 @@ var FadeOverlay = ({
 };
 
 // src/components/Clip.tsx
+var import_core2 = require("@waveform-playlist/core");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   style: props.$isOverlay ? {} : {
@@ -1227,13 +1228,8 @@ var ClipContainer = import_styled_components13.default.div.attrs((props) => ({
   width: ${(props) => props.$isOverlay ? `${props.$width}px` : "auto"};
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.05);
   z-index: 10; /* Above progress overlay (z-index: 2) but below controls/playhead */
   pointer-events: none; /* Let clicks pass through to ClickOverlay for playhead positioning */
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.08);
-  }
 `;
 var ChannelsWrapper = import_styled_components13.default.div`
   flex: 1;
@@ -1263,8 +1259,7 @@ var Clip = ({
   touchOptimized = false
 }) => {
   const left = Math.floor(startSample / samplesPerPixel);
-  const endPixel = Math.floor((startSample + durationSamples) / samplesPerPixel);
-  const width = endPixel - left;
+  const width = (0, import_core2.clipPixelWidth)(startSample, durationSamples, samplesPerPixel);
   const enableDrag = showHeader && !disableHeaderDrag && !isOverlay;
   const draggableId = `clip-${trackIndex}-${clipIndex}`;
   const {
@@ -1416,7 +1411,7 @@ var MasterVolumeControl = ({
 // src/components/PianoRollChannel.tsx
 var import_react8 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
-var import_core2 = require("@waveform-playlist/core");
+var import_core3 = require("@waveform-playlist/core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var NoteCanvas = import_styled_components15.default.canvas.attrs((props) => ({
   style: {
@@ -1459,7 +1454,7 @@ var PianoRollChannel = ({
 }) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core2.MAX_CANVAS_WIDTH, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
   const { minMidi, maxMidi } = (0, import_react8.useMemo)(() => {
     if (midiNotes.length === 0) return { minMidi: 0, maxMidi: 127 };
     let min = 127, max = 0;
@@ -1476,7 +1471,7 @@ var PianoRollChannel = ({
     const noteHeight = Math.max(2, waveHeight / noteRange);
     const pixelsPerSecond = sampleRate / samplesPerPixel;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const chunkPixelStart = canvasIdx * import_core2.MAX_CANVAS_WIDTH;
+      const chunkPixelStart = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
       const canvasWidth = canvas.width / devicePixelRatio;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
@@ -1522,8 +1517,8 @@ var PianoRollChannel = ({
     index
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core2.MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, import_core2.MAX_CANVAS_WIDTH);
+    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       NoteCanvas,
       {
@@ -2145,7 +2140,7 @@ function clockFormat(seconds, decimals) {
   const hours = Math.floor(seconds / 3600) % 24;
   const minutes = Math.floor(seconds / 60) % 60;
   const secs = (seconds % 60).toFixed(decimals);
-  return String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + secs.padStart(decimals + 3, "0");
+  return String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + secs.padStart(decimals > 0 ? decimals + 3 : 2, "0");
 }
 function formatTime(seconds, format) {
   switch (format) {
@@ -2385,7 +2380,7 @@ var usePlayoutStatusUpdate = () => (0, import_react18.useContext)(PlayoutStatusU
 // src/components/SpectrogramChannel.tsx
 var import_react19 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_core3 = require("@waveform-playlist/core");
+var import_core4 = require("@waveform-playlist/core");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
 var Wrapper4 = import_styled_components21.default.div.attrs((props) => ({
@@ -2444,7 +2439,7 @@ var SpectrogramChannel = ({
   const onCanvasesReadyRef = (0, import_react19.useRef)(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core4.MAX_CANVAS_WIDTH, clipOriginX);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
@@ -2510,10 +2505,10 @@ var SpectrogramChannel = ({
         const match = id.match(/chunk(\d+)$/);
         if (!match) {
           console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return import_core3.MAX_CANVAS_WIDTH;
+          return import_core4.MAX_CANVAS_WIDTH;
         }
         const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * import_core3.MAX_CANVAS_WIDTH, import_core3.MAX_CANVAS_WIDTH);
+        return Math.min(length - chunkIdx * import_core4.MAX_CANVAS_WIDTH, import_core4.MAX_CANVAS_WIDTH);
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
@@ -2545,7 +2540,7 @@ var SpectrogramChannel = ({
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const globalPixelOffset = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
+      const globalPixelOffset = canvasIdx * import_core4.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2621,8 +2616,8 @@ var SpectrogramChannel = ({
     visibleChunkIndices
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
+    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SpectrogramCanvas,
       {
@@ -2919,7 +2914,7 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_core4 = require("@waveform-playlist/core");
+var import_core5 = require("@waveform-playlist/core");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
@@ -3007,10 +3002,10 @@ var TimeScale = (props) => {
     renderTimestamp,
     timeScaleHeight
   ]);
-  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core4.MAX_CANVAS_WIDTH);
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core5.MAX_CANVAS_WIDTH);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
-    const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
+    const chunkLeft = i * import_core5.MAX_CANVAS_WIDTH;
+    const chunkWidth = Math.min(widthX - chunkLeft, import_core5.MAX_CANVAS_WIDTH);
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       TimeTickChunk,
       {
@@ -3025,14 +3020,14 @@ var TimeScale = (props) => {
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core4.MAX_CANVAS_WIDTH : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core4.MAX_CANVAS_WIDTH : Infinity;
+  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core5.MAX_CANVAS_WIDTH : 0;
+  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core5.MAX_CANVAS_WIDTH : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
   (0, import_react21.useLayoutEffect)(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * import_core4.MAX_CANVAS_WIDTH;
+      const chunkLeft = chunkIdx * import_core5.MAX_CANVAS_WIDTH;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);