@arcanewizards/timecode-toolbox 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,40 +0,0 @@
-# @arcanewizards/timecode-toolbox
-
-## 0.1.0
-
-### Minor Changes
-
-- 046e311: Allow timecode-toolbox to be run from cli
-
-  Introduce a "bin" entry to allow for the package to be installed via npx,
-  or globally, and executed easily on a host machine.
-
-### Patch Changes
-
-- 109936d: Correct dependencies in timecode-toolbox
-
-  Certain dev dependencies were incorrectly listed as normal dependencies,
-  meaning they would be incorrectly installed.
-
-## 0.0.3
-
-### Patch Changes
-
-- Introduce Appearance Settings
-
-  Make it possible to choose between light/dark/os mode,
-  and to pick a primary interface color.
-
-- Introduce new clock generator
-
-  Introduce a new generator that uses the local time of the system clock,
-  and can be started, stopped, reset etc...
-
-  This can be connected to an output like all the existing inputs.
-
-- Allow individual timecodes to be opened in new window
-
-  For cases where users want to be able to focus on one particular timecode,
-  or have complex multi-window / workspace. /monitor setups where they want to be
-  able to display specific timecodes in different places,
-  it's now possible to open a specific timecode in a new window.

package/eslint.config.mjs

@@ -1,49 +0,0 @@
-import { defineConfig } from 'eslint/config';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-
-import {
-  tsParser,
-  js,
-  FlatCompat,
-} from '@arcanewizards/eslint-config/dependencies.js';
-import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss';
-import reactTailwindConfig from '@arcanewizards/eslint-config/react-tailwind.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const { REACT_TAILWIND_CALLEES } = reactTailwindConfig;
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
-export default defineConfig([
-  {
-    extends: compat.extends('@arcanewizards/eslint-config/library.js'),
-
-    languageOptions: {
-      parser: tsParser,
-    },
-  },
-  {
-    extends: [eslintPluginBetterTailwindcss.configs.recommended],
-    settings: {
-      'better-tailwindcss': {
-        entryPoint: './src/components/frontend/frontend.css',
-        tsconfig: './tsconfig.json',
-        callees: REACT_TAILWIND_CALLEES,
-      },
-    },
-    rules: {
-      'better-tailwindcss/no-unknown-classes': 'error',
-    },
-  },
-  {
-    rules: {
-      'turbo/no-undeclared-env-vars': 'off',
-    },
-  },
-]);

package/src/app.tsx

