@werxt/livekit-components-react 2.9.20

package/src/prefabs/ControlBar.tsx

@@ -0,0 +1,227 @@
+import { Track } from 'livekit-client';
+import * as React from 'react';
+import { MediaDeviceMenu } from './MediaDeviceMenu';
+import { DisconnectButton } from '../components/controls/DisconnectButton';
+import { TrackToggle } from '../components/controls/TrackToggle';
+import { ChatIcon, GearIcon, LeaveIcon } from '../assets/icons';
+import { ChatToggle } from '../components/controls/ChatToggle';
+import { useLocalParticipantPermissions, usePersistentUserChoices } from '../hooks';
+import { useMediaQuery } from '../hooks/internal';
+import { useMaybeLayoutContext } from '../context';
+import { supportsScreenSharing } from '@livekit/components-core';
+import { mergeProps } from '../utils';
+import { StartMediaButton } from '../components/controls/StartMediaButton';
+import { SettingsMenuToggle } from '../components/controls/SettingsMenuToggle';
+
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean;
+  camera?: boolean;
+  chat?: boolean;
+  screenShare?: boolean;
+  leave?: boolean;
+  settings?: boolean;
+};
+
+const trackSourceToProtocol = (source: Track.Source) => {
+  // NOTE: this mapping avoids importing the protocol package as that leads to a significant bundle size increase
+  switch (source) {
+    case Track.Source.Camera:
+      return 1;
+    case Track.Source.Microphone:
+      return 2;
+    case Track.Source.ScreenShare:
+      return 3;
+    default:
+      return 0;
+  }
+};
+
+/** @public */
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
+  variation?: 'minimal' | 'verbose' | 'textOnly';
+  controls?: ControlBarControls;
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enable the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean;
+}
+
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function ControlBar({
+  variation,
+  controls,
+  saveUserChoices = true,
+  onDeviceError,
+  ...props
+}: ControlBarProps) {
+  const [isChatOpen, setIsChatOpen] = React.useState(false);
+  const layoutContext = useMaybeLayoutContext();
+  React.useEffect(() => {
+    if (layoutContext?.widget.state?.showChat !== undefined) {
+      setIsChatOpen(layoutContext?.widget.state?.showChat);
+    }
+  }, [layoutContext?.widget.state?.showChat]);
+  const isTooLittleSpace = useMediaQuery(`(max-width: ${isChatOpen ? 1000 : 760}px)`);
+
+  const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose';
+  variation ??= defaultVariation;
+
+  const visibleControls = { leave: true, ...controls };
+
+  const localPermissions = useLocalParticipantPermissions();
+
+  if (!localPermissions) {
+    visibleControls.camera = false;
+    visibleControls.chat = false;
+    visibleControls.microphone = false;
+    visibleControls.screenShare = false;
+  } else {
+    const canPublishSource = (source: Track.Source) => {
+      return (
+        localPermissions.canPublish &&
+        (localPermissions.canPublishSources.length === 0 ||
+          localPermissions.canPublishSources.includes(trackSourceToProtocol(source)))
+      );
+    };
+    visibleControls.camera ??= canPublishSource(Track.Source.Camera);
+    visibleControls.microphone ??= canPublishSource(Track.Source.Microphone);
+    visibleControls.screenShare ??= canPublishSource(Track.Source.ScreenShare);
+    visibleControls.chat ??= localPermissions.canPublishData && controls?.chat;
+  }
+
+  const showIcon = React.useMemo(
+    () => variation === 'minimal' || variation === 'verbose',
+    [variation],
+  );
+  const showText = React.useMemo(
+    () => variation === 'textOnly' || variation === 'verbose',
+    [variation],
+  );
+
+  const browserSupportsScreenSharing = supportsScreenSharing();
+
+  const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
+
+  const onScreenShareChange = React.useCallback(
+    (enabled: boolean) => {
+      setIsScreenShareEnabled(enabled);
+    },
+    [setIsScreenShareEnabled],
+  );
+
+  const htmlProps = mergeProps({ className: 'lk-control-bar' }, props);
+
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices });
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled],
+  );
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled],
+  );
+
+  return (
+    <div {...htmlProps}>
+      {visibleControls.microphone && (
+        <div className="lk-button-group">
+          <TrackToggle
+            source={Track.Source.Microphone}
+            showIcon={showIcon}
+            onChange={microphoneOnChange}
+            onDeviceError={(error) => onDeviceError?.({ source: Track.Source.Microphone, error })}
+          >
+            {showText && 'Microphone'}
+          </TrackToggle>
+          <div className="lk-button-group-menu">
+            <MediaDeviceMenu
+              kind="audioinput"
+              onActiveDeviceChange={(_kind, deviceId) =>
+                saveAudioInputDeviceId(deviceId ?? 'default')
+              }
+            />
+          </div>
+        </div>
+      )}
+      {visibleControls.camera && (
+        <div className="lk-button-group">
+          <TrackToggle
+            source={Track.Source.Camera}
+            showIcon={showIcon}
+            onChange={cameraOnChange}
+            onDeviceError={(error) => onDeviceError?.({ source: Track.Source.Camera, error })}
+          >
+            {showText && 'Camera'}
+          </TrackToggle>
+          <div className="lk-button-group-menu">
+            <MediaDeviceMenu
+              kind="videoinput"
+              onActiveDeviceChange={(_kind, deviceId) =>
+                saveVideoInputDeviceId(deviceId ?? 'default')
+              }
+            />
+          </div>
+        </div>
+      )}
+      {visibleControls.screenShare && browserSupportsScreenSharing && (
+        <TrackToggle
+          source={Track.Source.ScreenShare}
+          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
+          showIcon={showIcon}
+          onChange={onScreenShareChange}
+          onDeviceError={(error) => onDeviceError?.({ source: Track.Source.ScreenShare, error })}
+        >
+          {showText && (isScreenShareEnabled ? 'Stop screen share' : 'Share screen')}
+        </TrackToggle>
+      )}
+      {visibleControls.chat && (
+        <ChatToggle>
+          {showIcon && <ChatIcon />}
+          {showText && 'Chat'}
+        </ChatToggle>
+      )}
+      {visibleControls.settings && (
+        <SettingsMenuToggle>
+          {showIcon && <GearIcon />}
+          {showText && 'Settings'}
+        </SettingsMenuToggle>
+      )}
+      {visibleControls.leave && (
+        <DisconnectButton>
+          {showIcon && <LeaveIcon />}
+          {showText && 'Leave'}
+        </DisconnectButton>
+      )}
+      <StartMediaButton />
+    </div>
+  );
+}

