@arcanewizards/timecode-toolbox 0.1.4 → 0.1.5

package/README.md

@@ -14,11 +14,11 @@ generate and convert timecode signals of different types.
 </h2>
 
 <p align="center">
-  <a href="https://arcanewizards.com/download/timecode-toolbox/latest/macos-arm64"><img src="https://arcanewizards.com/download/timecode-toolbox/latest/macos-arm64/button" height="50" alt="Download MacOS (Apple Silicon / ARM) Desktop App"/></a>
+  <a href="https://arcanewizards.com/download/timecode-toolbox/latest/macos-arm64"><img src="https://arcanewizards.com/download/timecode-toolbox/latest/macos-arm64/button?cb=1" height="50" alt="Download MacOS (Apple Silicon / ARM) Desktop App"/></a>
   &nbsp;&nbsp;
-  <a href="https://arcanewizards.com/download/timecode-toolbox/latest/macos-x64"><img src="https://arcanewizards.com/download/timecode-toolbox/latest/macos-x64/button" height="50" alt="Download MacOS (Intel / x64) Desktop App"/></a>
+  <a href="https://arcanewizards.com/download/timecode-toolbox/latest/macos-x64"><img src="https://arcanewizards.com/download/timecode-toolbox/latest/macos-x64/button?cb=1" height="50" alt="Download MacOS (Intel / x64) Desktop App"/></a>
   &nbsp;&nbsp;
-  <a href="https://arcanewizards.com/download/timecode-toolbox/latest/windows-x64"><img src="https://arcanewizards.com/download/timecode-toolbox/latest/windows-x64/button" height="50" alt="Download Windows (x64) Desktop App"/></a>
+  <a href="https://arcanewizards.com/download/timecode-toolbox/latest/windows-x64"><img src="https://arcanewizards.com/download/timecode-toolbox/latest/windows-x64/button?cb=1" height="50" alt="Download Windows (x64) Desktop App"/></a>
 </p>
 
 ## Headless / CLI Version

package/dist/components/frontend/index.js

@@ -15989,6 +15989,10 @@ var STRINGS = {
   },
   inputs: {
     title: "INPUTS",
+    unnamed: "Unnamed Input",
+    enable: "Enable Input",
+    disable: "Disable Input",
+    edit: "Edit Input",
     noChildren: "No inputs yet. Please add one using the buttons below.",
     addButton: (protocol) => `Add ${protocol}`,
     addDialog: (protocol) => `Add ${protocol} Input`,
@@ -16012,6 +16016,8 @@ var STRINGS = {
   delay: (delayMs) => `Delay: ${MS_FORMAT.format(delayMs)}`,
   generators: {
     title: "GENERATORS",
+    unnamed: "Unnamed Generator",
+    edit: "Edit Generator",
     noChildren: "No generators yet. Please add one using the buttons below.",
     type: {
       clock: "Clock"
@@ -16023,6 +16029,11 @@ var STRINGS = {
   },
   outputs: {
     title: "OUTPUTS",
+    unnamed: "Unnamed Output",
+    enable: "Enable Output",
+    disable: "Disable Output",
+    link: "Link Output",
+    edit: "Edit Output",
     noChildren: "No outputs yet. Please add one using the buttons below.",
     addButton: (protocol) => `Add ${protocol}`,
     addDialog: (protocol) => `Add ${protocol} Output`,
@@ -16355,7 +16366,9 @@ var TimecodeDisplay = ({
   id,
   timecode: { state, metadata },
   config,
-  headerComponents
+  headerComponents,
+  disabled,
+  rootState
 }) => {
   const { handlers, callHandler } = useApplicationHandlers();
   const hooks = id && getTreeValue(handlers, id);
@@ -16406,29 +16419,41 @@ var TimecodeDisplay = ({
           )
         ),
         children: [
-          headerComponents && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
+          headerComponents && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex gap-0.25", children: headerComponents }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             SizeAwareDiv,
             {
-              className: cn(
-                "relative min-h-timecode-min-height grow",
-                cnd(state?.state === "stopped", "opacity-50"),
-                cnd(
-                  hooks?.play && hooks?.pause,
-                  `
-                cursor-pointer
-                hover:opacity-100
-              `
-                )
-              ),
+              className: "relative min-h-timecode-min-height grow",
               onClick: toggle,
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                ActiveTimecodeText,
+              children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                SizeAwareDiv,
                 {
-                  effectiveStartTimeMillis: state.effectiveStartTimeMillis,
-                  speed: state.speed
+                  className: "\n                pointer-events-none absolute inset-0 flex items-center\n                justify-center\n              ",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2, { icon: "pause", className: "text-timecode-adaptive" })
                 }
-              ) }) })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-0 flex items-center justify-center",
+                    cnd(state?.state === "stopped", "opacity-50"),
+                    cnd(
+                      hooks?.play && hooks?.pause,
+                      `
+                    cursor-pointer
+                    hover:opacity-100
+                  `
+                    )
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    ActiveTimecodeText,
+                    {
+                      effectiveStartTimeMillis: state.effectiveStartTimeMillis,
+                      speed: state.speed
+                    }
+                  ) })
+                }
+              )
             }
           ),
           hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-center gap-px", children: [