@@ -1,147 +0,0 @@
-import {
-  AppShell,
-  AppListenerManager,
-  SigilRuntimeAppProps,
-} from '@arcanewizards/sigil';
-import {
-  JSX,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { C } from './components/backend';
-import { ToolboxConfigData } from './config';
-import path from 'node:path';
-import { useDataFileContext } from '@arcanejs/react-toolkit/data';
-import {
-  ApplicationState,
-  AvailableHandlers,
-  DEFAULT_CONFIG,
-  TimecodeHandlerMethods,
-  ToolboxConfig,
-  ToolboxRootCallHandler,
-} from './components/proto';
-import { patchJson, Diff } from '@arcanejs/diff';
-import { InputConnections } from './inputs';
-import { OutputConnections } from './outputs';
-import { Generators } from './generators';
-import { TimecodeHandlers } from './types';
-import { getTreeValue, mapTree, Tree } from './tree';
-
-export type AppApi = Record<never, never>;
-
-export type TimecodeToolboxAppProps = {
-  dataDirectory: string;
-};
-
-export type AppProps = SigilRuntimeAppProps<AppApi, TimecodeToolboxAppProps>;
-
-export const App = ({
-  title,
-  version,
-  toolkit,
-  dataDirectory,
-  logger,
-  logEventEmitter,
-  setWindowUrl,
-  shutdownContext,
-}: AppProps): ReactNode => {
-  const { data, error, updateData, resetData } =
-    useDataFileContext(ToolboxConfigData);
-
-  useEffect(() => {
-    if (error) {
-      logger.warn('Resetting config to application default');
-      resetData();
-    }
-  }, [logger, error, resetData]);
-
-  const onUpdateConfig = (diff: Diff<ToolboxConfig>) => {
-    updateData((prev) => patchJson(prev, diff) ?? DEFAULT_CONFIG);
-  };
-
-  const [state, setState] = useState<Omit<ApplicationState, 'handlers'>>({
-    inputs: {},
-    outputs: {},
-    generators: {},
-  });
-
-  const [handlers, setHandlers] = useState<TimecodeHandlers>({ children: {} });
-
-  const availableHandlers: Tree<AvailableHandlers> = useMemo(
-    () =>
-      mapTree(handlers, (node) =>
-        Object.fromEntries(
-          Object.entries(node)
-            .filter(([_, handler]) => handler)
-            .map(([key]) => [key, true]),
-        ),
-      ),
-    [handlers],
-  );
-
-  const callHandler = useCallback(
-    async <H extends keyof AvailableHandlers>(
-      call: ToolboxRootCallHandler<H>,
-    ) => {
-      const handlerFunc = getTreeValue(handlers, call.path)?.[call.handler];
-      if (handlerFunc) {
-        return await (
-          handlerFunc as (
-            ...args: Parameters<NonNullable<TimecodeHandlerMethods[H]>>
-          ) => void
-        )(...call.args);
-      }
-      throw new Error(
-        `No handler found for path: ${call.path.join(' -> ')} and handler: ${call.handler}`,
-      );
-    },
-    [handlers],
-  );
-
-  return (
-    <AppShell
-      title={title}
-      version={version}
-      dataDirectory={dataDirectory}
-      logger={logger}
-      logEventEmitter={logEventEmitter}
-      shutdownContext={shutdownContext}
-    >
-      <C.ToolboxRoot
-        config={data}
-        state={state}
-        handlers={availableHandlers}
-        onUpdateConfig={onUpdateConfig}
-        onCallHandler={callHandler}
-      />
-      <InputConnections state={state} setState={setState} />
-      <Generators state={state} setState={setState} setHandlers={setHandlers} />
-      <OutputConnections state={state} setState={setState} />
-      <AppListenerManager
-        toolkit={toolkit}
-        setWindowUrl={setWindowUrl}
-        listenerConfig={{
-          default: {
-            port: {
-              from: 4100,
-              to: 4200,
-            },
-          },
-        }}
-      />
-    </AppShell>
-  );
-};
-
-export const createApp = (props: AppProps): JSX.Element => {
-  return (
-    <ToolboxConfigData.Provider
-      path={path.join(props.dataDirectory, 'config.json')}
-    >
-      <App {...props} />
-    </ToolboxConfigData.Provider>
-  );
-};

package/src/components/backend/index.ts

@@ -1,6 +0,0 @@
-import { prepareComponents } from '@arcanejs/react-toolkit';
-import { ToolboxRoot } from './toolbox-root';
-
-export const C = prepareComponents('timecode-toolbox', {
-  ToolboxRoot,
-});

package/src/components/backend/toolbox-root.ts

@@ -1,119 +0,0 @@
-import { IDMap } from '@arcanejs/toolkit/util';
-import { Diff } from '@arcanejs/diff';
-
-import {
-  Base,
-  EventEmitter,
-  Listenable,
-} from '@arcanejs/toolkit/components/base';
-import {
-  TimecodeToolboxComponentCalls,
-  Namespace,
-  ToolboxRootComponent,
-  ToolboxConfig,
-  isTimecodeToolboxComponentMessage,
-  DEFAULT_CONFIG,
-  isTimecodeToolboxComponentCall,
-  ToolboxRootCallHandler,
-} from '../proto';
-import {
-  AnyClientComponentCall,
-  AnyClientComponentMessage,
-} from '@arcanejs/protocol';
-import { getNetworkInterfaces } from '@arcanewizards/net-utils';
-
-export type Events = {
-  updateConfig: (diff: Diff<ToolboxConfig>) => void;
-  callHandler: (call: ToolboxRootCallHandler) => Promise<void>;
-};
-
-export type AppRootProps = Pick<
-  ToolboxRootComponent,
-  'config' | 'state' | 'handlers'
-> & {
-  onUpdateConfig?: Events['updateConfig'];
-  onCallHandler?: Events['callHandler'];
-};
-
-const DEFAULT_PROPS: AppRootProps = {
-  config: DEFAULT_CONFIG,
-  state: {
-    inputs: {},
-    outputs: {},
-    generators: {},
-  },
-  handlers: { children: {} },
-};
-
-export class ToolboxRoot
-  extends Base<
-    Namespace,
-    ToolboxRootComponent,
-    AppRootProps,
-    TimecodeToolboxComponentCalls
-  >
-  implements Listenable<Events>
-{
-  /** @hidden */
-  private readonly events = new EventEmitter<Events>();
-
-  public constructor(props: AppRootProps) {
-    super(DEFAULT_PROPS, props, {
-      onPropsUpdated: (oldProps) =>
-        this.events.processPropChanges(
-          {
-            onUpdateConfig: 'updateConfig',
-            onCallHandler: 'callHandler',
-          },
-          oldProps,
-          this.props,
-        ),
-    });
-    this.triggerInitialPropsUpdate();
-  }
-
-  addListener = this.events.addListener;
-  removeListener = this.events.removeListener;
-
-  /** @hidden */
-  public getProtoInfo(idMap: IDMap): ToolboxRootComponent {
-    return {
-      namespace: 'timecode-toolbox',
-      component: 'toolbox-root',
-      key: idMap.getId(this),
-      config: this.props.config,
-      state: this.props.state,
-      handlers: this.props.handlers,
-    };
-  }
-
-  /** @hidden */
-  public handleMessage = (message: AnyClientComponentMessage) => {
-    if (isTimecodeToolboxComponentMessage(message, 'toolbox-root')) {
-      if (message.action === 'update-config') {
-        this.events.emit('updateConfig', message.diff);
-      }
-    }
-  };
-
-  /** @hidden */
-  public handleCall = async (call: AnyClientComponentCall) => {
-    if (
-      isTimecodeToolboxComponentCall(
-        call,
-        'toolbox-root-get-network-interfaces',
-      )
-    ) {
-      return getNetworkInterfaces();
-    } else if (
-      isTimecodeToolboxComponentCall(call, 'toolbox-root-call-handler')
-    ) {
-      const result = await this.events.emit('callHandler', call);
-      if (result[0]) {
-        return result[0];
-      }
-      throw new Error(`No handler for callHandler`);
-    }
-    throw new Error(`Unhandled call action: ${call.action}`);
-  };
-}

package/src/components/frontend/constants.ts

@@ -1,81 +0,0 @@
-import { TIMECODE_FPS } from '@arcanewizards/artnet/constants';
-
-const MS_FORMAT = new Intl.NumberFormat(undefined, {
-  style: 'unit',
-  unit: 'millisecond',
-  maximumFractionDigits: 0,
-});
-
-export const STRINGS = {
-  title: 'Timecode Toolbox',
-  debugger: 'Debug Tools & Log',
-  connectionError: 'Disconnected from Timecode Toolbox Server',
-  reconnect: 'Reconnect',
-  openInNewWindow: 'Open in new window',
-  toggle: (text: string) => `Toggle ${text}`,
-  close: (text: string) => `Close ${text}`,
-  protocols: {
-    artnet: {
-      short: 'ArtNet',
-      long: 'ArtNet',
-    },
-    tcnet: {
-      short: 'TCNet',
-      long: 'TCNet (ShowKontrol / Pioneer)',
-    },
-  },
-  inputs: {
-    title: 'INPUTS',
-    noChildren: 'No inputs yet. Please add one using the buttons below.',
-    addButton: (protocol: string) => `Add ${protocol}`,
-    addDialog: (protocol: string) => `Add ${protocol} Input`,
-    editDialog: (protocol: string, name: string) =>
-      `Edit ${protocol} Input ${name}`,
-  },
-  smtpeModes: {
-    SMPTE: `SMPTE ${TIMECODE_FPS.SMPTE}FPS`,
-    FILM: `FILM ${TIMECODE_FPS.FILM}FPS`,
-    EBU: `EBU ${TIMECODE_FPS.EBU}FPS`,
-    DF: `DF ${TIMECODE_FPS.DF}FPS`,
-  },
-  smtpeModeOptions: {
-    SMPTE: `SMPTE (${TIMECODE_FPS.SMPTE}FPS) (Recommended)`,
-    FILM: `FILM (${TIMECODE_FPS.FILM}FPS)`,
-    EBU: `EBU (${TIMECODE_FPS.EBU}FPS)`,
-    DF: `DF (${TIMECODE_FPS.DF}FPS)`,
-  },
-  accuracy: (accuracyMillis: number) =>
-    `Accuracy: ${MS_FORMAT.format(accuracyMillis)}`,
-  delay: (delayMs: number) => `Delay: ${MS_FORMAT.format(delayMs)}`,
-  generators: {
-    title: 'GENERATORS',
-    noChildren: 'No generators yet. Please add one using the buttons below.',
-    type: {
-      clock: 'Clock',
-    },
-    addDialog: (protocol: string) => `Add ${protocol} Generator`,
-    editDialog: (protocol: string, name: string) =>
-      `Edit ${protocol} Generator ${name}`,
-  },
-  outputs: {
-    title: 'OUTPUTS',
-    noChildren: 'No outputs yet. Please add one using the buttons below.',
-    addButton: (protocol: string) => `Add ${protocol}`,
-    addDialog: (protocol: string) => `Add ${protocol} Output`,
-    editDialog: (protocol: string, name: string) =>
-      `Edit ${protocol} Output ${name}`,
-  },
-  settings: {
-    title: 'Settings',
-  },
-  controls: {
-    play: 'Play',
-    pause: 'Pause',
-    beginning: 'Reset timecode to start',
-    back5seconds: 'Back 5 Seconds',
-    forward5seconds: 'Forward 5 Seconds',
-  },
-  errors: {
-    unknownTimecodeID: 'Unknown timecode ID, please close the window',
-  },
-} as const;

package/src/components/frontend/entrypoint.ts

@@ -1,12 +0,0 @@
-import {
-  startTimecodeToolboxServerFrontend,
-  TimecodeToolboxBrowserContext,
-} from '.';
-
-declare global {
-  interface Window {
-    BROWSER_CONTEXT?: TimecodeToolboxBrowserContext;
-  }
-}
-
-startTimecodeToolboxServerFrontend(window.BROWSER_CONTEXT);

package/src/components/frontend/frontend.css

@@ -1,108 +0,0 @@
-@import '@arcanejs/toolkit-frontend/styles/core.css';
-@import '@arcanejs/toolkit-frontend/styles/theme.css';
-@import '@arcanejs/toolkit-frontend/styles/base.css';
-
-@import '@arcanewizards/sigil/frontend/styles/sigil.css';
-@import '@arcanewizards/sigil/frontend/styles/theme.css';
-@import '@arcanewizards/sigil/frontend/styles/base.css';
-
-@source './**/*.{ts,tsx}';
-
-@theme inline {
-  /**
-    * Any (non-theme) tailwind variables that need to be used by component
-    * classes should be defined here,
-    * other than those that already exist in `@arcanewizards/sigil`
-    */
-  --spacing-timecode-min-height: var(--timecode-min-height);
-  --text-timecode-adaptive: max(
-    var(--timecode-min-height),
-    min(
-      calc(var(--size-aware-div-height) * 0.7),
-      calc(var(--size-aware-div-width) * 0.13)
-    )
-  );
-  --text-block-icon: max(
-    2rem,
-    min(calc(var(--size-aware-div-width) * 0.05), 5rem)
-  );
-
-  --color-timecode-backdrop: oklch(
-    from var(--timecode-usage-foreground) l c h / calc(alpha * 0.25)
-  );
-  --color-timecode-backdrop-hover: oklch(
-    from var(--timecode-usage-foreground) l c h / calc(alpha * 0.5)
-  );
-
-  --color-timecode-usage-text: var(--timecode-usage-text);
-  --color-timecode-usage-foreground: var(--timecode-usage-foreground);
-  --color-timecode-usage-background: var(--timecode-usage-background);
-  --color-timecode-usage-border: var(--timecode-usage-border);
-  --color-timecode-usage-drag-border: var(--timecode-usage-drag-border);
-  --color-timecode-usage-selected-background: var(
-    --timecode-usage-selected-background
-  );
-  --color-timecode-usage-selected-border: var(--timecode-usage-selected-border);
-  --color-timecode-usage-selected-text: var(--timecode-usage-selected-text);
-  --color-timecode-usage-dimmed-background: var(
-    --timecode-usage-dimmed-background
-  );
-  --color-timecode-usage-dimmed-border: var(--timecode-usage-dimmed-border);
-
-  --font-mono: var(--font-mono);
-}
-
-:root {
-  --timecode-min-height: 2rem;
-
-  --font-mono:
-    'SF Mono', SF Mono, SF Mono Regular, Consolas, 'Liberation Mono', Menlo,
-    Courier, monospace;
-}
-
-body {
-  /* prevent window scrollbars from appearing */
-  overflow: hidden;
-}
-
-.arcane-theme-root {
-  /* TODO: move this into @arcanejs */
-  background: var(--arcane-page-bg);
-
-  --timecode-usage-text: var(--sigil-usage-hint-text);
-  --timecode-usage-foreground: var(--sigil-usage-hint-foreground);
-  --timecode-usage-background: var(--sigil-usage-hint-background);
-  --timecode-usage-border: var(--sigil-usage-hint-border);
-  --timecode-usage-drag-border: var(--sigil-usage-hint-drag-border);
-  --timecode-usage-selected-background: var(
-    --sigil-usage-hint-selected-background
-  );
-  --timecode-usage-selected-border: var(--sigil-usage-hint-selected-border);
-  --timecode-usage-selected-text: var(--sigil-usage-hint-selected-text);
-  --timecode-usage-dimmed-background: var(--sigil-usage-hint-dimmed-background);
-  --timecode-usage-dimmed-border: var(--sigil-usage-hint-dimmed-border);
-}
-
-body {
-  user-select: none;
-  /* TODO: fix arcane bg variable in @arcanejs */
-  --arcane-page-bg: #1f1f1f;
-}
-
-@utility writing-mode-vertical-rl {
-  writing-mode: vertical-rl;
-}
-
-@utility app-title-bar {
-  app-region: drag;
-}
-
-@utility text-hint-gradient {
-  background: linear-gradient(
-    to bottom right,
-    var(--sigil-usage-hint-gradient-light),
-    var(--sigil-usage-hint-gradient-dark)
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}

package/src/components/frontend/index.tsx

@@ -1,46 +0,0 @@
-import { FrontendComponentRenderer } from '@arcanejs/toolkit-frontend/types';
-import {
-  BaseBrowserContext,
-  startSigilFrontend,
-} from '@arcanewizards/sigil/frontend';
-import { isTimecodeToolboxComponent, NAMESPACE } from '../proto';
-import { ToolboxRoot } from './toolbox/root';
-
-export type TimecodeToolboxBrowserContext = BaseBrowserContext;
-
-export const timecodeToolboxFrontendComponents =
-  (): FrontendComponentRenderer => ({
-    namespace: NAMESPACE,
-    render: (info) => {
-      if (!isTimecodeToolboxComponent(info)) {
-        throw new Error(`Cannot render component ${info.namespace}`);
-      }
-
-      switch (info.component) {
-        case 'toolbox-root':
-          return <ToolboxRoot info={info} />;
-      }
-    },
-  });
-
-export const startTimecodeToolboxServerFrontend = (
-  browser?: TimecodeToolboxBrowserContext | null,
-) => {
-  startSigilFrontend<TimecodeToolboxBrowserContext>({
-    browser,
-    appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => (
-      <div style={{ width: '100%', textAlign: 'center', padding: '2rem' }}>
-        Loading Toolbox...
-      </div>
-    ),
-  });
-};
-
-declare global {
-  interface Window {
-    startTimecodeToolboxServerFrontend?: typeof startTimecodeToolboxServerFrontend;
-  }
-}
-
-window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;

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

@@ -1,45 +0,0 @@
-import { useBrowserContext } from '@arcanewizards/sigil/frontend';
-import { FC } from 'react';
-import { SizeAwareDiv } from './core/size-aware-div';
-import { Icon } from '@arcanejs/toolkit-frontend/components/core';
-
-export const ExternalLink = ({
-  href,
-  children,
-}: {
-  href: string;
-  children: React.ReactNode;
-}) => {
-  const { openExternalLink } = useBrowserContext();
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={(e) => {
-        e.preventDefault();
-        openExternalLink(href);
-      }}
-      className="
-        text-sigil-usage-hint-foreground no-underline
-        hover:underline
-      "
-    >
-      {children}
-    </a>
-  );
-};
-
-export const NoToolboxChildren: FC<{ text: string }> = ({ text }) => {
-  return (
-    <SizeAwareDiv
-      className="
-        flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light
-        p-1 text-sigil-foreground-muted
-      "
-    >
-      <Icon icon="handyman" className="text-block-icon" />
-      <div className="text-center">{text}</div>
-    </SizeAwareDiv>
-  );
-};