cinny/src/app/plugins/call/hooks.ts

import {
  ClientWidgetApi,
  IWidgetApiAcknowledgeResponseData,
  IWidgetApiRequestData,
} from 'matrix-widget-api';
import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
import { CallControl, CallControlEvent } from './CallControl';
import { CallControlState } from './CallControlState';
import type { CallEmbed } from './CallEmbed';

export const useClientWidgetApiEvent = <T>(
  api: ClientWidgetApi | undefined,
  type: string,
  callback: (event: CustomEvent<T>) => void,
) => {
  useEffect(() => {
    api?.on(`action:${type}`, callback);
    return () => {
      api?.off(`action:${type}`, callback);
    };
  }, [api, type, callback]);
};

export const useSendClientWidgetApiAction = (api: ClientWidgetApi) => {
  const sendWidgetAction = useCallback(
    async <T extends IWidgetApiRequestData = IWidgetApiRequestData>(
      action: string,
      data: T,
    ): Promise<IWidgetApiAcknowledgeResponseData> => api.transport.send(action, data),
    [api],
  );

  return sendWidgetAction;
};

const DEFAULT_CONTROL_STATE = new CallControlState(false, false, false);

export const useCallControlState = (control: CallControl | undefined): CallControlState => {
  // Remember which control the stored state came from. When a call starts the
  // control changes, and the effect below only catches up after a render; until
  // then the old (default: all off) state would be returned for the NEW call —
  // one render of "muted + deafened" that the thumbbar, SMTC and tray (#4)
  // pushed to the OS as a flicker. Read the new control directly instead.
  const [entry, setEntry] = useState(() => ({
    control,
    state: control?.getState() ?? DEFAULT_CONTROL_STATE,
  }));

  useEffect(() => {
    if (!control) {
      setEntry({ control, state: DEFAULT_CONTROL_STATE });
      return;
    }
    setEntry({ control, state: control.getState() });
    const handleUpdate = () => setEntry({ control, state: control.getState() });
    control.on(CallControlEvent.StateUpdate, handleUpdate);
    return () => {
      control.off(CallControlEvent.StateUpdate, handleUpdate);
    };
  }, [control]);

  if (entry.control !== control) return control?.getState() ?? DEFAULT_CONTROL_STATE;
  return entry.state;
};

const noSubscribe = () => () => undefined;

/** [Gitea #146] The local mic level (0–3 bars) reported by the call, or 0. */
export const useCallMicLevel = (callEmbed: CallEmbed | undefined): number => {
  const subscribe = useCallback(
    (cb: () => void) => (callEmbed ? callEmbed.onMicLevel(cb) : noSubscribe()),
    [callEmbed],
  );
  return useSyncExternalStore(subscribe, () => callEmbed?.getMicLevel() ?? 0);
};