package/src/prefabs/MediaDeviceMenu.tsx

@@ -0,0 +1,159 @@
+import { computeMenuPosition, wasClickOutside, log } from '@livekit/components-core';
+import * as React from 'react';
+import { MediaDeviceSelect } from '../components/controls/MediaDeviceSelect';
+import type { LocalAudioTrack, LocalVideoTrack } from 'livekit-client';
+
+/** @public */
+export interface MediaDeviceMenuProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  kind?: MediaDeviceKind;
+  initialSelection?: string;
+  onActiveDeviceChange?: (kind: MediaDeviceKind, deviceId: string) => void;
+  tracks?: Partial<Record<MediaDeviceKind, LocalAudioTrack | LocalVideoTrack | undefined>>;
+  /**
+   * this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels.
+   * in some browsers multiple calls to getUserMedia result in multiple permission prompts.
+   * It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the
+   * appropriate permissions.
+   *
+   * @see {@link PreJoin}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices | MDN enumerateDevices}
+   */
+  requestPermissions?: boolean;
+}
+
+/**
+ * The `MediaDeviceMenu` component is a button that opens a menu that lists
+ * all media devices and allows the user to select them.
+ *
+ * @remarks
+ * This component is implemented with the `MediaDeviceSelect` LiveKit components.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <MediaDeviceMenu />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function MediaDeviceMenu({
+  kind,
+  initialSelection,
+  onActiveDeviceChange,
+  tracks,
+  requestPermissions = false,
+  ...props
+}: MediaDeviceMenuProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [devices, setDevices] = React.useState<MediaDeviceInfo[]>([]);
+  const [updateRequired, setUpdateRequired] = React.useState<boolean>(true);
+  const [needPermissions, setNeedPermissions] = React.useState(requestPermissions);
+
+  const handleActiveDeviceChange = (kind: MediaDeviceKind, deviceId: string) => {
+    log.debug('handle device change');
+    setIsOpen(false);
+    onActiveDeviceChange?.(kind, deviceId);
+  };
+
+  const button = React.useRef<HTMLButtonElement>(null);
+  const tooltip = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    if (isOpen) {
+      setNeedPermissions(true);
+    }
+  }, [isOpen]);
+
+  React.useLayoutEffect(() => {
+    let cleanup: ReturnType<typeof computeMenuPosition> | undefined;
+    if (button.current && tooltip.current && (devices || updateRequired)) {
+      cleanup = computeMenuPosition(button.current, tooltip.current, (x, y) => {
+        if (tooltip.current) {
+          Object.assign(tooltip.current.style, { left: `${x}px`, top: `${y}px` });
+        }
+      });
+    }
+    setUpdateRequired(false);
+    return () => {
+      cleanup?.();
+    };
+  }, [button, tooltip, devices, updateRequired]);
+
+  const handleClickOutside = React.useCallback(
+    (event: MouseEvent) => {
+      if (!tooltip.current) {
+        return;
+      }
+      if (event.target === button.current) {
+        return;
+      }
+      if (isOpen && wasClickOutside(tooltip.current, event)) {
+        setIsOpen(false);
+      }
+    },
+    [isOpen, tooltip, button],
+  );
+
+  React.useEffect(() => {
+    document.addEventListener<'click'>('click', handleClickOutside);
+    return () => {
+      document.removeEventListener<'click'>('click', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  return (
+    <>
+      <button
+        className="lk-button lk-button-menu"
+        aria-pressed={isOpen}
+        {...props}
+        onClick={() => setIsOpen(!isOpen)}
+        ref={button}
+      >
+        {props.children}
+      </button>
+      {/** only render when enabled in order to make sure that the permissions are requested only if the menu is enabled */}
+      {!props.disabled && (
+        <div
+          className="lk-device-menu"
+          ref={tooltip}
+          style={{ visibility: isOpen ? 'visible' : 'hidden' }}
+        >
+          {kind ? (
+            <MediaDeviceSelect
+              initialSelection={initialSelection}
+              onActiveDeviceChange={(deviceId) => handleActiveDeviceChange(kind, deviceId)}
+              onDeviceListChange={setDevices}
+              kind={kind}
+              track={tracks?.[kind]}
+              requestPermissions={needPermissions}
+            />
+          ) : (
+            <>
+              <div className="lk-device-menu-heading">Audio inputs</div>
+              <MediaDeviceSelect
+                kind="audioinput"
+                onActiveDeviceChange={(deviceId) =>
+                  handleActiveDeviceChange('audioinput', deviceId)
+                }
+                onDeviceListChange={setDevices}
+                track={tracks?.audioinput}
+                requestPermissions={needPermissions}
+              />
+              <div className="lk-device-menu-heading">Video inputs</div>
+              <MediaDeviceSelect
+                kind="videoinput"
+                onActiveDeviceChange={(deviceId) =>
+                  handleActiveDeviceChange('videoinput', deviceId)
+                }
+                onDeviceListChange={setDevices}
+                track={tracks?.videoinput}
+                requestPermissions={needPermissions}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+}