@arcanewizards/timecode-toolbox 0.0.3

package/src/outputs/artnet.tsx

@@ -0,0 +1,170 @@
+import { useDataFileData } from '@arcanejs/react-toolkit/data';
+import {
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { ToolboxConfigData } from '../config';
+import {
+  ApplicationState,
+  OutputArtnetDefinition,
+  OutputConfig,
+  OutputState,
+  isOutputArtnetDefinition,
+} from '../components/proto';
+import { adjustTimecodeForDelay, getTimecodeInstance } from '../util';
+import { useLogger } from '@arcanewizards/sigil';
+import { ArtNet, createArtnet } from '@arcanewizards/artnet';
+import { TIMECODE_FPS } from '@arcanewizards/artnet/constants';
+import { StateSensitiveComponentProps } from '../types';
+
+type ArtnetOutputConnectionProps = StateSensitiveComponentProps & {
+  uuid: string;
+  config: OutputConfig;
+  connection: OutputArtnetDefinition;
+  state: ApplicationState;
+};
+
+const ArtnetOutputConnection: FC<ArtnetOutputConnectionProps> = ({
+  uuid,
+  config,
+  connection: { target, mode },
+  setState,
+  state,
+}) => {
+  const log = useLogger();
+
+  const [artnetInstance, setArtnetInstance] = useState<ArtNet | null>(null);
+
+  const setConnection = useCallback(
+    (state: OutputState) =>
+      setState((current) => ({
+        ...current,
+        outputs: {
+          ...current.outputs,
+          [uuid]: state,
+        },
+      })),
+    [setState, uuid],
+  );
+
+  useEffect(() => {
+    let artnet: ArtNet | null = null;
+    setConnection({ status: 'connecting' });
+    const created = createArtnet({
+      mode: 'send',
+      ...target,
+    });
+    created.on('error', (err) => {
+      const error = new Error('ArtNet output connection error');
+      error.cause = err instanceof Error ? err : new Error(String(err));
+      log.error(error);
+      setConnection({
+        status: 'error',
+        errors: [`${err}`],
+      });
+    });
+    created
+      .connect()
+      .then(() => {
+        artnet = created;
+        setArtnetInstance(created);
+        log.info(`ArtNet Timecode output initialized`);
+        setConnection({ status: 'active' });
+      })
+      .catch((err) => {
+        const error = new Error('Failed to start ArtNet Timecode output');
+        error.cause = err instanceof Error ? err : new Error(String(err));
+        log.error(error);
+        setConnection({
+          status: 'error',
+          errors: [`${err}`],
+        });
+      });
+
+    return () => {
+      if (artnet) {
+        artnet.destroy();
+        setArtnetInstance((current) => (artnet === current ? null : current));
+      }
+    };
+  }, [setConnection, uuid, target, log]);
+
+  useEffect(() => {
+    return () => {
+      // Remove the connection when it's no longer mounted / configured
+      setState((current) => {
+        const { [uuid]: _, ...rest } = current.outputs;
+        return {
+          ...current,
+          outputs: rest,
+        };
+      });
+    };
+  }, [setState, uuid]);
+
+  const tcInstance = useMemo(
+    () => config.link && getTimecodeInstance(state, config.link),
+    [state, config.link],
+  );
+
+  const timecodeState = useMemo(
+    () =>
+      tcInstance?.state
+        ? adjustTimecodeForDelay(tcInstance.state, config.delayMs ?? 0)
+        : null,
+    [tcInstance?.state, config.delayMs],
+  );
+
+  useEffect(() => {
+    if (!artnetInstance) {
+      return;
+    }
+
+    if (
+      timecodeState?.state === 'playing' ||
+      timecodeState?.state === 'lagging'
+    ) {
+      const tcState = timecodeState;
+      const interval = setInterval(() => {
+        const time =
+          (Date.now() - tcState.effectiveStartTimeMillis) * tcState.speed;
+        artnetInstance.sendTimecode(mode, time);
+      }, 1000 / TIMECODE_FPS[mode]);
+      return () => {
+        clearInterval(interval);
+      };
+    } else if (timecodeState?.state === 'stopped') {
+      artnetInstance.sendTimecode(mode, timecodeState?.positionMillis ?? 0);
+    }
+  }, [artnetInstance, mode, timecodeState]);
+
+  return null;
+};
+
+export const ArtnetOutputConnections: FC<StateSensitiveComponentProps> = (
+  props,
+) => {
+  const { outputs } = useDataFileData(ToolboxConfigData);
+
+  return Object.entries(outputs)
+    .filter(([_, { enabled }]) => enabled)
+    .map<ReactNode>(([uuid, output]) => {
+      const definition = output.definition;
+      if (!isOutputArtnetDefinition(definition)) {
+        return null;
+      }
+      return (
+        <ArtnetOutputConnection
+          key={uuid}
+          uuid={uuid}
+          config={output}
+          connection={definition}
+          {...props}
+        />
+      );
+    });
+};

package/src/outputs/index.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ArtnetOutputConnections } from './artnet';
+import { StateSensitiveComponentProps } from '../types';
+
+export const OutputConnections: FC<StateSensitiveComponentProps> = (props) => {
+  return (
+    <>
+      <ArtnetOutputConnections {...props} />
+    </>
+  );
+};

