@arcanewizards/timecode-toolbox 0.0.3

package/src/components/frontend/toolbox/root.tsx

@@ -0,0 +1,335 @@
+import { Debugger } from '@arcanewizards/sigil/frontend';
+import {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  TIMECODE_INSTANCE_ID,
+  TimecodeToolboxComponentCalls,
+  ToolboxConfig,
+  ToolboxRootComponent,
+  ToolboxRootConfigUpdate,
+} from '../../proto';
+import {
+  ToolbarDivider,
+  ToolbarRow,
+  ToolbarWrapper,
+} from '@arcanewizards/sigil/frontend/toolbars';
+import { ControlButton } from '@arcanewizards/sigil/frontend/controls';
+import { ExternalLink } from './content';
+import { STRINGS } from '../constants';
+import { OutputSettingsDialog, OutputsSection } from './outputs';
+import { GeneratorSettingsDialog, GeneratorsSection } from './generators';
+import { InputSettingsDialog, InputsSection } from './inputs';
+import { diffJson } from '@arcanejs/diff';
+import { StageContext } from '@arcanejs/toolkit-frontend';
+import {
+  ApplicationHandlersContext,
+  ApplicationHandlersContextData,
+  ApplicationStateContext,
+  ConfigContext,
+  ConfigContextData,
+  NetworkContext,
+} from './context';
+import { AssignToOutputCallback, DialogMode } from './types';
+import { Settings } from './settings';
+import { useBrowserPreferences } from './preferences';
+import { useRootHintVariables } from '@arcanewizards/sigil/frontend/styling';
+import { SizeAwareDiv } from './core/size-aware-div';
+import { Icon } from '@arcanejs/toolkit-frontend/components/core';
+import { getFragmentValue } from '../../../urls';
+import { FullscreenTimecodeDisplay } from './core/timecode-display';
+
+type Props = {
+  info: ToolboxRootComponent;
+};
+
+export const ToolboxRoot: FC<Props> = ({ info }) => {
+  const [windowMode, setWindowMode] = useState<'debug' | 'settings' | null>(
+    null,
+  );
+  const { config } = info;
+  const { sendMessage, call, connection, reconnect } = useContext(StageContext);
+  const [dialogMode, setDialogMode] = useState<DialogMode | null>(null);
+
+  const [assignToOutput, setAssignToOutput] = useState<string | null>(null);
+
+  const { preferences } = useBrowserPreferences();
+
+  useRootHintVariables(preferences.color);
+
+  useEffect(() => {
+    if (assignToOutput) {
+      const onEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          setAssignToOutput(null);
+        }
+      };
+      window.addEventListener('keydown', onEscape);
+      return () => {
+        window.removeEventListener('keydown', onEscape);
+      };
+    }
+  }, [assignToOutput]);
+
+  const updateConfig = useCallback(
+    (change: (current: ToolboxConfig) => ToolboxConfig) => {
+      const diff = diffJson(config, change(config));
+      sendMessage?.<ToolboxRootConfigUpdate>({
+        type: 'component-message',
+        namespace: 'timecode-toolbox',
+        component: 'toolbox-root',
+        componentKey: info.key,
+        action: 'update-config',
+        diff,
+      });
+    },
+    [sendMessage, info.key, config],
+  );
+
+  const configContext: ConfigContextData = useMemo(
+    () => ({
+      config,
+      updateConfig,
+    }),
+    [config, updateConfig],
+  );
+
+  const closeDialog = useCallback(() => setDialogMode(null), []);
+
+  const getNetworkInterfaces = useCallback(async () => {
+    if (!call) {
+      throw new Error('No call function available');
+    }
+    return call<
+      'timecode-toolbox',
+      TimecodeToolboxComponentCalls,
+      'toolbox-root-get-network-interfaces'
+    >({
+      namespace: 'timecode-toolbox',
+      type: 'component-call',
+      componentKey: info.key,
+      action: 'toolbox-root-get-network-interfaces',
+    });
+  }, [call, info.key]);
+
+  const networkContextValue = useMemo(() => {
+    return {
+      getNetworkInterfaces,
+    };
+  }, [getNetworkInterfaces]);
+
+  const assignToOutputCallback: AssignToOutputCallback = useMemo(() => {
+    if (!assignToOutput) {
+      return null;
+    }
+    const outputUuid = assignToOutput;
+    return (id) => {
+      updateConfig((current) => {
+        const output = current.outputs[outputUuid];
+        if (!output) {
+          return current;
+        }
+        return {
+          ...current,
+          outputs: {
+            ...current.outputs,
+            [outputUuid]: {
+              ...output,
+              link: id,
+            },
+          },
+        };
+      });
+      setAssignToOutput(null);
+    };
+  }, [assignToOutput, updateConfig]);
+
+  const callHandler: ApplicationHandlersContextData['callHandler'] =
+    useCallback(
+      async ({ path, handler, args }) => {
+        if (!call) {
+          throw new Error('No call function available');
+        }
+        return call<
+          'timecode-toolbox',
+          TimecodeToolboxComponentCalls,
+          'toolbox-root-call-handler'
+        >({
+          namespace: 'timecode-toolbox',
+          type: 'component-call',
+          componentKey: info.key,
+          action: 'toolbox-root-call-handler',
+          handler,
+          path,
+          args,
+        });
+      },
+      [call, info.key],
+    );
+
+  const handlers: ApplicationHandlersContextData = useMemo(
+    () => ({
+      handlers: info.handlers,
+      callHandler,
+    }),
+    [info.handlers, callHandler],
+  );
+
+  const windowedTimecodeId = useMemo(
+    () => getFragmentValue('tc', TIMECODE_INSTANCE_ID),
+    [],
+  );
+
+  const isMainWindow = windowedTimecodeId === null;
+
+  const root = useMemo(
+    () => (
+      <div className="flex h-screen flex-col">
+        <ToolbarWrapper>
+          <ToolbarRow>
+            <div
+              className="
+                flex h-full min-h-[36px] grow items-center justify-center px-1
+                app-title-bar
+              "
+            >
+              <span className="font-bold text-hint-gradient">
+                {STRINGS.title}
+              </span>
+            </div>
+            {isMainWindow && (
+              <>
+                <ToolbarDivider />
+                <ControlButton
+                  onClick={() =>
+                    setWindowMode((mode) =>
+                      mode === 'settings' ? null : 'settings',
+                    )
+                  }
+                  variant="titlebar"
+                  icon="settings"
+                  active={windowMode === 'settings'}
+                  title={STRINGS.toggle(STRINGS.settings.title)}
+                />
+                <ControlButton
+                  onClick={() =>
+                    setWindowMode((mode) => (mode === 'debug' ? null : 'debug'))
+                  }
+                  variant="titlebar"
+                  icon="bug_report"
+                  active={windowMode === 'debug'}
+                  title={STRINGS.toggle(STRINGS.debugger)}
+                />
+              </>
+            )}
+          </ToolbarRow>
+        </ToolbarWrapper>
+        <div className="relative flex h-0 grow flex-col">
+          {connection.state !== 'connected' ? (
+            <SizeAwareDiv
+              className="
+                flex grow flex-col items-center justify-center gap-1
+                bg-sigil-bg-light p-1 text-sigil-foreground-muted
+              "
+            >
+              <Icon icon="signal_disconnected" className="text-block-icon" />
+              <div className="text-center">{STRINGS.connectionError}</div>
+              <ControlButton onClick={reconnect} variant="large" icon="replay">
+                {STRINGS.reconnect}
+              </ControlButton>
+            </SizeAwareDiv>
+          ) : windowMode === 'debug' ? (
+            <Debugger title={STRINGS.debugger} className="size-full" />
+          ) : windowMode === 'settings' ? (
+            <Settings setWindowMode={setWindowMode} />
+          ) : windowedTimecodeId ? (
+            <FullscreenTimecodeDisplay id={windowedTimecodeId} />
+          ) : (
+            <div
+              className="
+                flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border
+                scrollbar-sigil
+              "
+            >
+              <InputsSection
+                setDialogMode={setDialogMode}
+                assignToOutput={assignToOutputCallback}
+              />
+              <GeneratorsSection
+                setDialogMode={setDialogMode}
+                assignToOutput={assignToOutputCallback}
+              />
+              <OutputsSection
+                setDialogMode={setDialogMode}
+                assignToOutput={assignToOutput}
+                setAssignToOutput={setAssignToOutput}
+              />
+            </div>
+          )}
+          {dialogMode?.section.type === 'inputs' && (
+            <InputSettingsDialog
+              close={closeDialog}
+              input={dialogMode.section.input}
+              target={dialogMode.target}
+            />
+          )}
+          {dialogMode?.section.type === 'generators' && (
+            <GeneratorSettingsDialog
+              close={closeDialog}
+              generator={dialogMode.section.generator}
+              target={dialogMode.target}
+            />
+          )}
+          {dialogMode?.section.type === 'outputs' && (
+            <OutputSettingsDialog
+              close={closeDialog}
+              output={dialogMode.section.output}
+              target={dialogMode.target}
+            />
+          )}
+        </div>
+        {isMainWindow && (
+          <div
+            className="
+              flex justify-center border-t border-sigil-border bg-sigil-bg-dark
+              p-1 text-[80%]
+            "
+          >
+            {'Created by'}&nbsp;
+            <ExternalLink href="https://arcanewizards.com">
+              Arcane Wizards
+            </ExternalLink>
+          </div>
+        )}
+      </div>
+    ),
+    [
+      connection,
+      reconnect,
+      assignToOutput,
+      assignToOutputCallback,
+      closeDialog,
+      dialogMode,
+      windowMode,
+      isMainWindow,
+      windowedTimecodeId,
+    ],
+  );
+
+  return (
+    <ConfigContext.Provider value={configContext}>
+      <NetworkContext.Provider value={networkContextValue}>
+        <ApplicationStateContext.Provider value={info.state}>
+          <ApplicationHandlersContext.Provider value={handlers}>
+            {root}
+          </ApplicationHandlersContext.Provider>
+        </ApplicationStateContext.Provider>
+      </NetworkContext.Provider>
+    </ConfigContext.Provider>
+  );
+};

