element-call-custom/src/state/MuteStates.ts

/*
Copyright 2023-2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

import { type IWidgetApiRequest } from "matrix-widget-api";
import { logger } from "matrix-js-sdk/lib/logger";
import {
  combineLatest,
  distinctUntilChanged,
  fromEvent,
  map,
  merge,
  type Observable,
  of,
  Subject,
  switchMap,
  withLatestFrom,
} from "rxjs";

import { type MediaDevices, type MediaDevice } from "../state/MediaDevices";
import { ElementWidgetActions, widget } from "../widget";
import { Config } from "../config/Config";
import { getUrlParams } from "../UrlParams";
import { type ObservableScope } from "./ObservableScope";
import { accumulate } from "../utils/observable";

interface MuteStateData {
  enabled$: Observable<boolean>;
  set: ((enabled: boolean) => void) | null;
  toggle: (() => void) | null;
}

class MuteState {
  private readonly enabledByDefault$ =
    this.enabledByConfig && !getUrlParams().skipLobby
      ? this.isJoined$.pipe(map((isJoined) => !isJoined))
      : of(false);

  private readonly data$: Observable<MuteStateData> =
    this.device.available$.pipe(
      map((available) => available.size > 0),
      distinctUntilChanged(),
      withLatestFrom(
        this.enabledByDefault$,
        (devicesConnected, enabledByDefault) => {
          if (!devicesConnected)
            return { enabled$: of(false), set: null, toggle: null };

          const set$ = new Subject<boolean>();
          const toggle$ = new Subject<void>();
          return {
            set: (enabled: boolean) => set$.next(enabled),
            toggle: () => toggle$.next(),
            // Assume the default value only once devices are actually connected
            enabled$: merge(
              set$,
              toggle$.pipe(map(() => "toggle" as const)),
            ).pipe(
              accumulate(enabledByDefault, (prev, update) =>
                update === "toggle" ? !prev : update,
              ),
            ),
          };
        },
      ),
      this.scope.state(),
    );

  public readonly enabled$: Observable<boolean> = this.data$.pipe(
    switchMap(({ enabled$ }) => enabled$),
  );

  public readonly setEnabled$: Observable<((enabled: boolean) => void) | null> =
    this.data$.pipe(map(({ set }) => set));

  public readonly toggle$: Observable<(() => void) | null> = this.data$.pipe(
    map(({ toggle }) => toggle),
  );

  public constructor(
    private readonly scope: ObservableScope,
    private readonly device: MediaDevice,
    private readonly isJoined$: Observable<boolean>,
    private readonly enabledByConfig: boolean,
  ) {}
}

export class MuteStates {
  public readonly audio = new MuteState(
    this.scope,
    this.mediaDevices.audioInput,
    this.isJoined$,
    Config.get().media_devices.enable_video,
  );
  public readonly video = new MuteState(
    this.scope,
    this.mediaDevices.videoInput,
    this.isJoined$,
    Config.get().media_devices.enable_video,
  );

  public constructor(
    private readonly scope: ObservableScope,
    private readonly mediaDevices: MediaDevices,
    private readonly isJoined$: Observable<boolean>,
  ) {
    if (widget !== null) {
      // Sync our mute states with the hosting client
      const widgetApiState$ = combineLatest(
        [this.audio.enabled$, this.video.enabled$],
        (audio, video) => ({ audio_enabled: audio, video_enabled: video }),
      );
      widgetApiState$.pipe(this.scope.bind()).subscribe((state) => {
        widget!.api.transport
          .send(ElementWidgetActions.DeviceMute, state)
          .catch((e) =>
            logger.warn("Could not send DeviceMute action to widget", e),
          );
      });

      // Also sync the hosting client's mute states back with ours
      const muteActions$ = fromEvent(
        widget.lazyActions,
        ElementWidgetActions.DeviceMute,
      ) as Observable<CustomEvent<IWidgetApiRequest>>;
      muteActions$
        .pipe(
          withLatestFrom(
            widgetApiState$,
            this.audio.setEnabled$,
            this.video.setEnabled$,
          ),
          this.scope.bind(),
        )
        .subscribe(([ev, state, setAudioEnabled, setVideoEnabled]) => {
          // First copy the current state into our new state
          const newState = { ...state };
          // Update new state if there are any requested changes from the widget
          // action in `ev.detail.data`.
          if (
            ev.detail.data.audio_enabled != null &&
            typeof ev.detail.data.audio_enabled === "boolean" &&
            setAudioEnabled !== null
          ) {
            newState.audio_enabled = ev.detail.data.audio_enabled;
            setAudioEnabled(newState.audio_enabled);
          }
          if (
            ev.detail.data.video_enabled != null &&
            typeof ev.detail.data.video_enabled === "boolean" &&
            setVideoEnabled !== null
          ) {
            newState.video_enabled = ev.detail.data.video_enabled;
            setVideoEnabled(newState.video_enabled);
          }
          widget!.api.transport.reply(ev.detail, newState);
        });
    }
  }
}