package/src/start.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import pino from 'pino';
+import { runTimecodeToolboxServer } from '.';
+import { homedir } from 'os';
+
+const DATA_DIR = path.join(homedir(), 'timecode-toolbox');
+
+const logger = pino({
+  level: 'info',
+  transport: {
+    target: 'pino-pretty',
+  },
+});
+
+const server = runTimecodeToolboxServer({
+  logger,
+  appProps: {
+    dataDirectory: DATA_DIR,
+  },
+  toolkitOptions: {
+    entrypointJsFile: path.join(path.dirname(__dirname), 'dist/entrypoint.js'),
+  },
+  title: 'Timecode Toolbox Server',
+});
+
+const shutdown = () =>
+  server
+    .shutdown()
+    .catch((err) => {
+      logger.error({ err }, 'Error during shutdown');
+    })
+    .finally(() => {
+      process.exit(0);
+    });
+
+// Catch SIGINT and SIGTERM to allow for graceful shutdown
+process.on('SIGINT', async () => {
+  logger.info('Received SIGINT, shutting down...');
+  shutdown();
+});
+
+process.on('SIGTERM', () => {
+  logger.info('Received SIGTERM, shutting down...');
+  shutdown();
+});
+
+export {};

package/src/tree.ts

@@ -0,0 +1,133 @@
+export type TreeLeaf<T> = {
+  value: T;
+  children?: undefined;
+};
+
+export type TreeNode<T> = {
+  value?: T;
+  children: Record<string, Tree<T>>;
+};
+
+export type Tree<T> = TreeLeaf<T> | TreeNode<T>;
+
+export const isTreeNode = <T>(node: Tree<T>): node is TreeNode<T> =>
+  'children' in node &&
+  typeof node.children === 'object' &&
+  node.children !== null;
+
+export const updateTreeState = <T>(
+  current: Tree<T>,
+  path: string[],
+  value: T,
+): Tree<T> => {
+  if (path.length === 0) {
+    return {
+      ...current,
+      value,
+    };
+  }
+  const [nextKey, ...remainingPath] = path;
+  if (!nextKey) {
+    throw new Error('Invalid path');
+  }
+  if (remainingPath.length === 0) {
+    // Update the child directly
+    return {
+      ...current,
+      children: {
+        ...current.children,
+        [nextKey]: {
+          value,
+          children: current.children?.[nextKey]?.children,
+        },
+      },
+    };
+  }
+  // Path is not empty, need to recurse
+  const children = isTreeNode(current) ? current.children : {};
+  return {
+    ...current,
+    children: {
+      ...children,
+      [nextKey]: updateTreeState(
+        children[nextKey] ?? { children: {} },
+        remainingPath,
+        value,
+      ),
+    },
+  };
+};
+
+export const getTreeValue = <T>(current: Tree<T>, path: string[]): T | null => {
+  if (path.length === 0) {
+    return current.value ?? null;
+  }
+  const [nextKey, ...remainingPath] = path;
+  if (!nextKey) {
+    throw new Error('Invalid path');
+  }
+  if (isTreeNode(current)) {
+    return getTreeValue(
+      current.children[nextKey] ?? { children: {} },
+      remainingPath,
+    );
+  }
+  return null;
+};
+
+export const deleteTreePath = <T>(
+  current: Tree<T>,
+  path: string[],
+): Tree<T> => {
+  if (path.length === 0) {
+    throw new Error('Cannot delete root of the tree');
+  }
+  const [nextKey, ...remainingPath] = path;
+  if (!nextKey) {
+    throw new Error('Invalid path');
+  }
+  if (isTreeNode(current)) {
+    if (remainingPath.length === 0) {
+      // Delete the child directly
+      const { [nextKey]: _, ...remainingChildren } = current.children;
+      return {
+        ...current,
+        children: remainingChildren,
+      };
+    } else {
+      // Recurse into the child
+      return {
+        ...current,
+        children: {
+          ...current.children,
+          [nextKey]: deleteTreePath(
+            current.children[nextKey] ?? { children: {} },
+            remainingPath,
+          ),
+        },
+      };
+    }
+  }
+  return current;
+};
+
+export const mapTree = <T, U>(
+  current: Tree<T>,
+  fn: (value: T) => U,
+): Tree<U> => {
+  if (isTreeNode(current)) {
+    return {
+      value: current.value ? fn(current.value) : undefined,
+      children: Object.fromEntries(
+        Object.entries(current.children).map(([key, child]) => [
+          key,
+          mapTree(child, fn),
+        ]),
+      ),
+    };
+  } else {
+    return {
+      value: fn(current.value),
+    };
+  }
+};