package/src/components/frontend/toolbox/settings.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+
+import { AppearanceSwitcher } from '@arcanewizards/sigil/frontend/appearance';
+import { useBrowserPreferences } from './preferences';
+import {
+  ControlButton,
+  ControlLabel,
+} from '@arcanewizards/sigil/frontend/controls';
+import {
+  ToolbarDivider,
+  ToolbarRow,
+  ToolbarWrapper,
+} from '@arcanewizards/sigil/frontend/toolbars';
+import { STRINGS } from '../constants';
+
+type SettingsProps = {
+  setWindowMode: (mode: null) => void;
+};
+
+export const Settings: FC<SettingsProps> = ({ setWindowMode }) => {
+  const { preferences, updateBrowserPrefs } = useBrowserPreferences();
+
+  return (
+    <div className="flex grow flex-col">
+      <ToolbarWrapper>
+        <ToolbarRow>
+          <span className="grow p-1">{STRINGS.settings.title}</span>
+          <ToolbarDivider />
+          <ControlButton
+            onClick={() => setWindowMode(null)}
+            variant="titlebar"
+            icon="close"
+            title={STRINGS.close(STRINGS.settings.title)}
+          />
+        </ToolbarRow>
+      </ToolbarWrapper>
+      <div
+        className="
+          grow basis-0 overflow-y-auto bg-sigil-bg-light scrollbar-sigil
+        "
+      >
+        <div className="control-grid-large">
+          <ControlLabel>Appearance</ControlLabel>
+          <AppearanceSwitcher
+            color={preferences.color}
+            onColorChange={(color) =>
+              updateBrowserPrefs((current) => ({ ...current, color }))
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/frontend/toolbox/types.ts

@@ -0,0 +1,28 @@
+import {
+  GeneratorDefinition,
+  InputDefinition,
+  InputOrGenInstance,
+  OutputDefinition,
+} from '../../proto';
+
+export type DialogMode = {
+  section:
+    | { type: 'inputs'; input: InputDefinition['type'] }
+    | { type: 'generators'; generator: GeneratorDefinition['type'] }
+    | { type: 'outputs'; output: OutputDefinition['type'] };
+  target:
+    | {
+        type: 'add';
+      }
+    | {
+        type: 'edit';
+        uuid: string;
+      };
+};
+
+export type SettingsProps<T> = {
+  data: T;
+  updateSettings: (change: (current: T) => T) => void;
+};
+
+export type AssignToOutputCallback = ((id: InputOrGenInstance) => void) | null;

package/src/components/frontend/toolbox/util.tsx

@@ -0,0 +1,61 @@
+import { FC, ReactNode } from 'react';
+
+type PrimaryToolboxSectionProps = {
+  title: string;
+  children: ReactNode;
+  buttons: ReactNode;
+};
+
+export const PrimaryToolboxSection: FC<PrimaryToolboxSectionProps> = ({
+  title,
+  children,
+  buttons,
+}) => {
+  return (
+    <div className="flex grow gap-px">
+      <div
+        className="
+          flex items-center justify-center bg-sigil-bg-light p-1
+          writing-mode-vertical-rl
+        "
+      >
+        {title}
+      </div>
+      <div className="flex grow flex-col gap-px">
+        <div className="flex grow flex-col gap-px">{children}</div>
+        <div className="flex w-full flex-wrap gap-1 bg-sigil-bg-light p-1">
+          {buttons}
+        </div>
+      </div>
+    </div>
+  );
+};
+/**
+ * Display the given number of milliseconds in a nice format to the user
+ */
+export function displayMillis(totalMilliseconds: number): string {
+  if (totalMilliseconds < 0) {
+    return '-' + displayMillis(-totalMilliseconds);
+  }
+  let remaining = totalMilliseconds;
+  const hours = (remaining / 3600000) | 0;
+  remaining -= hours * 3600000;
+  const mins = (remaining / 60000) | 0;
+  remaining -= mins * 60000;
+  const seconds = (remaining / 1000) | 0;
+  remaining -= seconds * 1000;
+  const millis = remaining | 0;
+  return (
+    (hours < 10 ? '0' : '') +
+    hours +
+    ':' +
+    (mins < 10 ? '0' : '') +
+    mins +
+    ':' +
+    (seconds < 10 ? '0' : '') +
+    seconds +
+    ':' +
+    (millis < 10 ? '00' : millis < 100 ? '0' : '') +
+    millis
+  );
+}