@arcanewizards/timecode-toolbox 0.0.3

package/src/components/frontend/toolbox/core/timecode-display.tsx

@@ -0,0 +1,592 @@
+import {
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  isTimecodeGroup,
+  isTimecodeInstance,
+  TimecodeGroup,
+  TimecodeInstance,
+  TimecodeState,
+  TimecodeTotalTime,
+  TimecodeInstanceId,
+  isOutputInstanceId,
+  isInputInstanceId,
+  isGeneratorInstanceId,
+} from '../../../proto';
+import { displayMillis } from '../util';
+import { StageContext } from '@arcanejs/toolkit-frontend';
+import {
+  cnd,
+  cssSigilColorUsageVariables,
+  SigilColor,
+  sigilColorUsage,
+} from '@arcanewizards/sigil/frontend/styling';
+import { cn } from '@arcanejs/toolkit-frontend/util';
+import {
+  ControlButton,
+  ControlButtonGroup,
+} from '@arcanewizards/sigil/frontend/controls';
+import { TooltipWrapper } from '@arcanewizards/sigil/frontend/tooltip';
+import { STRINGS } from '../../constants';
+import { AssignToOutputCallback } from '../types';
+import { Icon } from '@arcanejs/toolkit-frontend/components/core';
+import { SizeAwareDiv } from './size-aware-div';
+import {
+  ApplicationStateContext,
+  ConfigContext,
+  useApplicationHandlers,
+} from '../context';
+import { getTreeValue } from '../../../../tree';
+import { useBrowserContext } from '@arcanewizards/sigil/frontend';
+import { WINDOW_MODE_TIMECODE, withUrlFragment } from '../../../../urls';
+import {
+  augmentUpstreamTimecodeWithOutputMetadata,
+  getTimecodeInstance,
+} from '../../../../util';
+
+type ActiveTimecodeTextProps = {
+  effectiveStartTimeMillis: number;
+  speed: number;
+};
+
+const ActiveTimecodeText: FC<ActiveTimecodeTextProps> = ({
+  effectiveStartTimeMillis,
+  speed,
+}) => {
+  const [millis, setMillis] = useState(0);
+
+  const { timeDifferenceMs } = useContext(StageContext);
+
+  useEffect(() => {
+    let animationFrame: number | null = null;
+
+    const updateMillis = () => {
+      const newMillis =
+        (Date.now() - (timeDifferenceMs ?? 0) - effectiveStartTimeMillis) *
+        speed;
+      setMillis(newMillis);
+      animationFrame = requestAnimationFrame(updateMillis);
+    };
+    updateMillis();
+    return () => {
+      if (animationFrame !== null) {
+        cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [effectiveStartTimeMillis, speed, timeDifferenceMs]);
+
+  return displayMillis(millis);
+};
+
+type TimelineProps = {
+  state: TimecodeState;
+  totalTime: TimecodeTotalTime;
+};
+
+const Timeline: FC<TimelineProps> = ({ state, totalTime }) => {
+  const [millis, setMillis] = useState(0);
+
+  const { timeDifferenceMs } = useContext(StageContext);
+
+  useEffect(() => {
+    if (state.state === 'none') {
+      setMillis(0);
+      return;
+    }
+
+    if (state.state === 'stopped') {
+      setMillis(state.positionMillis);
+      return;
+    }
+
+    let animationFrame: number | null = null;
+
+    const updateMillis = () => {
+      const newMillis =
+        (Date.now() -
+          (timeDifferenceMs ?? 0) -
+          state.effectiveStartTimeMillis) *
+        state.speed;
+      setMillis(newMillis);
+      animationFrame = requestAnimationFrame(updateMillis);
+    };
+    updateMillis();
+    return () => {
+      if (animationFrame !== null) {
+        cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [state, timeDifferenceMs]);
+
+  return (
+    <div className="w-full border border-timecode-usage-foreground p-px">
+      <div className="relative h-1 w-full overflow-hidden">
+        <div
+          className="absolute inset-y-0 left-0 bg-timecode-usage-foreground"
+          style={{
+            width: `${Math.min((millis / totalTime.timeMillis) * 100, 100)}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+type UniversalConfig = {
+  delayMs: number | null;
+};
+
+type TimecodeDisplayProps = {
+  id: TimecodeInstanceId;
+  timecode: TimecodeInstance;
+  config: UniversalConfig;
+  headerComponents?: React.ReactNode;
+};
+
+const TimecodeDisplay: FC<TimecodeDisplayProps> = ({
+  id,
+  timecode: { state, metadata },
+  config,
+  headerComponents,
+}) => {
+  const { handlers, callHandler } = useApplicationHandlers();
+
+  const hooks = id && getTreeValue(handlers, id);
+
+  const play = useCallback(() => {
+    if (id) {
+      callHandler({ handler: 'play', path: id, args: [] });
+    }
+  }, [callHandler, id]);
+
+  const pause = useCallback(() => {
+    if (id) {
+      callHandler({ handler: 'pause', path: id, args: [] });
+    }
+  }, [callHandler, id]);
+
+  const back5seconds = useCallback(() => {
+    if (id) {
+      callHandler({ handler: 'seekRelative', path: id, args: [-5000] });
+    }
+  }, [callHandler, id]);
+
+  const forward5seconds = useCallback(() => {
+    if (id) {
+      callHandler({ handler: 'seekRelative', path: id, args: [5000] });
+    }
+  }, [callHandler, id]);
+
+  const beginning = useCallback(() => {
+    if (id) {
+      callHandler({ handler: 'beginning', path: id, args: [] });
+    }
+  }, [callHandler, id]);
+
+  const toggle = useCallback(() => {
+    if (hooks?.play && hooks?.pause) {
+      if (state.state === 'none' || state.state === 'stopped') {
+        play();
+      } else {
+        pause();
+      }
+    }
+  }, [hooks, play, pause, state.state]);
+
+  return (
+    <div className="flex grow flex-col gap-px">
+      <div
+        className={cn(
+          'flex grow flex-col p-0.5',
+          cnd(
+            state?.state === 'lagging',
+            'bg-sigil-usage-red-background text-sigil-usage-red-text',
+            'bg-sigil-bg-light text-timecode-usage-foreground',
+          ),
+        )}
+      >
+        {headerComponents && (
+          <div className="flex flex-wrap gap-0.25">{headerComponents}</div>
+        )}
+        <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
+              `,
+            ),
+          )}
+          onClick={toggle}
+        >
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className={cn('font-mono text-timecode-adaptive')}>
+              {state.state === 'none' ? (
+                '--:--:--:---'
+              ) : state.state === 'stopped' ? (
+                displayMillis(state.positionMillis)
+              ) : (
+                <ActiveTimecodeText
+                  effectiveStartTimeMillis={state.effectiveStartTimeMillis}
+                  speed={state.speed}
+                />
+              )}
+            </span>
+          </div>
+        </SizeAwareDiv>
+        {hooks?.pause || hooks?.play ? (
+          <div className="flex justify-center gap-px">
+            {hooks.beginning && (
+              <ControlButton
+                onClick={beginning}
+                variant="large"
+                icon="skip_previous"
+                disabled={!hooks?.beginning}
+                title={STRINGS.controls.beginning}
+                className="text-timecode-usage-foreground!"
+              />
+            )}
+            {hooks.seekRelative && (
+              <ControlButton
+                onClick={back5seconds}
+                variant="large"
+                icon="replay_5"
+                disabled={!hooks?.seekRelative}
+                title={STRINGS.controls.back5seconds}
+                className="text-timecode-usage-foreground!"
+              />
+            )}
+            {state.state === 'none' || state.state === 'stopped' ? (
+              <ControlButton
+                onClick={play}
+                variant="large"
+                icon="play_arrow"
+                disabled={!hooks?.play}
+                title={STRINGS.controls.play}
+                className="text-timecode-usage-foreground!"
+              />
+            ) : (
+              <ControlButton
+                onClick={pause}
+                variant="large"
+                icon="pause"
+                disabled={!hooks?.pause}
+                title={STRINGS.controls.pause}
+                className="text-timecode-usage-foreground!"
+              />
+            )}
+            {hooks.seekRelative && (
+              <ControlButton
+                onClick={forward5seconds}
+                variant="large"
+                icon="forward_5"
+                disabled={!hooks?.seekRelative}
+                title={STRINGS.controls.forward5seconds}
+                className="text-timecode-usage-foreground!"
+              />
+            )}
+          </div>
+        ) : null}
+        {metadata?.totalTime && (
+          <Timeline state={state} totalTime={metadata.totalTime} />
+        )}
+      </div>
+      {(state.smpteMode !== null ||
+        state.accuracyMillis !== null ||
+        config.delayMs !== null) && (
+        <div className="flex gap-px">
+          {config.delayMs !== null && (
+            <div className="grow basis-0 truncate bg-sigil-bg-light p-0.5">
+              {STRINGS.delay(config.delayMs)}
+            </div>
+          )}
+          {state.smpteMode !== null && (
+            <div className="grow basis-0 truncate bg-sigil-bg-light p-0.5">
+              {STRINGS.smtpeModes[state.smpteMode]}
+            </div>
+          )}
+          {state.accuracyMillis !== null && (
+            <div className="grow basis-0 truncate bg-sigil-bg-light p-0.5">
+              {STRINGS.accuracy(state.accuracyMillis)}
+            </div>
+          )}
+        </div>
+      )}
+      {metadata?.artist || metadata?.title ? (
+        <TooltipWrapper
+          tooltip={
+            <>
+              {metadata.title && (
+                <div>
+                  <span className="font-bold">Title:</span> {metadata.title}
+                </div>
+              )}
+              {metadata.artist && (
+                <div>
+                  <span className="font-bold">Artist:</span> {metadata.artist}
+                </div>
+              )}
+            </>
+          }
+        >
+          <div className="flex gap-px">
+            {metadata.title && (
+              <div className="grow truncate bg-sigil-bg-light p-0.5 font-bold">
+                {metadata.title}
+              </div>
+            )}
+            {metadata.artist && (
+              <div className="grow truncate bg-sigil-bg-light p-0.5">
+                {metadata.artist}
+              </div>
+            )}
+          </div>
+        </TooltipWrapper>
+      ) : null}
+    </div>
+  );
+};
+
+type TimecodeTreeDisplayProps = {
+  config: UniversalConfig;
+  /**
+   * Outputs will not have this set, inputs and generators will.
+   */
+  id: TimecodeInstanceId;
+  type: string;
+  name: string[];
+  color: SigilColor | undefined;
+  timecode: TimecodeGroup | TimecodeInstance | null;
+  namePlaceholder: string;
+  buttons: ReactNode;
+  /**
+   * If set, calling this will assign the instance to the given output on
+   */
+  assignToOutput: AssignToOutputCallback;
+};
+
+const EMPTY_TIMECODE: TimecodeInstance = {
+  name: null,
+  state: {
+    state: 'none',
+    accuracyMillis: null,
+    smpteMode: null,
+    onAir: null,
+  },
+  metadata: null,
+};
+
+const extendId = <T extends TimecodeInstanceId>(id: T, key: string): T => {
+  return [id[0], ...id.slice(1), key] as unknown as T;
+};
+
+export const TimecodeTreeDisplay: FC<TimecodeTreeDisplayProps> = ({
+  config,
+  id,
+  type,
+  name,
+  color,
+  timecode,
+  namePlaceholder,
+  buttons,
+  assignToOutput,
+}) => {
+  const { openNewWidow } = useBrowserContext();
+
+  const openInNewWindow = useCallback(() => {
+    if (id) {
+      openNewWidow(withUrlFragment({ values: { tc: id } }).href, {
+        canUseExisting: false,
+        mode: WINDOW_MODE_TIMECODE,
+      });
+    }
+  }, [id, openNewWidow]);
+
+  name = timecode?.name ? [...name, timecode.name] : name;
+  if (isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
+    return Object.entries(timecode.timecodes).map(([key, child]) => (
+      <TimecodeTreeDisplay
+        config={config}
+        id={extendId(id, key)}
+        key={key}
+        type={type}
+        name={name}
+        color={timecode.color ?? color}
+        timecode={child}
+        namePlaceholder={namePlaceholder}
+        buttons={buttons}
+        assignToOutput={assignToOutput}
+      />
+    ));
+  }
+
+  return (
+    <div
+      className="relative flex grow flex-col text-timecode-usage-foreground"
+      style={
+        color &&
+        cssSigilColorUsageVariables('timecode-usage', sigilColorUsage(color))
+      }
+    >
+      <TimecodeDisplay
+        id={id}
+        timecode={isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE}
+        config={config}
+        headerComponents={
+          <>
+            <div className="flex grow items-start gap-0.25">
+              <div
+                className="
+                  m-0.25 rounded-md border border-sigil-bg-light
+                  bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control
+                  text-timecode-usage-text
+                "
+              >
+                {type}
+              </div>
+              <div
+                className={cn(
+                  'grow basis-0 truncate p-0.5',
+                  cnd(name.length, 'font-bold', 'italic opacity-50'),
+                )}
+              >
+                {name.length ? name.join(' / ') : namePlaceholder}
+              </div>
+            </div>
+            <ControlButtonGroup className="rounded-md bg-sigil-bg-light">
+              <ControlButton
+                variant="toolbar"
+                icon="open_in_new"
+                title={STRINGS.openInNewWindow}
+                onClick={openInNewWindow}
+              />
+              {buttons}
+            </ControlButtonGroup>
+          </>
+        }
+      />
+      {assignToOutput && id && !isOutputInstanceId(id) && (
+        <SizeAwareDiv
+          className="
+            absolute inset-0 flex cursor-pointer items-center justify-center
+            bg-timecode-backdrop text-timecode-usage-text
+            hover:bg-timecode-backdrop-hover
+          "
+          onClick={() => assignToOutput(id)}
+        >
+          <Icon icon="link" className="text-block-icon" />
+        </SizeAwareDiv>
+      )}
+    </div>
+  );
+};
+
+type FullscreenTimecodeConfig = {
+  config: UniversalConfig;
+  type: string;
+  name: string[];
+  color: SigilColor | undefined;
+  namePlaceholder: string;
+};
+
+export const FullscreenTimecodeDisplay: FC<{ id: TimecodeInstanceId }> = ({
+  id,
+}) => {
+  const { config } = useContext(ConfigContext);
+  const applicationState = useContext(ApplicationStateContext);
+
+  const timecode: TimecodeInstance | null = useMemo(() => {
+    if (isInputInstanceId(id) || isGeneratorInstanceId(id)) {
+      return getTimecodeInstance(applicationState, id);
+    } else {
+      const c = config.outputs[id[1]];
+      if (!c) {
+        return null;
+      }
+      return augmentUpstreamTimecodeWithOutputMetadata(
+        c.link ? getTimecodeInstance(applicationState, c.link) : null,
+        c,
+      );
+    }
+  }, [applicationState, id, config.outputs]);
+
+  const instanceConfig: FullscreenTimecodeConfig | null = useMemo(() => {
+    if (isInputInstanceId(id)) {
+      const c = config.inputs[id[1]];
+      if (!c) {
+        return null;
+      }
+      return {
+        config: { delayMs: c.delayMs ?? null },
+        type: STRINGS.protocols[c.definition.type].short,
+        name: c.name ? [c.name] : [],
+        color: c.color,
+        namePlaceholder: `Unnamed Input`,
+      };
+    } else if (isGeneratorInstanceId(id)) {
+      const c = config.generators[id[1]];
+      if (!c) {
+        return null;
+      }
+      return {
+        config: { delayMs: c.delayMs ?? null },
+        type: STRINGS.generators.type[c.definition.type],
+        name: c.name ? [c.name] : [],
+        color: c.color,
+        namePlaceholder: `Unnamed Generator`,
+      };
+    } else {
+      const c = config.outputs[id[1]];
+      if (!c) {
+        return null;
+      }
+      return {
+        config: { delayMs: c.delayMs ?? null },
+        type: STRINGS.protocols[c.definition.type].short,
+        name: c.name ? [c.name] : [],
+        color: c.color,
+        namePlaceholder: `Unnamed Output`,
+      };
+    }
+  }, [id, config]);
+
+  if (!instanceConfig) {
+    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="question_mark" className="text-block-icon" />
+        <div className="text-center">{STRINGS.errors.unknownTimecodeID}</div>
+      </SizeAwareDiv>
+    );
+  }
+
+  return (
+    <div
+      className="
+        flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border
+        scrollbar-sigil
+      "
+    >
+      <TimecodeTreeDisplay
+        id={id}
+        timecode={timecode}
+        assignToOutput={null}
+        buttons={null}
+        {...instanceConfig}
+      />
+    </div>
+  );
+};