package/src/types.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ApplicationState, TimecodeHandlerMethods } from './components/proto';
+import { Tree } from './tree';
+
+export type TimecodeHandlers = Tree<TimecodeHandlerMethods>;
+
+export type StateSensitiveComponentProps = {
+  state: ApplicationState;
+  setState: Dispatch<SetStateAction<ApplicationState>>;
+};
+
+export type HandlersUpdater = Dispatch<SetStateAction<TimecodeHandlers>>;

package/src/urls.ts

@@ -0,0 +1,49 @@
+import z from 'zod';
+import { TimecodeInstanceId } from './components/proto';
+
+export const TIMECODE_PATH_FRAGMENT = 'tc';
+
+export const WINDOW_MODE_TIMECODE = 'timecode';
+
+type FragmentValues = {
+  tc?: TimecodeInstanceId;
+};
+
+type WithUrlFragmentArgs = {
+  location?: Location | URL;
+  values: FragmentValues;
+};
+
+export const withUrlFragment = ({ location, values }: WithUrlFragmentArgs) => {
+  const url = new URL(location ? location.href : window.location.href);
+  const fragmentParams = new URLSearchParams();
+
+  for (const [key, value] of Object.entries(values)) {
+    if (value === null) {
+      fragmentParams.delete(key);
+    } else {
+      fragmentParams.set(key, JSON.stringify(value));
+    }
+  }
+  url.hash = `#${fragmentParams.toString()}`;
+  return url;
+};
+
+export const getFragmentValue = <K extends keyof FragmentValues>(
+  key: K,
+  zodParser: z.ZodType<NonNullable<FragmentValues[K]>>,
+): NonNullable<FragmentValues[K]> | null => {
+  const url = new URL(window.location.href);
+  const fragmentParams = new URLSearchParams(url.hash.slice(1));
+  const value = fragmentParams.get(key);
+  if (!value) {
+    return null;
+  }
+  try {
+    return zodParser.parse(JSON.parse(value));
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(`Error parsing URL fragment value for key ${key}:`, e);
+    return null;
+  }
+};

package/src/util.ts

@@ -0,0 +1,82 @@
+import {
+  ApplicationState,
+  InputOrGenInstance,
+  isTimecodeGroup,
+  isTimecodeInstance,
+  OutputConfig,
+  TimecodeInstance,
+  TimecodeState,
+} from './components/proto';
+
+export const isKeyedEntry =
+  <K, I, O extends I>(typeGuard: (value: I) => value is O) =>
+  (entry: [K, I]): entry is [K, O] =>
+    entry.length === 2 && typeGuard(entry[1]);
+
+export const getTimecodeInstance = (
+  state: ApplicationState,
+  id: InputOrGenInstance,
+): TimecodeInstance | null => {
+  const [type, firstId, ...remainingPath] = id;
+  if (!firstId) {
+    return null;
+  }
+  let current =
+    state[type === 'input' ? 'inputs' : 'generators'][firstId]?.timecode ??
+    null;
+  for (const idPart of remainingPath) {
+    if (!current || !isTimecodeGroup(current)) {
+      return null;
+    }
+    current = current.timecodes[idPart] ?? null;
+  }
+  if (isTimecodeInstance(current)) {
+    return current;
+  }
+  return null;
+};
+
+export const adjustTimecodeForDelay = (
+  state: TimecodeState,
+  delayMillis: number,
+): TimecodeState => {
+  if (state.state === 'playing' || state.state === 'lagging') {
+    return {
+      ...state,
+      effectiveStartTimeMillis: state.effectiveStartTimeMillis + delayMillis,
+    };
+  } else if (state.state === 'stopped') {
+    return {
+      ...state,
+      positionMillis: state.positionMillis - delayMillis,
+    };
+  }
+  return state;
+};
+
+export const augmentUpstreamTimecodeWithOutputMetadata = (
+  tc: TimecodeInstance | null,
+  config: OutputConfig,
+): TimecodeInstance => {
+  if (!tc) {
+    return {
+      name: null,
+      metadata: null,
+      state: {
+        state: 'none',
+        accuracyMillis: null,
+        smpteMode: config.definition.mode,
+        onAir: null,
+      },
+    };
+  }
+  // Adjust the timecode instance with output-specific metadata
+  return {
+    name: null,
+    metadata: tc.metadata,
+    state: {
+      ...adjustTimecodeForDelay(tc.state, config.delayMs ?? 0),
+      smpteMode: config.definition.mode,
+    },
+  };
+};

package/tailwind.config.cjs

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/components/frontend/**/*.{ts,tsx,css}'],
+  corePlugins: {
+    preflight: false,
+  },
+};

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@arcanewizards/typescript-config/react.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src", "tsup.config.ts"],
+  "exclude": ["node_modules", "dist"],
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts', 'src/components/frontend/index.tsx'],
+  format: ['cjs', 'esm'],
+  splitting: false,
+  dts: true,
+  external: [],
+  sourcemap: false,
+});