@@ -16516,9 +16541,53 @@ var TimecodeDisplay = ({
           metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
         ] })
       }
-    ) : null
+    ) : null,
+    rootState.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex gap-px", children: rootState.errors.map((error, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: "\n                grow truncate bg-sigil-usage-red-background p-0.5\n                text-sigil-usage-red-text\n              ",
+        children: error
+      },
+      index2
+    )) }),
+    rootState.warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex gap-px", children: rootState.warnings.map((warning, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: "\n                grow truncate bg-sigil-usage-orange-background p-0.5\n                text-sigil-usage-orange-text\n              ",
+        children: warning
+      },
+      index2
+    )) })
   ] });
 };
+var getLinkedSourceInfo = (link, config) => {
+  if (!link) {
+    return void 0;
+  }
+  let info = void 0;
+  if (link[0] === "input") {
+    const input = config.inputs?.[link[1]];
+    if (input) {
+      info = {
+        color: input.color,
+        type: STRINGS.protocols[input.definition.type].short,
+        name: input.name ? [input.name] : [],
+        namePlaceholder: STRINGS.inputs.unnamed
+      };
+    }
+  } else if (link[0] === "generator") {
+    const generator = config.generators?.[link[1]];
+    if (generator) {
+      info = {
+        color: generator.color,
+        type: STRINGS.generators.type[generator.definition.type],
+        name: generator.name ? [generator.name] : [],
+        namePlaceholder: STRINGS.generators.unnamed
+      };
+    }
+  }
+  return info;
+};
 var EMPTY_TIMECODE = {
   name: null,
   state: {
@@ -16537,8 +16606,10 @@ var TimecodeTreeDisplay = ({
   id,
   type,
   name,
+  link,
   color,
   timecode,
+  rootState,
   namePlaceholder,
   buttons,
   assignToOutput
@@ -16552,8 +16623,8 @@ var TimecodeTreeDisplay = ({
       });
     }
   }, [id, openNewWidow]);
-  name = timecode?.name ? [...name, timecode.name] : name;
-  if (isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
+  name = timecode !== "disabled" && timecode?.name ? [...name, timecode.name] : name;
+  if (timecode !== "disabled" && isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
     return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       TimecodeTreeDisplay,
       {
@@ -16563,6 +16634,7 @@ var TimecodeTreeDisplay = ({
         name,
         color: timecode.color ?? color,
         timecode: child,
+        rootState,
         namePlaceholder,
         buttons,
         assignToOutput
@@ -16580,28 +16652,67 @@ var TimecodeTreeDisplay = ({
           TimecodeDisplay,
           {
             id,
-            timecode: isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
+            timecode: timecode !== "disabled" && isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
+            rootState,
+            disabled: timecode === "disabled",
             config,
             headerComponents: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex grow items-start gap-0.25", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  "div",
-                  {
-                    className: "\n                  m-0.25 rounded-md border border-sigil-bg-light\n                  bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control\n                  text-timecode-usage-text\n                ",
-                    children: type
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex grow basis-0 items-start gap-0.25", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "grow", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-0.25", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    "div",
+                    {
+                      className: "\n                      m-0.25 rounded-md border border-sigil-bg-light\n                      bg-timecode-usage-foreground px-1 py-0.25\n                      text-sigil-control text-timecode-usage-text\n                    ",
+                      children: type
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    "div",
+                    {
+                      className: cn(
+                        "w-0 grow truncate p-0.5",
+                        cnd(name.length, "font-bold", "italic opacity-50")
+                      ),
+                      children: name.length ? name.join(" / ") : namePlaceholder
+                    }
+                  )
+                ] }),
+                link && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
                   "div",
                   {
-                    className: cn(
-                      "grow basis-0 truncate p-0.5",
-                      cnd(name.length, "font-bold", "italic opacity-50")
+                    className: "\n                      flex items-center gap-0.25 text-timecode-usage-foreground\n                    ",
+                    style: cssSigilColorUsageVariables(
+                      "timecode-usage",
+                      // Override timecode color with the user hint preferences
+                      // when no color is specified
+                      // as that will be what's used by the linked input/generator
+                      sigilColorUsage(link.color ?? "hint")
                     ),
-                    children: name.length ? name.join(" / ") : namePlaceholder
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        "div",
+                        {
+                          className: "\n                        m-0.25 flex items-center gap-0.25 rounded-md border\n                        border-sigil-bg-light bg-timecode-usage-foreground px-1\n                        py-0.25 text-sigil-control text-timecode-usage-text\n                      ",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2, { icon: "link", className: "text-[120%]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: link.type })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                        "div",
+                        {
+                          className: cn(
+                            "w-0 grow truncate p-0.5",
+                            cnd(link.name.length, "font-bold", "italic opacity-50")
+                          ),
+                          children: link.name.length ? link.name.join(" / ") : link.namePlaceholder
+                        }
+                      )
+                    ]
                   }
                 )
-              ] }),
+              ] }) }),
               /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   ControlButton,
