@arcanewizards/timecode-toolbox 0.1.0 → 0.1.1

package/src/inputs/artnet.tsx

@@ -1,305 +0,0 @@
-import { useDataFileData } from '@arcanejs/react-toolkit/data';
-import { FC, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { ToolboxConfigData } from '../config';
-import {
-  InputArtnetDefinition,
-  InputConfig,
-  InputState,
-  isInputArtnetDefinition,
-  TimecodeState,
-} from '../components/proto';
-import { useLogger } from '@arcanewizards/sigil';
-import {
-  ArtNet,
-  ArtNetTimecodeEvent,
-  createArtnet,
-} from '@arcanewizards/artnet';
-import { TIMECODE_FPS, TimecodeMode } from '@arcanewizards/artnet/constants';
-import { StateSensitiveComponentProps } from '../types';
-
-/**
- * How much of a difference between the calculated timecode state,
- * and previous timecode state is required to trigger an update.
- */
-const MINIMUM_DRIFT_FOR_UPDATE_MS: Record<TimecodeMode, number> = {
-  SMPTE: 1000 / TIMECODE_FPS.SMPTE / 2,
-  FILM: 1000 / TIMECODE_FPS.FILM / 2,
-  EBU: 1000 / TIMECODE_FPS.EBU / 2,
-  DF: 1000 / TIMECODE_FPS.DF / 2,
-};
-
-/**
- * How many frames need to be missed before we consider a timecode to be lagging.
- */
-const LAGGING_FRAME_COUNT = 2;
-
-/**
- * If we haven't received a timecode update for this amount of time,
- * consider the timecode to be lagging
- */
-const LAGGING_TIMEOUT_MS: Record<TimecodeMode, number> = {
-  SMPTE: (1000 / TIMECODE_FPS.SMPTE) * LAGGING_FRAME_COUNT,
-  FILM: (1000 / TIMECODE_FPS.FILM) * LAGGING_FRAME_COUNT,
-  EBU: (1000 / TIMECODE_FPS.EBU) * LAGGING_FRAME_COUNT,
-  DF: (1000 / TIMECODE_FPS.DF) * LAGGING_FRAME_COUNT,
-};
-
-/**
- * How long should we wait not receiving any packets
- * before considering a timecode to be stopped.
- */
-const TIMEOUT_MS = 500;
-
-type ArtnetInputConnectionProps = StateSensitiveComponentProps & {
-  uuid: string;
-  config: InputConfig;
-  connection: InputArtnetDefinition;
-};
-
-const ArtnetInputConnection: FC<ArtnetInputConnectionProps> = ({
-  uuid,
-  config: { name, delayMs },
-  connection: { iface, port },
-  setState,
-}) => {
-  const log = useLogger();
-
-  const [artnetInstance, setArtnetInstance] = useState<ArtNet | null>(null);
-
-  // Use ref here to allow for updates without requiring re-init of node
-  const delayRef = useRef(delayMs ?? 0);
-
-  useEffect(() => {
-    delayRef.current = delayMs ?? 0;
-  }, [delayMs]);
-
-  const setConnection = useCallback(
-    (state: InputState) =>
-      setState((current) => ({
-        ...current,
-        inputs: {
-          ...current.inputs,
-          [uuid]: state,
-        },
-      })),
-    [setState, uuid],
-  );
-
-  useEffect(() => {
-    const connectionConfig: Omit<InputState, 'status'> = {
-      timecode: {
-        name: null,
-        state: {
-          state: 'none',
-          accuracyMillis: null,
-          smpteMode: null,
-          onAir: null,
-        },
-        metadata: null,
-      },
-    };
-    let artnet: ArtNet | null = null;
-    setConnection({ ...connectionConfig, status: 'connecting' });
-    const created = createArtnet({
-      type: 'interface',
-      interface: iface,
-      mode: 'receive',
-      port,
-    });
-    created.on('error', (err) => {
-      const error = new Error('ArtNet input connection error');
-      error.cause = err instanceof Error ? err : new Error(String(err));
-      log.error(error);
-      setConnection({
-        ...connectionConfig,
-        status: 'error',
-        errors: [`${err}`],
-      });
-    });
-    created
-      .connect()
-      .then(() => {
-        artnet = created;
-        setArtnetInstance(created);
-        log.info('ArtNet Timecode output initialized');
-        setConnection({ ...connectionConfig, 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({
-          ...connectionConfig,
-          status: 'error',
-          errors: [`${err}`],
-        });
-      });
-
-    return () => {
-      if (artnet) {
-        artnet.destroy();
-        setArtnetInstance((current) => (artnet === current ? null : current));
-      }
-    };
-  }, [setConnection, uuid, iface, port, log]);
-
-  useEffect(() => {
-    type ReceivedTimecode = {
-      clockMillis: number;
-      effectiveStartTimeMillis: number;
-      mode: TimecodeMode;
-    };
-
-    let lastTimecode: ReceivedTimecode | null = null;
-    let lastUsedTimecode: ReceivedTimecode | null = lastTimecode;
-    let timecode: TimecodeState | null = null;
-    let driftApproximation = 0;
-    let laggingTimeout: NodeJS.Timeout | null = null;
-
-    let isMounted = true;
-
-    const updateTimecodeState = () => {
-      if (!lastTimecode) {
-        // No change
-        return;
-      }
-      if (!isMounted) {
-        // Update received after being unmounted, ignore
-        return;
-      }
-      const now = Date.now();
-      if (
-        lastUsedTimecode === lastTimecode &&
-        lastTimecode.clockMillis + TIMEOUT_MS < now
-      ) {
-        // Timecode has become stale
-        timecode = {
-          state: 'stopped',
-          positionMillis:
-            lastUsedTimecode.clockMillis -
-            lastUsedTimecode.effectiveStartTimeMillis,
-          accuracyMillis: driftApproximation,
-          smpteMode: lastTimecode.mode,
-          onAir: null,
-        };
-        setConnection({
-          status: 'active',
-          timecode: {
-            name: null,
-            state: timecode,
-            metadata: null,
-          },
-        });
-        lastTimecode = null;
-        return;
-      }
-      const isLagging =
-        lastTimecode.clockMillis + LAGGING_TIMEOUT_MS[lastTimecode.mode] < now;
-      timecode = {
-        state: isLagging ? 'lagging' : 'playing',
-        effectiveStartTimeMillis: lastTimecode.effectiveStartTimeMillis,
-        accuracyMillis: driftApproximation,
-        smpteMode: lastTimecode.mode,
-        speed: 1,
-        onAir: null,
-      };
-      setConnection({
-        status: 'active',
-        timecode: {
-          name: null,
-          state: timecode,
-          metadata: null,
-        },
-      });
-      lastUsedTimecode = lastTimecode;
-
-      if (!isLagging) {
-        // Set up a timeout to mark the timecode as lagging,
-        // if we don't receive an update quickly enough
-        if (laggingTimeout) {
-          clearTimeout(laggingTimeout);
-        }
-        // Set a bit later than lagging timeout to ensure that the
-        // condition is met when the timeout triggers,
-        laggingTimeout = setTimeout(
-          updateTimecodeState,
-          LAGGING_TIMEOUT_MS[lastTimecode.mode] * 1.1,
-        );
-      }
-    };
-
-    const interval = setInterval(updateTimecodeState, TIMEOUT_MS / 2);
-
-    const onTimecode = (tc: ArtNetTimecodeEvent) => {
-      const clockMillis = Date.now();
-      const effectiveStartTimeMillis =
-        clockMillis - tc.timeMillis + delayRef.current;
-      lastTimecode = {
-        clockMillis,
-        effectiveStartTimeMillis,
-        mode: tc.mode,
-      };
-      if (timecode?.state === 'playing') {
-        const drift = Math.abs(
-          effectiveStartTimeMillis - timecode.effectiveStartTimeMillis,
-        );
-        // Decay the drift approximation over time
-        // so that temporary spikes don't last
-        driftApproximation = Math.max(driftApproximation * 0.9, drift);
-        if (drift < MINIMUM_DRIFT_FOR_UPDATE_MS[tc.mode]) {
-          // Skip update, difference not significant enough
-          // just rely on the interal to update the driftApproximation
-          return;
-        }
-      }
-
-      updateTimecodeState();
-    };
-
-    artnetInstance?.addListener('timecode', onTimecode);
-
-    return () => {
-      isMounted = false;
-      clearInterval(interval);
-      artnetInstance?.removeListener('timecode', onTimecode);
-    };
-  }, [artnetInstance, log, iface, name, setConnection]);
-
-  useEffect(() => {
-    return () => {
-      // Remove the connection when it's no longer mounted / configured
-      setState((current) => {
-        const { [uuid]: _, ...rest } = current.inputs;
-        return {
-          ...current,
-          inputs: rest,
-        };
-      });
-    };
-  }, [setState, uuid]);
-
-  return null;
-};
-
-export const ArtnetInputConnections: FC<StateSensitiveComponentProps> = (
-  props,
-) => {
-  const { inputs } = useDataFileData(ToolboxConfigData);
-  return Object.entries(inputs)
-    .filter(([_, { enabled }]) => enabled)
-    .map<ReactNode>(([uuid, input]) => {
-      const connection = input.definition;
-      if (!isInputArtnetDefinition(connection)) {
-        return null;
-      }
-      return (
-        <ArtnetInputConnection
-          key={uuid}
-          uuid={uuid}
-          config={input}
-          connection={connection}
-          {...props}
-        />
-      );
-    });
-};

package/src/inputs/index.tsx

@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { ArtnetInputConnections } from './artnet';
-import { TcNetInputConnections } from './tcnet';
-import { StateSensitiveComponentProps } from '../types';
-
-export const InputConnections: FC<StateSensitiveComponentProps> = (props) => {
-  return (
-    <>
-      <ArtnetInputConnections {...props} />
-      <TcNetInputConnections {...props} />
-    </>
-  );
-};

package/src/inputs/tcnet.tsx

@@ -1,272 +0,0 @@
-import { useDataFileData } from '@arcanejs/react-toolkit/data';
-import {
-  FC,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import { ToolboxConfigData } from '../config';
-import {
-  ConnectedClient,
-  InputConfig,
-  InputState,
-  InputTcnetDefinition,
-  isInputTcnetDefinition,
-  TimecodeGroup,
-} from '../components/proto';
-import {
-  AppInformationContext,
-  useLogger,
-  useShutdownHandler,
-} from '@arcanewizards/sigil';
-
-import { createTCNetNode } from '@arcanewizards/tcnet';
-import { createTCNetTimecodeMonitor } from '@arcanewizards/tcnet/monitor';
-import {
-  TCNetConnectedNodes,
-  TCNetPortUsage,
-} from '@arcanewizards/tcnet/types';
-import { NetworkPortStatus } from '@arcanewizards/net-utils';
-import { StateSensitiveComponentProps } from '../types';
-
-type TcnetInputConnectionProps = StateSensitiveComponentProps & {
-  uuid: string;
-  config: InputConfig;
-  connection: InputTcnetDefinition;
-};
-
-const TcnetInputConnection: FC<TcnetInputConnectionProps> = ({
-  uuid,
-  config: { name, delayMs },
-  connection: { iface, nodeName },
-  setState,
-}) => {
-  const logger = useLogger();
-
-  const appInformation = useContext(AppInformationContext);
-
-  const nodeRef = useRef<ReturnType<typeof createTCNetNode> | null>(null);
-
-  /**
-   * Variable that can be set to prevent further updates,
-   * in particular when unmounting to prevent updates from this function
-   * once it is unmounted,
-   * since further updates may come from the TCNet node after it's been destroyed.
-   */
-  const isMountedRef = useRef(true);
-
-  // Use ref here to allow for updates without requiring re-init of node
-  const delayRef = useRef(delayMs ?? 0);
-
-  useEffect(() => {
-    delayRef.current = delayMs ?? 0;
-  }, [delayMs]);
-
-  const setConnection = useCallback(
-    (state: InputState) =>
-      setState((current) => ({
-        ...current,
-        inputs: {
-          ...current.inputs,
-          [uuid]: state,
-        },
-      })),
-    [setState, uuid],
-  );
-
-  /**
-   * TCNet has multiple connections / ports,
-   * this convenience function ensures that all the required ports are kept up-to-date,
-   * and have unique IDs
-   */
-  const updateState = useMemo(() => {
-    return (
-      connections: Record<TCNetPortUsage, NetworkPortStatus | null>,
-      nodes: TCNetConnectedNodes,
-      timecodeGroup: TimecodeGroup,
-    ) => {
-      if (!isMountedRef.current) {
-        return;
-      }
-      const warnings =
-        Object.values(nodes).length === 0
-          ? ['No other TCNet nodes detected on the network']
-          : [];
-      const clients: ConnectedClient[] = Object.entries(nodes)
-        .sort(([nodeIdA], [nodeIdB]) => nodeIdA.localeCompare(nodeIdB))
-        .map(([_, nodeInfo]) => ({
-          name: nodeInfo.nodeName,
-          host: nodeInfo.host,
-          port: nodeInfo.nodeListenerPort,
-          protocolVersion: nodeInfo.protocolVersion,
-          details: [`Type: ${nodeInfo.nodeType}`],
-        }));
-      const hasError = Object.values(connections).some(
-        (port) => port?.status === 'error',
-      );
-      const isConnecting = Object.values(connections).some(
-        (port) => port?.status === 'connecting',
-      );
-      setConnection({
-        status: hasError ? 'error' : isConnecting ? 'connecting' : 'active',
-        clients,
-        warnings,
-        timecode: timecodeGroup,
-      });
-    };
-  }, [setConnection]);
-
-  useEffect(() => {
-    const node = createTCNetNode({
-      logger,
-      networkInterface: iface,
-      nodeName: nodeName?.substring(0, 8) ?? 'TC-TLBOX',
-      vendorName: 'Arcane Wizards',
-      appName: appInformation.title.substring(0, 16),
-      appVersion: appInformation.version.substring(0, 16),
-    });
-    nodeRef.current = node;
-
-    let lastPortInformation = node.getPortInformation();
-    let lastNodes: TCNetConnectedNodes = {};
-    let timecodeGroup: TimecodeGroup = {
-      name: null,
-      color: null,
-      timecodes: {},
-    };
-
-    const updateConnectionsState = () => {
-      updateState(lastPortInformation, lastNodes, timecodeGroup);
-    };
-
-    updateConnectionsState();
-
-    node.on('port-state-changed', (info) => {
-      lastPortInformation = info;
-      updateConnectionsState();
-    });
-
-    node.on('nodes-changed', (nodes) => {
-      lastNodes = nodes;
-      updateConnectionsState();
-    });
-
-    node.on('ready', () => {
-      logger.info(`TCNet node ${uuid} is ready`);
-    });
-
-    const monitor = createTCNetTimecodeMonitor(node, logger);
-
-    monitor.addListener(
-      'timecode-changed',
-      ({ layerId, playState, ...timecodeState }) => {
-        timecodeGroup = {
-          ...timecodeGroup,
-          timecodes: {
-            ...timecodeGroup.timecodes,
-            [layerId]: {
-              name: timecodeState.layerName,
-              metadata: {
-                totalTime: timecodeState.totalTime,
-                title: timecodeState?.info?.title ?? null,
-                artist: timecodeState?.info?.artist ?? null,
-              },
-              state:
-                playState.state === 'playing'
-                  ? {
-                      state: 'playing',
-                      effectiveStartTimeMillis:
-                        playState.effectiveStartTime + delayRef.current,
-                      speed: playState.speed,
-                      onAir: playState.onAir,
-                      accuracyMillis: null,
-                      smpteMode: null,
-                    }
-                  : {
-                      state: 'stopped',
-                      positionMillis:
-                        playState.currentTimeMillis - delayRef.current,
-                      onAir: playState.onAir,
-                      accuracyMillis: null,
-                      smpteMode: null,
-                    },
-            },
-          },
-        };
-        updateConnectionsState();
-      },
-    );
-
-    monitor.addListener('layer-removed', ({ layerId }) => {
-      logger.info(`Layer removed from node ${uuid} layer ${layerId}`);
-      timecodeGroup = {
-        ...timecodeGroup,
-        timecodes: Object.fromEntries(
-          Object.entries(timecodeGroup.timecodes).filter(
-            ([layerIdKey]) => layerIdKey !== layerId,
-          ),
-        ),
-      };
-      updateConnectionsState();
-    });
-
-    node.connect();
-
-    return () => {
-      logger.info(`Destroying TCNet connection ${uuid}...`);
-      node.destroy();
-      if (nodeRef.current === node) {
-        nodeRef.current = null;
-      }
-    };
-  }, [uuid, iface, nodeName, logger, appInformation, updateState]);
-
-  useShutdownHandler(async () => {
-    if (nodeRef.current) {
-      logger.info(`Shutting down TCNet node ${name ?? uuid}...`);
-      await nodeRef.current.destroy();
-    }
-  });
-
-  useEffect(() => {
-    return () => {
-      // Prevent the connection state being re-added with delayed updates from node
-      isMountedRef.current = false;
-      // Remove the connection when it's no longer mounted / configured
-      setState((current) => {
-        const { [uuid]: _, ...rest } = current.inputs;
-        return {
-          ...current,
-          inputs: rest,
-        };
-      });
-    };
-  }, [setState, uuid]);
-  return null;
-};
-
-export const TcNetInputConnections: FC<StateSensitiveComponentProps> = (
-  props,
-) => {
-  const { inputs } = useDataFileData(ToolboxConfigData);
-  return Object.entries(inputs)
-    .filter(([_, { enabled }]) => enabled)
-    .map<ReactNode>(([uuid, input]) => {
-      const connection = input.definition;
-      if (!isInputTcnetDefinition(connection)) {
-        return null;
-      }
-      return (
-        <TcnetInputConnection
-          key={uuid}
-          uuid={uuid}
-          config={input}
-          connection={connection}
-          {...props}
-        />
-      );
-    });
-};