Added new shaders

2026-05-05 22:36:52 +10:00
parent 119e49aec1
commit ce5905373a
32 changed files with 882 additions and 78 deletions
--- a/ui/src/components/LayerCard.jsx
+++ b/ui/src/components/LayerCard.jsx
@@ -2,7 +2,6 @@ import { GripVertical, Trash2 } from "lucide-react";

 import { postJson } from "../api/controlApi";
 import { ParameterField } from "./ParameterField";
-import { ShaderPicker } from "./ShaderPicker";

 export function LayerCard({
  layer,
@@ -19,6 +18,8 @@ export function LayerCard({
  onRemove,
  onLayerParameterChange,
 }) {
+  const selectedShader = shaders.find((shader) => shader.id === layer.shaderId);
+
  return (
    <div
      className={`layer-card${expanded ? " layer-card--expanded" : ""}${isDragging ? " layer-card--dragging" : ""}${isDropTarget ? " layer-card--drop-target" : ""}`}
@@ -90,20 +91,6 @@ export function LayerCard({

      {expanded ? (
        <div className="layer-card__body">
-          <div className="layer-card__field">
-            <ShaderPicker
-              id={`shader-${layer.id}`}
-              shaders={shaders}
-              value={layer.shaderId}
-              onChange={(shaderId) =>
-                postJson("/api/layers/set-shader", {
-                  layerId: layer.id,
-                  shaderId,
-                })
-              }
-            />
-          </div>
-
          {layer.temporal?.enabled ? (
            <div className="layer-card__field">
              <label>Temporal</label>
@@ -118,6 +105,13 @@ export function LayerCard({
            </div>
          )}

+          {selectedShader?.description ? (
+            <div className="shader-description">
+              <div className="shader-description__meta">{selectedShader.category || "Shader"}</div>
+              <p>{selectedShader.description}</p>
+            </div>
+          ) : null}
+
          <div className="layer-card__subheader">
            <h3>Parameters</h3>
            <button
--- a/ui/src/components/ParameterField.jsx
+++ b/ui/src/components/ParameterField.jsx
@@ -1,9 +1,15 @@
-import { Copy } from "lucide-react";
+import Wheel from "@uiw/react-color-wheel";
+import { hsvaToRgba, rgbaToHsva } from "@uiw/color-convert";
+import { Copy, RotateCcw } from "lucide-react";

 import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
 import { ParameterValueDisplay } from "./ParameterValueDisplay";

-function ParameterHeader({ layer, parameter }) {
+function valuesMatch(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
  const layerKey = layer.shaderId || layer.shaderName || layer.id;
  const oscRoute = `/VideoShaderToys/${layerKey}/${parameter.id}`;

@@ -26,6 +32,16 @@ function ParameterHeader({ layer, parameter }) {
        <span>{oscRoute}</span>
        <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
      </button>
+      <button
+        type="button"
+        className="parameter__reset"
+        title={`Reset ${parameter.label}`}
+        aria-label={`Reset ${parameter.label}`}
+        disabled={resetDisabled}
+        onClick={onReset}
+      >
+        <RotateCcw size={13} strokeWidth={1.9} aria-hidden="true" />
+      </button>
    </div>
  );
 }
@@ -48,13 +64,26 @@ function colorValueToHex(value) {
  return `#${colorComponentToHex(values[0])}${colorComponentToHex(values[1])}${colorComponentToHex(values[2])}`;
 }

-function hexToColorValue(hex, alpha) {
-  const sanitized = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex.slice(1) : "000000";
+function colorValueToHsva(value) {
+  const values = [...(value ?? [])];
+  while (values.length < 4) {
+    values.push(values.length === 3 ? 1 : 0);
+  }
+  return rgbaToHsva({
+    r: Math.round(clamp01(values[0]) * 255),
+    g: Math.round(clamp01(values[1]) * 255),
+    b: Math.round(clamp01(values[2]) * 255),
+    a: clamp01(values[3]),
+  });
+}
+
+function hsvaToColorValue(hsva, alpha) {
+  const rgba = hsvaToRgba({ ...hsva, a: clamp01(alpha ?? hsva.a ?? 1) });
  return [
-    parseInt(sanitized.slice(0, 2), 16) / 255,
-    parseInt(sanitized.slice(2, 4), 16) / 255,
-    parseInt(sanitized.slice(4, 6), 16) / 255,
-    clamp01(alpha ?? 1),
+    clamp01(rgba.r / 255),
+    clamp01(rgba.g / 255),
+    clamp01(rgba.b / 255),
+    clamp01(alpha ?? rgba.a ?? 1),
  ];
 }

@@ -69,7 +98,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    sendValue,
  } = useThrottledParameterValue(parameter, onParameterChange);

-  const header = <ParameterHeader layer={layer} parameter={parameter} />;
+  const defaultValue = parameter.defaultValue;
+  const resetDisabled = defaultValue === undefined || valuesMatch(draftValue, defaultValue);
+  const resetParameter = () => {
+    if (defaultValue !== undefined) {
+      sendValue(defaultValue);
+    }
+  };
+  const header = (
+    <ParameterHeader
+      layer={layer}
+      parameter={parameter}
+      resetDisabled={resetDisabled}
+      onReset={resetParameter}
+    />
+  );

  if (parameter.type === "float") {
    return (
@@ -151,14 +194,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <div className="parameter__color-row">
-          <input
-            type="color"
-            value={colorValueToHex(values)}
-            onFocus={beginInteraction}
-            onChange={(event) => sendValue(hexToColorValue(event.target.value, values[3]))}
+        <div className="parameter__wheel-row">
+          <div
+            className="parameter__wheel"
+            onPointerDown={beginInteraction}
+            onPointerUp={endInteraction}
+            onPointerCancel={endInteraction}
            onBlur={endInteraction}
-          />
+          >
+            <Wheel
+              color={colorValueToHsva(values)}
+              width={132}
+              height={132}
+              onChange={(color) => scheduleSendValue(hsvaToColorValue(color.hsva, values[3]))}
+            />
+          </div>
          <label className="parameter__alpha">
            <span>Alpha</span>
            <input
@@ -176,6 +226,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
              onBlur={endInteraction}
            />
          </label>
+          <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
        </div>
        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
      </section>
--- a/ui/src/components/ShaderPicker.jsx
+++ b/ui/src/components/ShaderPicker.jsx
@@ -12,6 +12,26 @@ function matchesShader(shader, query) {
    .some((value) => value.toLowerCase().includes(normalizedQuery));
 }

+function shaderSummary(shader) {
+  if (!shader) {
+    return "Search available shaders";
+  }
+
+  return shader.description || "No description";
+}
+
+function ShaderOptionContent({ shader }) {
+  return (
+    <>
+      <span className="shader-picker__option-head">
+        <span className="shader-picker__name">{shader.name}</span>
+        {shader.category ? <span className="shader-picker__category">{shader.category}</span> : null}
+      </span>
+      <span className="shader-picker__meta">{shaderSummary(shader)}</span>
+    </>
+  );
+}
+
 export function ShaderPicker({ id, label = "Shader", shaders, value, onChange }) {
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
@@ -38,12 +58,13 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
        onClick={() => setOpen((current) => !current)}
      >
        <span>
-          <span className="shader-picker__name">{selectedShader?.name ?? "Choose shader"}</span>
-          <span className="shader-picker__meta">
-            {selectedShader
-              ? `${selectedShader.category ? `${selectedShader.category} / ` : ""}${selectedShader.id}`
-              : "Search available shaders"}
+          <span className="shader-picker__option-head">
+            <span className="shader-picker__name">{selectedShader?.name ?? "Choose shader"}</span>
+            {selectedShader?.category ? (
+              <span className="shader-picker__category">{selectedShader.category}</span>
+            ) : null}
          </span>
+          <span className="shader-picker__meta">{shaderSummary(selectedShader)}</span>
        </span>
        <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" />
      </button>
@@ -76,11 +97,7 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
                    setQuery("");
                  }}
                >
-                  <span className="shader-picker__name">{shader.name}</span>
-                  <span className="shader-picker__meta">
-                    {shader.category ? `${shader.category} / ` : ""}
-                    {shader.id}
-                  </span>
+                  <ShaderOptionContent shader={shader} />
                </button>
              ))
            ) : (
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -591,7 +591,8 @@ pre {
 }

 .layer-card__drag-handle:hover:not(:disabled),
-.parameter__osc:hover:not(:disabled) {
+.parameter__osc:hover:not(:disabled),
+.parameter__reset:hover:not(:disabled) {
  background: transparent;
  color: var(--app-text);
 }
@@ -604,6 +605,28 @@ pre {
  gap: 0.75rem;
 }

+.shader-description {
+  padding: 0.75rem;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius);
+  background: rgba(255, 255, 255, 0.025);
+  user-select: text;
+}
+
+.shader-description__meta {
+  margin-bottom: 0.25rem;
+  color: var(--app-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.shader-description p {
+  margin: 0;
+  color: var(--app-text);
+  overflow-wrap: anywhere;
+}
+
 .shader-picker__topline {
  display: flex;
  align-items: baseline;
@@ -617,7 +640,8 @@ pre {
 .shader-picker__empty,
 .parameter__value,
 .parameter__alpha,
-.parameter__osc {
+.parameter__osc,
+.parameter__reset {
  color: var(--app-muted);
  font-size: 0.78rem;
 }
@@ -634,7 +658,8 @@ pre {
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
-  min-height: 54px;
+  min-height: 50px;
+  padding: 0.55rem 0.7rem;
  text-align: left;
  background: #182232;
  border-color: var(--app-border);
@@ -642,7 +667,7 @@ pre {

 .shader-picker__trigger > span {
  display: grid;
-  gap: 0.125rem;
+  gap: 0.2rem;
  min-width: 0;
 }

@@ -654,8 +679,8 @@ pre {

 .shader-picker__popover {
  display: grid;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: 0.45rem;
+  padding: 0.45rem;
  border: 1px solid var(--app-border);
  background: #121821;
 }
@@ -674,27 +699,28 @@ pre {

 .shader-picker__search input {
  padding-left: 2.125rem;
+  min-height: 34px;
 }

 .shader-picker__list {
  display: grid;
-  gap: 0.375rem;
-  max-height: 220px;
+  gap: 0.45rem;
+  max-height: 250px;
  overflow-y: auto;
-  padding: 0.375rem;
+  padding: 0.5rem;
  border: 1px solid var(--app-border);
  background: #10151d;
 }

 .shader-picker__option {
  display: grid;
-  gap: 0.125rem;
-  min-height: 58px;
-  padding: 0.5rem 0.625rem;
+  gap: 0.25rem;
+  min-height: 4.25rem;
+  padding: 0.65rem 0.75rem;
  text-align: left;
  background: #182232;
  border-color: var(--app-border);
-  align-content: center;
+  align-content: start;
  line-height: 1.25;
 }

@@ -707,14 +733,58 @@ pre {
 .shader-picker__name,
 .shader-picker__meta {
  min-width: 0;
-  overflow: hidden;
  overflow-wrap: anywhere;
 }

+.shader-picker__option-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .shader-picker__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
  font-weight: 700;
 }

+.shader-picker__category {
+  flex: 0 0 auto;
+  max-width: 8rem;
+  overflow: hidden;
+  margin-top: 0.05rem;
+  padding: 0.14rem 0.42rem;
+  border: 1px solid rgba(26, 156, 219, 0.35);
+  border-radius: var(--app-radius-sm);
+  background: rgba(26, 156, 219, 0.12);
+  color: #b9def1;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.shader-picker__meta {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.3;
+  min-height: 2.05em;
+}
+
+.shader-picker__trigger .shader-picker__meta {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  min-height: 0;
+}
+
 .shader-picker__empty {
  padding: 0.625rem;
 }
@@ -732,12 +802,13 @@ pre {

 .parameter__header {
  display: grid;
-  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
+  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
 }

-.parameter__osc {
+.parameter__osc,
+.parameter__reset {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
@@ -751,6 +822,13 @@ pre {
  font-weight: 500;
 }

+.parameter__reset {
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  color: var(--app-muted);
+}
+
 .parameter__osc span {
  min-width: 0;
  overflow: hidden;
@@ -758,7 +836,8 @@ pre {
  white-space: nowrap;
 }

-.parameter__osc svg {
+.parameter__osc svg,
+.parameter__reset svg {
  flex: 0 0 auto;
 }

@@ -777,11 +856,29 @@ pre {
  min-width: 7.5rem;
 }

-.parameter__color-row {
+.parameter__wheel-row {
  display: grid;
-  grid-template-columns: minmax(5.75rem, 0.42fr) minmax(7.5rem, 0.58fr);
+  grid-template-columns: auto minmax(5.25rem, 1fr);
  gap: 0.5rem;
-  align-items: end;
+  align-items: start;
+}
+
+.parameter__wheel {
+  width: 132px;
+  height: 132px;
+}
+
+.parameter__wheel [class*="react-colorful"],
+.parameter__wheel > div {
+  max-width: 100%;
+}
+
+.parameter__swatch {
+  grid-column: 2;
+  width: 100%;
+  min-height: 28px;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius-sm);
 }

 .parameter__alpha {
@@ -866,10 +963,18 @@ pre {
  .kv-rows,
  .parameter-grid,
  .parameter__header,
-  .parameter__color-row {
+  .parameter__wheel-row {
    grid-template-columns: 1fr;
  }

+  .parameter__reset {
+    width: 100%;
+  }
+
+  .parameter__swatch {
+    grid-column: auto;
+  }
+
  .kv-row {
    grid-template-columns: minmax(6.25rem, 0.6fr) minmax(0, 1fr);
  }