@werxt/livekit-components-react 2.9.20

package/src/prefabs/PreJoin.tsx

@@ -0,0 +1,439 @@
+import type {
+  CreateLocalTracksOptions,
+  LocalAudioTrack,
+  LocalVideoTrack,
+  TrackProcessor,
+} from 'livekit-client';
+import {
+  createLocalAudioTrack,
+  createLocalTracks,
+  createLocalVideoTrack,
+  facingModeFromLocalTrack,
+  Track,
+  VideoPresets,
+  Mutex,
+} from 'livekit-client';
+import * as React from 'react';
+import { MediaDeviceMenu } from './MediaDeviceMenu';
+import { TrackToggle } from '../components/controls/TrackToggle';
+import type { LocalUserChoices } from '@livekit/components-core';
+import { log } from '@livekit/components-core';
+import { ParticipantPlaceholder } from '../assets/images';
+import { useMediaDevices, usePersistentUserChoices } from '../hooks';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
+import { roomOptionsStringifyReplacer } from '../utils';
+
+/**
+ * Props for the PreJoin component.
+ * @public
+ */
+export interface PreJoinProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onError'> {
+  /** This function is called with the `LocalUserChoices` if validation is passed. */
+  onSubmit?: (values: LocalUserChoices) => void;
+  /**
+   * Provide your custom validation function. Only if validation is successful the user choices are past to the onSubmit callback.
+   */
+  onValidate?: (values: LocalUserChoices) => boolean;
+  onError?: (error: Error) => void;
+  /** Prefill the input form with initial values. */
+  defaults?: Partial<LocalUserChoices>;
+  /** Display a debug window for your convenience. */
+  debug?: boolean;
+  joinLabel?: string;
+  micLabel?: string;
+  camLabel?: string;
+  userLabel?: string;
+  /**
+   * If true, user choices are persisted across sessions.
+   * @defaultValue true
+   * @alpha
+   */
+  persistUserChoices?: boolean;
+  videoProcessor?: TrackProcessor<Track.Kind.Video>;
+}
+
+/** @public */
+export function usePreviewTracks(
+  options: CreateLocalTracksOptions,
+  onError?: (err: Error) => void,
+) {
+  const [tracks, setTracks] = React.useState<Array<LocalAudioTrack | LocalVideoTrack>>();
+
+  const trackLock = React.useMemo(() => new Mutex(), []);
+
+  React.useEffect(() => {
+    let needsCleanup = false;
+    let localTracks: Array<LocalAudioTrack | LocalVideoTrack> = [];
+    trackLock.lock().then(async (unlock) => {
+      try {
+        if (options.audio || options.video) {
+          localTracks = (await createLocalTracks(options)) as Array<
+            LocalAudioTrack | LocalVideoTrack
+          >;
+
+          if (needsCleanup) {
+            localTracks.forEach((tr) => tr.stop());
+          } else {
+            setTracks(localTracks);
+          }
+        }
+      } catch (e: unknown) {
+        if (onError && e instanceof Error) {
+          onError(e);
+        } else {
+          log.error(e);
+        }
+      } finally {
+        unlock();
+      }
+    });
+
+    return () => {
+      needsCleanup = true;
+      localTracks.forEach((track) => {
+        track.stop();
+      });
+    };
+  }, [JSON.stringify(options, roomOptionsStringifyReplacer), onError, trackLock]);
+
+  return tracks;
+}
+
+/**
+ * @public
+ * @deprecated use `usePreviewTracks` instead
+ */
+export function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(
+  enabled: boolean,
+  deviceId: string,
+  kind: 'videoinput' | 'audioinput',
+) {
+  const [deviceError, setDeviceError] = React.useState<Error | null>(null);
+  const [isCreatingTrack, setIsCreatingTrack] = React.useState<boolean>(false);
+
+  const devices = useMediaDevices({ kind });
+  const [selectedDevice, setSelectedDevice] = React.useState<MediaDeviceInfo | undefined>(
+    undefined,
+  );
+
+  const [localTrack, setLocalTrack] = React.useState<T>();
+  const [localDeviceId, setLocalDeviceId] = React.useState<string>(deviceId);
+
+  React.useEffect(() => {
+    setLocalDeviceId(deviceId);
+  }, [deviceId]);
+
+  const createTrack = async (deviceId: string, kind: 'videoinput' | 'audioinput') => {
+    try {
+      const track =
+        kind === 'videoinput'
+          ? await createLocalVideoTrack({
+              deviceId,
+              resolution: VideoPresets.h720.resolution,
+            })
+          : await createLocalAudioTrack({ deviceId });
+
+      const newDeviceId = await track.getDeviceId(false);
+      if (newDeviceId && deviceId !== newDeviceId) {
+        prevDeviceId.current = newDeviceId;
+        setLocalDeviceId(newDeviceId);
+      }
+      setLocalTrack(track as T);
+    } catch (e) {
+      if (e instanceof Error) {
+        setDeviceError(e);
+      }
+    }
+  };
+
+  const switchDevice = async (track: LocalVideoTrack | LocalAudioTrack, id: string) => {
+    await track.setDeviceId(id);
+    prevDeviceId.current = id;
+  };
+
+  const prevDeviceId = React.useRef(localDeviceId);
+
+  React.useEffect(() => {
+    if (enabled && !localTrack && !deviceError && !isCreatingTrack) {
+      log.debug('creating track', kind);
+      setIsCreatingTrack(true);
+      createTrack(localDeviceId, kind).finally(() => {
+        setIsCreatingTrack(false);
+      });
+    }
+  }, [enabled, localTrack, deviceError, isCreatingTrack]);
+
+  // switch camera device
+  React.useEffect(() => {
+    if (!localTrack) {
+      return;
+    }
+    if (!enabled) {
+      log.debug(`muting ${kind} track`);
+      localTrack.mute().then(() => log.debug(localTrack.mediaStreamTrack));
+    } else if (selectedDevice?.deviceId && prevDeviceId.current !== selectedDevice?.deviceId) {
+      log.debug(`switching ${kind} device from`, prevDeviceId.current, selectedDevice.deviceId);
+      switchDevice(localTrack, selectedDevice.deviceId);
+    } else {
+      log.debug(`unmuting local ${kind} track`);
+      localTrack.unmute();
+    }
+  }, [localTrack, selectedDevice, enabled, kind]);
+
+  React.useEffect(() => {
+    return () => {
+      if (localTrack) {
+        log.debug(`stopping local ${kind} track`);
+        localTrack.stop();
+        localTrack.mute();
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    setSelectedDevice(devices?.find((dev) => dev.deviceId === localDeviceId));
+  }, [localDeviceId, devices]);
+
+  return {
+    selectedDevice,
+    localTrack,
+    deviceError,
+  };
+}
+
+/**
+ * The `PreJoin` prefab component is normally presented to the user before he enters a room.
+ * This component allows the user to check and select the preferred media device (camera und microphone).
+ * On submit the user decisions are returned, which can then be passed on to the `LiveKitRoom` so that the user enters the room with the correct media devices.
+ *
+ * @remarks
+ * This component is independent of the `LiveKitRoom` component and should not be nested within it.
+ * Because it only accesses the local media tracks this component is self-contained and works without connection to the LiveKit server.
+ *
+ * @example
+ * ```tsx
+ * <PreJoin />
+ * ```
+ * @public
+ */
+export function PreJoin({
+  defaults = {},
+  onValidate,
+  onSubmit,
+  onError,
+  debug,
+  joinLabel = 'Join Room',
+  micLabel = 'Microphone',
+  camLabel = 'Camera',
+  userLabel = 'Username',
+  persistUserChoices = true,
+  videoProcessor,
+  ...htmlProps
+}: PreJoinProps) {
+  const {
+    userChoices: initialUserChoices,
+    saveAudioInputDeviceId,
+    saveAudioInputEnabled,
+    saveVideoInputDeviceId,
+    saveVideoInputEnabled,
+    saveUsername,
+  } = usePersistentUserChoices({
+    defaults,
+    preventSave: !persistUserChoices,
+    preventLoad: !persistUserChoices,
+  });
+
+  const [userChoices, setUserChoices] = React.useState(initialUserChoices);
+
+  // Initialize device settings
+  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(userChoices.audioEnabled);
+  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(userChoices.videoEnabled);
+  const [audioDeviceId, setAudioDeviceId] = React.useState<string>(userChoices.audioDeviceId);
+  const [videoDeviceId, setVideoDeviceId] = React.useState<string>(userChoices.videoDeviceId);
+  const [username, setUsername] = React.useState(userChoices.username);
+
+  // Save user choices to persistent storage.
+  React.useEffect(() => {
+    saveAudioInputEnabled(audioEnabled);
+  }, [audioEnabled, saveAudioInputEnabled]);
+  React.useEffect(() => {
+    saveVideoInputEnabled(videoEnabled);
+  }, [videoEnabled, saveVideoInputEnabled]);
+  React.useEffect(() => {
+    saveAudioInputDeviceId(audioDeviceId);
+  }, [audioDeviceId, saveAudioInputDeviceId]);
+  React.useEffect(() => {
+    saveVideoInputDeviceId(videoDeviceId);
+  }, [videoDeviceId, saveVideoInputDeviceId]);
+  React.useEffect(() => {
+    saveUsername(username);
+  }, [username, saveUsername]);
+
+  const tracks = usePreviewTracks(
+    {
+      audio: audioEnabled ? { deviceId: initialUserChoices.audioDeviceId } : false,
+      video: videoEnabled
+        ? { deviceId: initialUserChoices.videoDeviceId, processor: videoProcessor }
+        : false,
+    },
+    onError,
+  );
+
+  const videoEl = React.useRef(null);
+
+  const videoTrack = React.useMemo(
+    () => tracks?.filter((track) => track.kind === Track.Kind.Video)[0] as LocalVideoTrack,
+    [tracks],
+  );
+
+  const facingMode = React.useMemo(() => {
+    if (videoTrack) {
+      const { facingMode } = facingModeFromLocalTrack(videoTrack);
+      return facingMode;
+    } else {
+      return 'undefined';
+    }
+  }, [videoTrack]);
+
+  const audioTrack = React.useMemo(
+    () => tracks?.filter((track) => track.kind === Track.Kind.Audio)[0] as LocalAudioTrack,
+    [tracks],
+  );
+
+  React.useEffect(() => {
+    if (videoEl.current && videoTrack) {
+      videoTrack.unmute();
+      videoTrack.attach(videoEl.current);
+    }
+
+    return () => {
+      videoTrack?.detach();
+    };
+  }, [videoTrack]);
+
+  const [isValid, setIsValid] = React.useState<boolean>();
+
+  const handleValidation = React.useCallback(
+    (values: LocalUserChoices) => {
+      if (typeof onValidate === 'function') {
+        return onValidate(values);
+      } else {
+        return values.username !== '';
+      }
+    },
+    [onValidate],
+  );
+
+  React.useEffect(() => {
+    const newUserChoices = {
+      username,
+      videoEnabled,
+      videoDeviceId,
+      audioEnabled,
+      audioDeviceId,
+    };
+    setUserChoices(newUserChoices);
+    setIsValid(handleValidation(newUserChoices));
+  }, [username, videoEnabled, handleValidation, audioEnabled, audioDeviceId, videoDeviceId]);
+
+  function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    if (handleValidation(userChoices)) {
+      if (typeof onSubmit === 'function') {
+        onSubmit(userChoices);
+      }
+    } else {
+      log.warn('Validation failed with: ', userChoices);
+    }
+  }
+
+  useWarnAboutMissingStyles();
+
+  return (
+    <div className="lk-prejoin" {...htmlProps}>
+      <div className="lk-video-container">
+        {videoTrack && (
+          <video ref={videoEl} width="1280" height="720" data-lk-facing-mode={facingMode} />
+        )}
+        {(!videoTrack || !videoEnabled) && (
+          <div className="lk-camera-off-note">
+            <ParticipantPlaceholder />
+          </div>
+        )}
+      </div>
+      <div className="lk-button-group-container">
+        <div className="lk-button-group audio">
+          <TrackToggle
+            initialState={audioEnabled}
+            source={Track.Source.Microphone}
+            onChange={(enabled) => setAudioEnabled(enabled)}
+          >
+            {micLabel}
+          </TrackToggle>
+          <div className="lk-button-group-menu">
+            <MediaDeviceMenu
+              initialSelection={audioDeviceId}
+              kind="audioinput"
+              disabled={!audioTrack}
+              tracks={{ audioinput: audioTrack }}
+              onActiveDeviceChange={(_, id) => setAudioDeviceId(id)}
+            />
+          </div>
+        </div>
+        <div className="lk-button-group video">
+          <TrackToggle
+            initialState={videoEnabled}
+            source={Track.Source.Camera}
+            onChange={(enabled) => setVideoEnabled(enabled)}
+          >
+            {camLabel}
+          </TrackToggle>
+          <div className="lk-button-group-menu">
+            <MediaDeviceMenu
+              initialSelection={videoDeviceId}
+              kind="videoinput"
+              disabled={!videoTrack}
+              tracks={{ videoinput: videoTrack }}
+              onActiveDeviceChange={(_, id) => setVideoDeviceId(id)}
+            />
+          </div>
+        </div>
+      </div>
+
+      <form className="lk-username-container">
+        <input
+          className="lk-form-control"
+          id="username"
+          name="username"
+          type="text"
+          defaultValue={username}
+          placeholder={userLabel}
+          onChange={(inputEl) => setUsername(inputEl.target.value)}
+          autoComplete="off"
+        />
+        <button
+          className="lk-button lk-join-button"
+          type="submit"
+          onClick={handleSubmit}
+          disabled={!isValid}
+        >
+          {joinLabel}
+        </button>
+      </form>
+
+      {debug && (
+        <>
+          <strong>User Choices:</strong>
+          <ul className="lk-list" style={{ overflow: 'hidden', maxWidth: '15rem' }}>
+            <li>Username: {`${userChoices.username}`}</li>
+            <li>Video Enabled: {`${userChoices.videoEnabled}`}</li>
+            <li>Audio Enabled: {`${userChoices.audioEnabled}`}</li>
+            <li>Video Device: {`${userChoices.videoDeviceId}`}</li>
+            <li>Audio Device: {`${userChoices.audioDeviceId}`}</li>
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}

package/src/prefabs/VideoConference.tsx

@@ -0,0 +1,184 @@
+import type {
+  MessageDecoder,
+  MessageEncoder,
+  TrackReferenceOrPlaceholder,
+  WidgetState,
+} from '@livekit/components-core';
+import { isEqualTrackRef, isTrackReference, isWeb, log } from '@livekit/components-core';
+import { RoomEvent, Track } from 'livekit-client';
+import * as React from 'react';
+import type { MessageFormatter } from '../components';
+import {
+  CarouselLayout,
+  ConnectionStateToast,
+  FocusLayout,
+  FocusLayoutContainer,
+  GridLayout,
+  LayoutContextProvider,
+  ParticipantTile,
+  RoomAudioRenderer,
+} from '../components';
+import { useCreateLayoutContext } from '../context';
+import { usePinnedTracks, useTracks } from '../hooks';
+import { Chat } from './Chat';
+import { ControlBar, type ControlBarProps } from './ControlBar';
+import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
+
+/**
+ * @public
+ */
+export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElement> {
+  chatMessageFormatter?: MessageFormatter;
+  chatMessageEncoder?: MessageEncoder;
+  chatMessageDecoder?: MessageDecoder;
+  /** @alpha */
+  SettingsComponent?: React.ComponentType;
+  controlBarProops?: Partial<ControlBarProps>;
+}
+
+/**
+ * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
+ * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
+ * of participants, basic non-persistent chat, screen sharing, and more.
+ *
+ * @remarks
+ * The component is implemented with other LiveKit components like `FocusContextProvider`,
+ * `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
+ * You can use these components as a starting point for your own custom video conferencing application.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <VideoConference />
+ * <LiveKitRoom>
+ * ```
+ * @public
+ */
+export function VideoConference({
+  chatMessageFormatter,
+  chatMessageDecoder,
+  chatMessageEncoder,
+  SettingsComponent,
+  controlBarProops = {},
+  ...props
+}: VideoConferenceProps) {
+  const [widgetState, setWidgetState] = React.useState<WidgetState>({
+    showChat: false,
+    unreadMessages: 0,
+    showSettings: false,
+  });
+  const lastAutoFocusedScreenShareTrack = React.useRef<TrackReferenceOrPlaceholder | null>(null);
+
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false },
+  );
+
+  const widgetUpdate = (state: WidgetState) => {
+    log.debug('updating widget state', state);
+    setWidgetState(state);
+  };
+
+  const layoutContext = useCreateLayoutContext();
+
+  const screenShareTracks = tracks
+    .filter(isTrackReference)
+    .filter((track) => track.publication.source === Track.Source.ScreenShare);
+
+  const focusTrack = usePinnedTracks(layoutContext)?.[0];
+  const carouselTracks = tracks.filter((track) => !isEqualTrackRef(track, focusTrack));
+
+  React.useEffect(() => {
+    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
+    if (
+      screenShareTracks.some((track) => track.publication.isSubscribed) &&
+      lastAutoFocusedScreenShareTrack.current === null
+    ) {
+      log.debug('Auto set screen share focus:', { newScreenShareTrack: screenShareTracks[0] });
+      layoutContext.pin.dispatch?.({ msg: 'set_pin', trackReference: screenShareTracks[0] });
+      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0];
+    } else if (
+      lastAutoFocusedScreenShareTrack.current &&
+      !screenShareTracks.some(
+        (track) =>
+          track.publication.trackSid ===
+          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid,
+      )
+    ) {
+      log.debug('Auto clearing screen share focus.');
+      layoutContext.pin.dispatch?.({ msg: 'clear_pin' });
+      lastAutoFocusedScreenShareTrack.current = null;
+    }
+    if (focusTrack && !isTrackReference(focusTrack)) {
+      const updatedFocusTrack = tracks.find(
+        (tr) =>
+          tr.participant.identity === focusTrack.participant.identity &&
+          tr.source === focusTrack.source,
+      );
+      if (updatedFocusTrack !== focusTrack && isTrackReference(updatedFocusTrack)) {
+        layoutContext.pin.dispatch?.({ msg: 'set_pin', trackReference: updatedFocusTrack });
+      }
+    }
+  }, [
+    screenShareTracks
+      .map((ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`)
+      .join(),
+    focusTrack?.publication?.trackSid,
+    tracks,
+  ]);
+
+  useWarnAboutMissingStyles();
+
+  return (
+    <div className="lk-video-conference" {...props}>
+      {isWeb() && (
+        <LayoutContextProvider
+          value={layoutContext}
+          // onPinChange={handleFocusStateChange}
+          onWidgetChange={widgetUpdate}
+        >
+          <div className="lk-video-conference-inner">
+            {!focusTrack ? (
+              <div className="lk-grid-layout-wrapper">
+                <GridLayout tracks={tracks}>
+                  <ParticipantTile />
+                </GridLayout>
+              </div>
+            ) : (
+              <div className="lk-focus-layout-wrapper">
+                <FocusLayoutContainer>
+                  <CarouselLayout tracks={carouselTracks}>
+                    <ParticipantTile />
+                  </CarouselLayout>
+                  {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                </FocusLayoutContainer>
+              </div>
+            )}
+            <ControlBar
+              controls={{ chat: true, settings: !!SettingsComponent, ...controlBarProops }}
+            />
+          </div>
+          <Chat
+            style={{ display: widgetState.showChat ? 'grid' : 'none' }}
+            messageFormatter={chatMessageFormatter}
+            messageEncoder={chatMessageEncoder}
+            messageDecoder={chatMessageDecoder}
+          />
+          {SettingsComponent && (
+            <div
+              className="lk-settings-menu-modal"
+              style={{ display: widgetState.showSettings ? 'block' : 'none' }}
+            >
+              <SettingsComponent />
+            </div>
+          )}
+        </LayoutContextProvider>
+      )}
+      <RoomAudioRenderer />
+      <ConnectionStateToast />
+    </div>
+  );
+}