@@ -16639,7 +16750,7 @@ var FullscreenTimecodeDisplay = ({
       return getTimecodeInstance(applicationState, id);
     } else {
       const c = config.outputs[id[1]];
-      if (!c) {
+      if (!c || !c.enabled) {
         return null;
       }
       return augmentUpstreamTimecodeWithOutputMetadata(
@@ -16648,6 +16759,15 @@ var FullscreenTimecodeDisplay = ({
       );
     }
   }, [applicationState, id, config.outputs]);
+  const linkedSourceInfo = (0, import_react31.useMemo)(() => {
+    if (isOutputInstanceId(id)) {
+      const c = config.outputs[id[1]];
+      if (c?.link) {
+        return getLinkedSourceInfo(c.link, config);
+      }
+    }
+    return void 0;
+  }, [id, config]);
   const instanceConfig = (0, import_react31.useMemo)(() => {
     if (isInputInstanceId(id)) {
       const c = config.inputs[id[1]];
@@ -16659,7 +16779,8 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.protocols[c.definition.type].short,
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Input`
+        namePlaceholder: STRINGS.inputs.unnamed,
+        disabled: !c.enabled
       };
     } else if (isGeneratorInstanceId(id)) {
       const c = config.generators[id[1]];
@@ -16671,7 +16792,8 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.generators.type[c.definition.type],
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Generator`
+        namePlaceholder: STRINGS.generators.unnamed,
+        disabled: false
       };
     } else {
       const c = config.outputs[id[1]];
@@ -16683,10 +16805,29 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.protocols[c.definition.type].short,
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Output`
+        namePlaceholder: STRINGS.outputs.unnamed,
+        disabled: !c.enabled
       };
     }
   }, [id, config]);
+  const rootState = (0, import_react31.useMemo)(() => {
+    if (isInputInstanceId(id)) {
+      return {
+        errors: applicationState.inputs?.[id[1]]?.errors ?? [],
+        warnings: applicationState.inputs?.[id[1]]?.warnings ?? []
+      };
+    } else if (isGeneratorInstanceId(id)) {
+      return {
+        errors: [],
+        warnings: []
+      };
+    } else {
+      return {
+        errors: applicationState.outputs?.[id[1]]?.errors ?? [],
+        warnings: applicationState.outputs?.[id[1]]?.warnings ?? []
+      };
+    }
+  }, [id, applicationState]);
   if (!instanceConfig) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       SizeAwareDiv,
@@ -16707,9 +16848,11 @@ var FullscreenTimecodeDisplay = ({
         TimecodeTreeDisplay,
         {
           id,
-          timecode,
+          timecode: instanceConfig.disabled ? "disabled" : timecode,
+          rootState,
           assignToOutput: null,
           buttons: null,
+          link: linkedSourceInfo,
           ...instanceConfig
         }
       )
@@ -17147,7 +17290,7 @@ var OutputDisplay = ({
   setAssignToOutput
 }) => {
   const applicationState = useApplicationState();
-  const { updateConfig } = (0, import_react32.useContext)(ConfigContext);
+  const { config: allConfig, updateConfig } = (0, import_react32.useContext)(ConfigContext);
   const clearLink = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       const currentOutput = current.outputs?.[uuid];
@@ -17175,6 +17318,10 @@ var OutputDisplay = ({
     const tc = config.link && getTimecodeInstance(applicationState, config.link);
     return augmentUpstreamTimecodeWithOutputMetadata(tc, config);
   }, [applicationState, config]);
+  const link = (0, import_react32.useMemo)(
+    () => getLinkedSourceInfo(config.link, allConfig),
+    [config.link, allConfig]
+  );
   const toggleEnabled = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       const existing = current.outputs?.[uuid];
@@ -17193,6 +17340,13 @@ var OutputDisplay = ({
       };
     });
   }, [uuid, updateConfig]);
+  const rootState = (0, import_react32.useMemo)(
+    () => ({
+      errors: applicationState.outputs[uuid]?.errors ?? [],
+      warnings: applicationState.outputs[uuid]?.warnings ?? []
+    }),
+    [applicationState.outputs, uuid]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
@@ -17211,23 +17365,25 @@ var OutputDisplay = ({
             type: STRINGS.protocols[config.definition.type].short,
             name: config.name ? [config.name] : [],
             color: config.color,
-            timecode: config.enabled ? timecode : null,
-            namePlaceholder: `Unnamed Output`,
+            timecode: config.enabled ? timecode : "disabled",
+            rootState,
+            namePlaceholder: STRINGS.outputs.unnamed,
+            link,
             buttons: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ControlButton,
                 {
                   variant: "large",
-                  title: config.enabled ? "Stop Input" : "Start Input",
+                  title: config.enabled ? STRINGS.outputs.disable : STRINGS.outputs.enable,
                   onClick: toggleEnabled,
-                  icon: config.enabled ? "stop" : "play_arrow"
+                  icon: config.enabled ? "pause" : "play_arrow"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ControlButton,
                 {
                   variant: "large",
-                  title: "Link Output",
+                  title: STRINGS.outputs.link,
                   active: assignToOutput === uuid,
                   onClick: linkCallback,
                   icon: config.link ? "link" : "link_off"
@@ -17237,7 +17393,7 @@ var OutputDisplay = ({
                 ControlButton,
                 {
                   variant: "large",
-                  title: "Edit Output",
+                  title: STRINGS.outputs.edit,
                   onClick: () => setDialogMode({
                     section: { type: "outputs", output: config.definition.type },
                     target: { type: "edit", uuid }
@@ -17495,6 +17651,7 @@ var GeneratorDisplay = ({
 }) => {
   const { generators } = useApplicationState();
   const state = generators[uuid];
+  const rootState = (0, import_react33.useMemo)(() => ({ errors: [], warnings: [] }), []);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TimecodeTreeDisplay,
     {
@@ -17504,12 +17661,13 @@ var GeneratorDisplay = ({
       name: config.name ? [config.name] : [],
       color: config.color,
       timecode: state?.timecode ?? null,
-      namePlaceholder: `Unnamed Generator`,
+      rootState,
+      namePlaceholder: STRINGS.generators.unnamed,
       buttons: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ControlButton,
         {
           variant: "large",
-          title: "Edit Generator",
+          title: STRINGS.generators.edit,
           onClick: () => setDialogMode({
             section: {
               type: "generators",
@@ -17898,6 +18056,10 @@ var InputDisplay = ({
       };
     });
   }, [uuid, updateConfig]);
+  const rootState = (0, import_react34.useMemo)(
+    () => ({ errors: state?.errors ?? [], warnings: state?.warnings ?? [] }),
+    [state?.errors, state?.warnings]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     TimecodeTreeDisplay,
     {
@@ -17906,23 +18068,24 @@ var InputDisplay = ({
       type: STRINGS.protocols[config.definition.type].short,
       name: config.name ? [config.name] : [],
       color: config.color,
-      timecode: state?.timecode ?? null,
-      namePlaceholder: `Unnamed Input`,
+      timecode: config.enabled ? state?.timecode ?? null : "disabled",
+      rootState,
+      namePlaceholder: STRINGS.inputs.unnamed,
       buttons: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           ControlButton,
           {
             variant: "large",
-            title: config.enabled ? "Stop Input" : "Start Input",
+            title: config.enabled ? STRINGS.inputs.disable : STRINGS.inputs.enable,
             onClick: toggleEnabled,
-            icon: config.enabled ? "stop" : "play_arrow"
+            icon: config.enabled ? "pause" : "play_arrow"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           ControlButton,
           {
             variant: "large",
-            title: "Edit Input",
+            title: STRINGS.inputs.edit,
             onClick: () => setDialogMode({
               section: { type: "inputs", input: config.definition.type },
               target: { type: "edit", uuid }