OSC updates and video resolution fixes

ui/src/components/LayerCard.jsx

@@ -2,6 +2,7 @@ import { GripVertical, Trash2 } from "lucide-react";
 
 import { postJson } from "../api/controlApi";
 import { ParameterField } from "./ParameterField";
+import { ShaderPicker } from "./ShaderPicker";
 
 export function LayerCard({
   layer,
@@ -90,23 +91,17 @@ export function LayerCard({
       {expanded ? (
         <div className="layer-card__body">
           <div className="layer-card__field">
-            <label htmlFor={`shader-${layer.id}`}>Shader</label>
-            <select
+            <ShaderPicker
               id={`shader-${layer.id}`}
+              shaders={shaders}
               value={layer.shaderId}
-              onChange={(event) =>
+              onChange={(shaderId) =>
                 postJson("/api/layers/set-shader", {
                   layerId: layer.id,
-                  shaderId: event.target.value,
+                  shaderId,
                 })
               }
-            >
-              {shaders.map((shader) => (
-                <option key={shader.id} value={shader.id}>
-                  {shader.name}
-                </option>
-              ))}
-            </select>
+            />
           </div>
 
           {layer.temporal?.enabled ? (
@@ -139,6 +134,7 @@ export function LayerCard({
               {layer.parameters.map((parameter) => (
                 <ParameterField
                   key={`${layer.id}:${parameter.id}`}
+                  layer={layer}
                   parameter={parameter}
                   onParameterChange={(parameterId, value) => onLayerParameterChange(layer.id, parameterId, value)}
                 />