@vsreact/core 0.0.13 → 0.0.15

package/src/meter.tsx

@@ -67,6 +67,9 @@ export interface MeterProps {
   thickness?: number;
   /** Horizontal bar instead of the vertical default. */
   horizontal?: boolean;
+  /** Fill from the top (vertical) / right (horizontal) — gain-reduction
+      meters. Default false. */
+  reverse?: boolean;
   /** Show the peak-hold line. Default true. */
   peak?: boolean;
   holdMs?: number;
@@ -85,6 +88,7 @@ export function Meter({
   length = 120,
   thickness = 10,
   horizontal,
+  reverse = false,
   peak = true,
   holdMs,
   decayPerSecond,
@@ -108,19 +112,27 @@ export function Meter({
       style={{ width: length, height: thickness, backgroundColor: trackColor }}
     >
       <View
-        className="absolute left-0 top-0 bottom-0"
-        style={{ width: fill, backgroundColor: color }}
+        className="absolute top-0 bottom-0"
+        style={reverse ? { right: 0, width: fill, backgroundColor: color } : { left: 0, width: fill, backgroundColor: color }}
       />
       {hotFill > 0 ? (
         <View
           className="absolute top-0 bottom-0"
-          style={{ left: hot * length, width: hotFill, backgroundColor: hotColor }}
+          style={
+            reverse
+              ? { right: hot * length, width: hotFill, backgroundColor: hotColor }
+              : { left: hot * length, width: hotFill, backgroundColor: hotColor }
+          }
         />
       ) : null}
       {peak && peakAt > 2 ? (
         <View
           className="absolute top-0 bottom-0 w-[2]"
-          style={{ left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }}
+          style={
+            reverse
+              ? { right: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+              : { left: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+          }
         />
       ) : null}
     </View>
@@ -130,19 +142,27 @@ export function Meter({
       style={{ width: thickness, height: length, backgroundColor: trackColor }}
     >
       <View
-        className="absolute bottom-0 left-0 right-0"
-        style={{ height: fill, backgroundColor: color }}
+        className="absolute left-0 right-0"
+        style={reverse ? { top: 0, height: fill, backgroundColor: color } : { bottom: 0, height: fill, backgroundColor: color }}
       />
       {hotFill > 0 ? (
         <View
           className="absolute left-0 right-0"
-          style={{ bottom: hot * length, height: hotFill, backgroundColor: hotColor }}
+          style={
+            reverse
+              ? { top: hot * length, height: hotFill, backgroundColor: hotColor }
+              : { bottom: hot * length, height: hotFill, backgroundColor: hotColor }
+          }
         />
       ) : null}
       {peak && peakAt > 2 ? (
         <View
           className="absolute left-0 right-0 h-[2]"
-          style={{ bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }}
+          style={
+            reverse
+              ? { top: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+              : { bottom: peakAt - 2, backgroundColor: held >= hot ? hotColor : color }
+          }
         />
       ) : null}
     </View>
@@ -157,3 +177,84 @@ export function Meter({
     </View>
   );
 }
+
+export interface RingMeterProps {
+  /** Level 0..1. */
+  value: number;
+  /** Diameter. Default 64. */
+  size?: number;
+  thickness?: number;
+  /** Where the arc turns hot, 0..1. Default 0.85; 1 disables. */
+  hotFrom?: number;
+  trackColor?: string;
+  color?: string;
+  hotColor?: string;
+  /** Center readout. Default: none. */
+  format?: (value: number) => string;
+  label?: string;
+}
+
+/** A circular level meter on the native arc keys — channel-strip level
+    rings, macro amounts, gain-reduction dials. */
+export function RingMeter({
+  value,
+  size = 64,
+  thickness,
+  hotFrom = 0.85,
+  trackColor = "#FFFFFF14",
+  color = "#C6F135",
+  hotColor = "#FF4545",
+  format,
+  label,
+}: RingMeterProps) {
+  const level = clamp01(value);
+  const hot = clamp01(hotFrom);
+  const arcThickness = thickness ?? Math.max(3, size * 0.09);
+  const START = -135;
+  const SWEEP = 270;
+
+  const ring = (
+    <View className="relative items-center justify-center" style={{ width: size, height: size }}>
+      <View
+        className="absolute inset-0"
+        style={{
+          arcTrackColor: trackColor,
+          arcColor: color,
+          arcStart: START,
+          arcEnd: START + SWEEP,
+          arcValueStart: START,
+          arcValueEnd: START + SWEEP * Math.min(level, hot),
+          arcThickness,
+        }}
+      />
+      {level > hot ? (
+        <View
+          className="absolute inset-0"
+          style={{
+            arcTrackColor: "#00000000",
+            arcColor: hotColor,
+            arcStart: START,
+            arcEnd: START + SWEEP,
+            arcValueStart: START + SWEEP * hot,
+            arcValueEnd: START + SWEEP * level,
+            arcThickness,
+          }}
+        />
+      ) : null}
+      {format !== undefined ? (
+        <Text className="text-[11] font-bold" style={{ color: level > hot ? hotColor : color }}>
+          {format(level)}
+        </Text>
+      ) : null}
+    </View>
+  );
+
+  if (label === undefined) return ring;
+
+  return (
+    <View className="items-center gap-2">
+      {ring}
+      <Text className="text-faint text-[10] font-bold tracking-widest">{label}</Text>
+    </View>
+  );
+}