@arcanewizards/timecode-toolbox 0.0.3 → 0.1.1

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

@@ -1,592 +0,0 @@
-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>
-  );
-};