@waveform-playlist/ui-components 9.5.2 → 10.1.0

package/dist/index.mjs

@@ -361,6 +361,8 @@ var defaultTheme = {
   // Selected: brighter cyan
   selectedTrackControlsBackground: "#d9e9ff",
   // Light blue background for selected track controls
+  selectedTrackBackground: "#e8f0fe",
+  // Light blue tint for selected track waveform area
   timeColor: "#000",
   timescaleBackgroundColor: "#fff",
   playheadColor: "#f00",
@@ -437,6 +439,8 @@ var darkTheme = {
   // Brighter amber background when selected
   selectedTrackControlsBackground: "#2a2218",
   // Dark warm brown for selected track controls
+  selectedTrackBackground: "#e8c090",
+  // Amber for selected track waveform area (matches selected clip)
   timeColor: "#d8c0a8",
   // Warm amber for timescale text
   timescaleBackgroundColor: "#1a1612",
@@ -2958,7 +2962,12 @@ var ChannelContainer = styled25.div.attrs((props) => ({
   }
 }))`
   position: relative;
-  background: ${(props) => props.$backgroundColor || "transparent"};
+  background: ${(props) => {
+  if (props.$isSelected) {
+    return props.theme.selectedTrackBackground || props.$backgroundColor || "transparent";
+  }
+  return props.$backgroundColor || "transparent";
+}};
   height: 100%;
 `;
 var Track = ({
@@ -2971,7 +2980,7 @@ var Track = ({
   hasClipHeaders = false,
   onClick,
   trackId,
-  isSelected: _isSelected = false
+  isSelected = false
 }) => {
   const { waveHeight } = usePlaylistInfo();
   return /* @__PURE__ */ jsx29(
@@ -2987,6 +2996,7 @@ var Track = ({
         {
           $backgroundColor: backgroundColor,
           $offset: offset,
+          $isSelected: isSelected,
           onClick,
           "data-track-id": trackId,
           children
@@ -3369,6 +3379,282 @@ var TrackMenu = ({ items: itemsProp }) => {
   ] });
 };
 
+// src/components/SegmentedVUMeter.tsx
+import React21, { useMemo as useMemo5 } from "react";
+import styled34 from "styled-components";
+import { normalizedToDb } from "@waveform-playlist/core";
+import { jsx as jsx36, jsxs as jsxs12 } from "react/jsx-runtime";
+var DEFAULT_COLOR_STOPS = [
+  { dB: 2, color: "#ff0000" },
+  { dB: -1, color: "#e74c3c" },
+  { dB: -3, color: "#e67e22" },
+  { dB: -6, color: "#f1c40f" },
+  { dB: -12, color: "#2ecc71" },
+  { dB: -20, color: "#27ae60" },
+  { dB: -30, color: "#5dade2" },
+  { dB: -50, color: "#85c1e9" }
+];
+var INACTIVE_OPACITY = 0.15;
+var INACTIVE_COLOR = "rgba(128, 128, 128, 0.2)";
+var PEAK_COLOR = "#ffffff";
+function getDefaultLabels(channelCount) {
+  if (channelCount === 1) return ["M"];
+  if (channelCount === 2) return ["L", "R"];
+  return Array.from({ length: channelCount }, (_, i) => String(i + 1));
+}
+function getColorForDb(dB, colorStops) {
+  if (colorStops.length === 0) return INACTIVE_COLOR;
+  for (const stop of colorStops) {
+    if (dB >= stop.dB) {
+      return stop.color;
+    }
+  }
+  return colorStops[colorStops.length - 1].color;
+}
+function computeThresholds(segmentCount, dBRange) {
+  const safeCount = Math.max(2, segmentCount);
+  const [minDb, maxDb] = dBRange;
+  const step = (maxDb - minDb) / (safeCount - 1);
+  return Array.from({ length: safeCount }, (_, i) => maxDb - i * step);
+}
+function formatDbLabel(dB) {
+  return Math.round(dB).toString();
+}
+var MeterContainer = styled34.div`
+  display: inline-flex;
+  flex-direction: ${(props) => props.$orientation === "horizontal" ? "column" : "row"};
+  gap: 4px;
+  font-family: 'Courier New', monospace;
+`;
+var ChannelColumn = styled34.div`
+  display: flex;
+  flex-direction: ${(props) => props.$orientation === "horizontal" ? "row" : "column"};
+  align-items: center;
+  gap: 4px;
+`;
+var SegmentStack = styled34.div`
+  display: flex;
+  flex-direction: ${(props) => props.$orientation === "horizontal" ? "row" : "column"};
+`;
+var Segment = styled34.div.attrs((props) => ({
+  style: {
+    width: `${props.$width}px`,
+    height: `${props.$height}px`,
+    ...props.$orientation === "horizontal" ? { marginRight: `${props.$gap}px` } : { marginBottom: `${props.$gap}px` },
+    backgroundColor: props.$isPeak ? PEAK_COLOR : props.$active || props.$coloredInactive ? props.$color : INACTIVE_COLOR,
+    opacity: props.$isPeak || props.$active ? 1 : props.$coloredInactive ? INACTIVE_OPACITY : 1,
+    boxShadow: props.$active || props.$isPeak ? `0 0 4px ${props.$isPeak ? PEAK_COLOR : props.$color}40` : "none"
+  }
+}))`
+  border-radius: 1px;
+`;
+var DEFAULT_LABEL_COLOR = "#888";
+var ChannelLabel = styled34.div`
+  color: ${(props) => props.$labelColor};
+  font-size: 10px;
+  text-align: center;
+  user-select: none;
+`;
+var ScaleColumn = styled34.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 28px;
+`;
+var ScaleLabel = styled34.div.attrs((props) => ({
+  style: {
+    top: `${props.$top}px`,
+    color: props.$labelColor
+  }
+}))`
+  position: absolute;
+  left: 50%;
+  font-size: 9px;
+  font-family: 'Courier New', monospace;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  user-select: none;
+`;
+var HorizontalScaleWrapper = styled34.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+`;
+var ScaleRow = styled34.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  min-height: 16px;
+`;
+var ScaleLabelHorizontal = styled34.div.attrs((props) => ({
+  style: {
+    left: `${props.$left}px`,
+    color: props.$labelColor
+  }
+}))`
+  position: absolute;
+  top: 50%;
+  font-size: 9px;
+  font-family: 'Courier New', monospace;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  user-select: none;
+`;
+var SegmentedVUMeterInner = ({
+  levels,
+  peakLevels,
+  channelLabels,
+  orientation = "vertical",
+  segmentCount = 24,
+  dBRange = [-50, 5],
+  showScale = true,
+  colorStops = DEFAULT_COLOR_STOPS,
+  segmentWidth = 20,
+  segmentHeight = 8,
+  segmentGap = 2,
+  coloredInactive = false,
+  labelColor,
+  className
+}) => {
+  const labels = channelLabels ?? getDefaultLabels(levels.length);
+  const resolvedLabelColor = labelColor ?? DEFAULT_LABEL_COLOR;
+  const channelCount = levels.length;
+  if (process.env.NODE_ENV !== "production" && peakLevels != null && peakLevels.length !== channelCount) {
+    console.warn(
+      `[waveform-playlist] SegmentedVUMeter: peakLevels length (${peakLevels.length}) does not match levels length (${channelCount})`
+    );
+  }
+  const isMultiChannel = channelCount >= 2;
+  const segmentTotalHeight = segmentHeight + segmentGap;
+  const [dBMin, dBMax] = dBRange;
+  const thresholds = useMemo5(
+    () => computeThresholds(segmentCount, [dBMin, dBMax]),
+    [segmentCount, dBMin, dBMax]
+  );
+  const scaleLabels = useMemo5(() => {
+    const totalSize = segmentCount * segmentTotalHeight - segmentGap;
+    const minDb = dBMin;
+    const maxDb = dBMax;
+    let minSpacing;
+    if (orientation === "horizontal") {
+      minSpacing = 35;
+    } else {
+      minSpacing = Math.max(14, segmentTotalHeight * 2);
+    }
+    const labelCount = Math.max(2, Math.floor(totalSize / minSpacing));
+    const labels2 = [];
+    for (let i = 0; i < labelCount; i++) {
+      const t = i / (labelCount - 1);
+      const position = t * totalSize;
+      const db = orientation === "horizontal" ? minDb + t * (maxDb - minDb) : maxDb - t * (maxDb - minDb);
+      labels2.push({ position, label: formatDbLabel(db) });
+    }
+    return labels2;
+  }, [orientation, segmentCount, segmentTotalHeight, segmentGap, dBMin, dBMax]);
+  const renderThresholds = useMemo5(
+    () => orientation === "horizontal" ? [...thresholds].reverse() : thresholds,
+    [thresholds, orientation]
+  );
+  const renderChannel = (channelIndex) => {
+    const level = levels[channelIndex];
+    const levelDb = normalizedToDb(level);
+    const peakDb = peakLevels != null ? normalizedToDb(peakLevels[channelIndex]) : null;
+    let peakSegmentIndex = -1;
+    if (peakDb != null) {
+      let minDist = Infinity;
+      for (let i = 0; i < renderThresholds.length; i++) {
+        const dist = Math.abs(renderThresholds[i] - peakDb);
+        if (dist < minDist) {
+          minDist = dist;
+          peakSegmentIndex = i;
+        }
+      }
+    }
+    return /* @__PURE__ */ jsxs12(ChannelColumn, { $orientation: orientation, "data-channel": true, children: [
+      orientation === "horizontal" && /* @__PURE__ */ jsx36(ChannelLabel, { $labelColor: resolvedLabelColor, children: labels[channelIndex] }),
+      /* @__PURE__ */ jsx36(SegmentStack, { $orientation: orientation, children: renderThresholds.map((threshold, segIdx) => {
+        const active = levelDb >= threshold;
+        const isPeak = segIdx === peakSegmentIndex;
+        const color = getColorForDb(threshold, colorStops);
+        return /* @__PURE__ */ jsx36(
+          Segment,
+          {
+            $width: orientation === "horizontal" ? segmentHeight : segmentWidth,
+            $height: orientation === "horizontal" ? segmentWidth : segmentHeight,
+            $gap: segmentGap,
+            $active: active,
+            $color: color,
+            $isPeak: isPeak,
+            $orientation: orientation,
+            $coloredInactive: coloredInactive,
+            "data-segment": true,
+            ...isPeak ? { "data-peak": true } : {}
+          },
+          segIdx
+        );
+      }) }),
+      orientation === "vertical" && /* @__PURE__ */ jsx36(ChannelLabel, { $labelColor: resolvedLabelColor, children: labels[channelIndex] })
+    ] }, channelIndex);
+  };
+  const renderScale = () => {
+    if (orientation === "horizontal") {
+      const totalWidth = segmentCount * segmentTotalHeight - segmentGap;
+      return /* @__PURE__ */ jsxs12(HorizontalScaleWrapper, { children: [
+        /* @__PURE__ */ jsx36(ChannelLabel, { $labelColor: resolvedLabelColor, style: { visibility: "hidden" }, children: "L" }),
+        /* @__PURE__ */ jsx36(ScaleRow, { style: { width: `${totalWidth}px` }, children: scaleLabels.map(({ position, label }, i) => /* @__PURE__ */ jsx36(ScaleLabelHorizontal, { $left: position, $labelColor: resolvedLabelColor, children: label }, i)) })
+      ] });
+    }
+    const totalHeight = segmentCount * segmentTotalHeight - segmentGap;
+    return /* @__PURE__ */ jsx36(ScaleColumn, { style: { height: `${totalHeight}px` }, children: scaleLabels.map(({ position, label }, i) => /* @__PURE__ */ jsx36(ScaleLabel, { $top: position, $labelColor: resolvedLabelColor, children: label }, i)) });
+  };
+  if (isMultiChannel) {
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ jsxs12(
+        MeterContainer,
+        {
+          className,
+          $orientation: orientation,
+          "data-meter-orientation": orientation,
+          children: [
+            Array.from({ length: channelCount }, (_, i) => renderChannel(i)),
+            showScale && renderScale()
+          ]
+        }
+      );
+    }
+    const midpoint = Math.ceil(channelCount / 2);
+    const leftChannels = Array.from({ length: midpoint }, (_, i) => i);
+    const rightChannels = Array.from({ length: channelCount - midpoint }, (_, i) => midpoint + i);
+    return /* @__PURE__ */ jsxs12(
+      MeterContainer,
+      {
+        className,
+        $orientation: orientation,
+        "data-meter-orientation": orientation,
+        children: [
+          leftChannels.map(renderChannel),
+          showScale && renderScale(),
+          rightChannels.map(renderChannel)
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs12(
+    MeterContainer,
+    {
+      className,
+      $orientation: orientation,
+      "data-meter-orientation": orientation,
+      children: [
+        renderChannel(0),
+        showScale && renderScale()
+      ]
+    }
+  );
+};
+var SegmentedVUMeter = React21.memo(SegmentedVUMeterInner);
+
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
   return samples / sampleRate;
@@ -3433,6 +3719,7 @@ export {
   PlayoutProvider,
   ScreenReaderOnly,
   ScrollViewportProvider,
+  SegmentedVUMeter,
   Selection,
   SelectionTimeInputs,
   Slider,