@waveform-playlist/ui-components 8.1.0 → 9.0.1

package/dist/index.mjs

@@ -649,6 +649,40 @@ function useChunkedCanvasRefs() {
 
 // src/components/Channel.tsx
 import { MAX_CANVAS_WIDTH } from "@waveform-playlist/core";
+
+// src/utils/peakRendering.ts
+function aggregatePeaks(data, bits, startIndex, endIndex) {
+  if (startIndex * 2 + 1 >= data.length) {
+    return null;
+  }
+  const maxValue = 2 ** (bits - 1);
+  let minPeak = data[startIndex * 2] / maxValue;
+  let maxPeak = data[startIndex * 2 + 1] / maxValue;
+  for (let p = startIndex + 1; p < endIndex; p++) {
+    if (p * 2 + 1 >= data.length) break;
+    const pMin = data[p * 2] / maxValue;
+    const pMax = data[p * 2 + 1] / maxValue;
+    if (pMin < minPeak) minPeak = pMin;
+    if (pMax > maxPeak) maxPeak = pMax;
+  }
+  return { min: minPeak, max: maxPeak };
+}
+function calculateBarRects(x, barWidth, halfHeight, minPeak, maxPeak, drawMode) {
+  const min = Math.abs(minPeak * halfHeight);
+  const max = Math.abs(maxPeak * halfHeight);
+  if (drawMode === "normal") {
+    return [{ x, y: halfHeight - max, width: barWidth, height: max + min }];
+  }
+  return [
+    { x, y: 0, width: barWidth, height: halfHeight - max },
+    { x, y: halfHeight + min, width: barWidth, height: halfHeight - min }
+  ];
+}
+function calculateFirstBarPosition(canvasStartGlobal, barWidth, step) {
+  return Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
+}
+
+// src/components/Channel.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 function createCanvasFillStyle(ctx, color, width, height) {
   if (!isWaveformGradient(color)) {
@@ -718,7 +752,6 @@ var Channel = (props) => {
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
-      const maxValue = 2 ** (bits - 1);
       if (ctx) {
         ctx.resetTransform();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -734,21 +767,16 @@ var Channel = (props) => {
         ctx.fillStyle = createCanvasFillStyle(ctx, fillColor, canvasWidth, waveHeight);
         const canvasStartGlobal = globalPixelOffset;
         const canvasEndGlobal = globalPixelOffset + canvasWidth;
-        const firstBarGlobal = Math.floor((canvasStartGlobal - barWidth + step) / step) * step;
+        const firstBarGlobal = calculateFirstBarPosition(canvasStartGlobal, barWidth, step);
         for (let barGlobal = Math.max(0, firstBarGlobal); barGlobal < canvasEndGlobal; barGlobal += step) {
           const x = barGlobal - canvasStartGlobal;
           if (x + barWidth <= 0) continue;
-          const peakIndex = barGlobal;
-          if (peakIndex * 2 + 1 < data.length) {
-            const minPeak = data[peakIndex * 2] / maxValue;
-            const maxPeak = data[peakIndex * 2 + 1] / maxValue;
-            const min = Math.abs(minPeak * h2);
-            const max = Math.abs(maxPeak * h2);
-            if (drawMode === "normal") {
-              ctx.fillRect(x, h2 - max, barWidth, max + min);
-            } else {
-              ctx.fillRect(x, 0, barWidth, h2 - max);
-              ctx.fillRect(x, h2 + min, barWidth, h2 - min);
+          const peakEnd = Math.min(barGlobal + step, length);
+          const peak = aggregatePeaks(data, bits, barGlobal, peakEnd);
+          if (peak) {
+            const rects = calculateBarRects(x, barWidth, h2, peak.min, peak.max, drawMode);
+            for (const rect of rects) {
+              ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
             }
           }
         }
@@ -840,8 +868,7 @@ var PlaylistErrorBoundary = class extends React4.Component {
 
 // src/components/Clip.tsx
 import styled13 from "styled-components";
-import { useDraggable } from "@dnd-kit/core";
-import { CSS } from "@dnd-kit/utilities";
+import { useDraggable } from "@dnd-kit/react";
 
 // src/components/ClipHeader.tsx
 import styled10 from "styled-components";
@@ -855,7 +882,7 @@ var HeaderContainer = styled10.div`
   display: flex;
   align-items: center;
   padding: 0 8px;
-  cursor: ${(props) => props.$interactive ? props.$isDragging ? "grabbing" : "grab" : "default"};
+  cursor: ${(props) => props.$interactive ? "grab" : "default"};
   user-select: none;
   z-index: 110;
   flex-shrink: 0;
@@ -885,7 +912,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ jsx7(HeaderContainer, { $isDragging: false, $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { children: trackName }) });
+  return /* @__PURE__ */ jsx7(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -899,16 +926,14 @@ var ClipHeader = ({
   if (disableDrag || !dragHandleProps) {
     return /* @__PURE__ */ jsx7(ClipHeaderPresentational, { trackName, isSelected });
   }
-  const { attributes, listeners, setActivatorNodeRef } = dragHandleProps;
+  const { handleRef } = dragHandleProps;
   return /* @__PURE__ */ jsx7(
     HeaderContainer,
     {
-      ref: setActivatorNodeRef,
+      ref: handleRef,
       "data-clip-id": clipId,
       $interactive: true,
       $isSelected: isSelected,
-      ...listeners,
-      ...attributes,
       children: /* @__PURE__ */ jsx7(TrackName, { children: trackName })
     }
   );
@@ -961,11 +986,11 @@ var ClipBoundary = ({
   if (!dragHandleProps) {
     return null;
   }
-  const { attributes, listeners, setActivatorNodeRef, isDragging } = dragHandleProps;
+  const { ref: boundaryRef, isDragging } = dragHandleProps;
   return /* @__PURE__ */ jsx8(
     BoundaryContainer,
     {
-      ref: setActivatorNodeRef,
+      ref: boundaryRef,
       "data-clip-id": clipId,
       "data-boundary-edge": edge,
       $edge: edge,
@@ -973,9 +998,7 @@ var ClipBoundary = ({
       $isHovered: isHovered,
       $touchOptimized: touchOptimized,
       onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      ...listeners,
-      ...attributes
+      onMouseLeave: () => setIsHovered(false)
     }
   );
 };
@@ -1096,42 +1119,34 @@ var Clip = ({
   const width = endPixel - left;
   const enableDrag = showHeader && !disableHeaderDrag && !isOverlay;
   const draggableId = `clip-${trackIndex}-${clipIndex}`;
-  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, isDragging } = useDraggable({
+  const {
+    ref: clipRef,
+    handleRef,
+    isDragSource
+  } = useDraggable({
     id: draggableId,
     data: { clipId, trackIndex, clipIndex },
     disabled: !enableDrag
   });
   const leftBoundaryId = `clip-boundary-left-${trackIndex}-${clipIndex}`;
-  const {
-    attributes: leftBoundaryAttributes,
-    listeners: leftBoundaryListeners,
-    setActivatorNodeRef: setLeftBoundaryActivatorRef,
-    isDragging: isLeftBoundaryDragging
-  } = useDraggable({
+  const { ref: leftBoundaryRef, isDragSource: isLeftBoundaryDragging } = useDraggable({
     id: leftBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "left" },
-    disabled: !enableDrag
+    disabled: !enableDrag,
+    feedback: "none"
   });
   const rightBoundaryId = `clip-boundary-right-${trackIndex}-${clipIndex}`;
-  const {
-    attributes: rightBoundaryAttributes,
-    listeners: rightBoundaryListeners,
-    setActivatorNodeRef: setRightBoundaryActivatorRef,
-    isDragging: isRightBoundaryDragging
-  } = useDraggable({
+  const { ref: rightBoundaryRef, isDragSource: isRightBoundaryDragging } = useDraggable({
     id: rightBoundaryId,
     data: { clipId, trackIndex, clipIndex, boundary: "right" },
-    disabled: !enableDrag
+    disabled: !enableDrag,
+    feedback: "none"
   });
-  const style = transform ? {
-    transform: CSS.Translate.toString(transform),
-    zIndex: isDragging ? 100 : void 0
-    // Below controls (z-index: 999) but above other clips
-  } : void 0;
+  const style = isDragSource ? { zIndex: 100 } : void 0;
   return /* @__PURE__ */ jsxs2(
     ClipContainer,
     {
-      ref: setNodeRef,
+      ref: clipRef,
       style,
       className,
       $left: left,
@@ -1150,7 +1165,7 @@ var Clip = ({
             trackName,
             isSelected,
             disableDrag: disableHeaderDrag,
-            dragHandleProps: enableDrag ? { attributes, listeners, setActivatorNodeRef } : void 0
+            dragHandleProps: enableDrag ? { handleRef } : void 0
           }
         ),
         /* @__PURE__ */ jsx10(ClipViewportOriginProvider, { originX: left, children: /* @__PURE__ */ jsxs2(ChannelsWrapper, { $isOverlay: isOverlay, children: [
@@ -1184,9 +1199,7 @@ var Clip = ({
               edge: "left",
               touchOptimized,
               dragHandleProps: {
-                attributes: leftBoundaryAttributes,
-                listeners: leftBoundaryListeners,
-                setActivatorNodeRef: setLeftBoundaryActivatorRef,
+                ref: leftBoundaryRef,
                 isDragging: isLeftBoundaryDragging
               }
             }
@@ -1200,9 +1213,7 @@ var Clip = ({
               edge: "right",
               touchOptimized,
               dragHandleProps: {
-                attributes: rightBoundaryAttributes,
-                listeners: rightBoundaryListeners,
-                setActivatorNodeRef: setRightBoundaryActivatorRef,
+                ref: rightBoundaryRef,
                 isDragging: isRightBoundaryDragging
               }
             }