@werxt/livekit-components-react 2.9.20

package/src/assets/images/ParticipantPlaceholder.tsx

@@ -0,0 +1,31 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgParticipantPlaceholder = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={320}
+    height={320}
+    viewBox="0 0 320 320"
+    preserveAspectRatio="xMidYMid meet"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M160 180C204.182 180 240 144.183 240 100C240 55.8172 204.182 20 160 20C115.817 20 79.9997 55.8172 79.9997 100C79.9997 144.183 115.817 180 160 180Z"
+      fill="white"
+      fillOpacity={0.25}
+    />
+    <path
+      d="M97.6542 194.614C103.267 191.818 109.841 192.481 115.519 195.141C129.025 201.466 144.1 205 159.999 205C175.899 205 190.973 201.466 204.48 195.141C210.158 192.481 216.732 191.818 222.345 194.614C262.703 214.719 291.985 253.736 298.591 300.062C300.15 310.997 291.045 320 280 320H39.9997C28.954 320 19.8495 310.997 21.4087 300.062C28.014 253.736 57.2966 214.72 97.6542 194.614Z"
+      fill="white"
+      fillOpacity={0.25}
+    />
+  </svg>
+);
+export default SvgParticipantPlaceholder;

package/src/assets/images/index.ts

@@ -0,0 +1 @@
+export { default as ParticipantPlaceholder } from './ParticipantPlaceholder';

package/src/assets/template.js

@@ -0,0 +1,21 @@
+/**
+ * This function is used as a template to generate SVG components with svgr.
+ * @internal
+ */
+function template(variables, { tpl }) {
+  return tpl`
+  ${'/**\n * WARNING: This file was auto-generated by svgr. Do not edit.\n */\n'}
+  ${variables.imports};
+  
+  ${variables.interfaces};
+
+  ${'/**\n * @internal\n */\n'}
+  const ${variables.componentName} = (${variables.props}) => (
+    ${variables.jsx}
+  );
+  
+  ${variables.exports};
+  `;
+}
+
+module.exports = template;

package/src/components/ChatEntry.tsx

@@ -0,0 +1,112 @@
+import type { ReceivedChatMessage } from '@livekit/components-core';
+import { tokenize, createDefaultGrammar } from '@livekit/components-core';
+import * as React from 'react';
+
+/** @public */
+export type MessageFormatter = (message: string) => React.ReactNode;
+
+/**
+ * ChatEntry composes the HTML div element under the hood, so you can pass all its props.
+ * These are the props specific to the ChatEntry component:
+ * @public
+ */
+export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
+  /** The chat massage object to display. */
+  entry: ReceivedChatMessage;
+  /** Hide sender name. Useful when displaying multiple consecutive chat messages from the same person. */
+  hideName?: boolean;
+  /** Hide message timestamp. */
+  hideTimestamp?: boolean;
+  /** An optional formatter for the message body. */
+  messageFormatter?: MessageFormatter;
+}
+
+/**
+ * The `ChatEntry` component holds and displays one chat message.
+ *
+ * @example
+ * ```tsx
+ * <Chat>
+ *   <ChatEntry />
+ * </Chat>
+ * ```
+ * @see `Chat`
+ * @public
+ */
+export const ChatEntry: (
+  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLLIElement, ChatEntryProps>(
+  function ChatEntry(
+    { entry, hideName = false, hideTimestamp = false, messageFormatter, ...props }: ChatEntryProps,
+    ref,
+  ) {
+    const formattedMessage = React.useMemo(() => {
+      return messageFormatter ? messageFormatter(entry.message) : entry.message;
+    }, [entry.message, messageFormatter]);
+    const hasBeenEdited = !!entry.editTimestamp;
+    const time = new Date(entry.timestamp);
+    const locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US';
+
+    const name = entry.from?.name ?? entry.from?.identity;
+
+    return (
+      <li
+        ref={ref}
+        className="lk-chat-entry"
+        title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
+        data-lk-message-origin={entry.from?.isLocal ? 'local' : 'remote'}
+        {...props}
+      >
+        {(!hideTimestamp || !hideName || hasBeenEdited) && (
+          <span className="lk-meta-data">
+            {!hideName && <strong className="lk-participant-name">{name}</strong>}
+
+            {(!hideTimestamp || hasBeenEdited) && (
+              <span className="lk-timestamp">
+                {hasBeenEdited && 'edited '}
+                {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
+              </span>
+            )}
+          </span>
+        )}
+
+        <span className="lk-message-body">{formattedMessage}</span>
+        <span className="lk-message-attachements">
+          {entry.attachedFiles?.map(
+            (file) =>
+              file.type.startsWith('image/') && (
+                <img
+                  style={{ maxWidth: '300px', maxHeight: '300px' }}
+                  key={file.name}
+                  src={URL.createObjectURL(file)}
+                  alt={file.name}
+                />
+              ),
+          )}
+        </span>
+      </li>
+    );
+  },
+);
+
+/** @public */
+export function formatChatMessageLinks(message: string): React.ReactNode {
+  return tokenize(message, createDefaultGrammar()).map((tok, i) => {
+    if (typeof tok === `string`) {
+      return tok;
+    } else {
+      const content = tok.content.toString();
+      const href =
+        tok.type === `url`
+          ? /^http(s?):\/\//.test(content)
+            ? content
+            : `https://${content}`
+          : `mailto:${content}`;
+      return (
+        <a className="lk-chat-link" key={i} href={href} target="_blank" rel="noreferrer">
+          {content}
+        </a>
+      );
+    }
+  });
+}

package/src/components/ConnectionState.tsx

@@ -0,0 +1,36 @@
+import type { Room } from 'livekit-client';
+import * as React from 'react';
+import { useConnectionState } from '../hooks';
+
+/** @public */
+export interface ConnectionStatusProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The room from which the connection status should be displayed.
+   */
+  room?: Room;
+}
+
+/**
+ * The `ConnectionState` component displays the connection status of the room as strings
+ * (`"connected" | "connecting" | "disconnected" | "reconnecting"`).
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ConnectionState />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export const ConnectionState: (
+  props: ConnectionStatusProps & React.RefAttributes<HTMLDivElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLDivElement, ConnectionStatusProps>(
+  function ConnectionState({ room, ...props }: ConnectionStatusProps, ref) {
+    const connectionState = useConnectionState(room);
+    return (
+      <div ref={ref} {...props}>
+        {connectionState}
+      </div>
+    );
+  },
+);

package/src/components/ConnectionStateToast.tsx

@@ -0,0 +1,47 @@
+import type { Room } from 'livekit-client';
+import { ConnectionState } from 'livekit-client';
+import * as React from 'react';
+import { SpinnerIcon } from '../assets/icons';
+import { useConnectionState } from '../hooks';
+import { Toast } from './Toast';
+
+/** @public */
+export interface ConnectionStateToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  room?: Room;
+}
+
+/**
+ * The `ConnectionStateToast` component displays a toast
+ * notification indicating the current connection state of the room.
+ * @public
+ */
+export function ConnectionStateToast(props: ConnectionStateToastProps) {
+  const [notification, setNotification] = React.useState<React.ReactElement | undefined>(undefined);
+  const state = useConnectionState(props.room);
+
+  React.useEffect(() => {
+    switch (state) {
+      case ConnectionState.Reconnecting:
+        setNotification(
+          <>
+            <SpinnerIcon className="lk-spinner" /> Reconnecting
+          </>,
+        );
+        break;
+      case ConnectionState.Connecting:
+        setNotification(
+          <>
+            <SpinnerIcon className="lk-spinner" /> Connecting
+          </>,
+        );
+        break;
+      case ConnectionState.Disconnected:
+        setNotification(<>Disconnected</>);
+        break;
+      default:
+        setNotification(undefined);
+        break;
+    }
+  }, [state]);
+  return notification ? <Toast className="lk-toast-connection-state">{notification}</Toast> : <></>;
+}

package/src/components/LiveKitRoom.tsx

@@ -0,0 +1,122 @@
+import type {
+  AudioCaptureOptions,
+  DisconnectReason,
+  RoomConnectOptions,
+  RoomOptions,
+  ScreenShareCaptureOptions,
+  VideoCaptureOptions,
+} from 'livekit-client';
+import type { MediaDeviceFailure, Room } from 'livekit-client';
+import * as React from 'react';
+import { type FeatureFlags, LKFeatureContext, RoomContext } from '../context';
+import { useLiveKitRoom } from '../hooks';
+
+/** @public */
+export interface LiveKitRoomProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
+  /**
+   * URL to the LiveKit server.
+   * For example: `wss://<domain>.livekit.cloud`
+   * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string url can the connection be established.
+   */
+  serverUrl: string | undefined;
+  /**
+   * A user specific access token for a client to authenticate to the room.
+   * This token is necessary to establish a connection to the room.
+   * To simplify the implementation, `undefined` is also accepted as an intermediate value, but only with a valid string token can the connection be established.
+   *
+   * @see https://docs.livekit.io/cloud/project-management/keys-and-tokens/#generating-access-tokens
+   */
+  token: string | undefined;
+  /**
+   * Publish audio immediately after connecting to your LiveKit room.
+   * @defaultValue `false`
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/AudioCaptureOptions.html
+   */
+  audio?: AudioCaptureOptions | boolean;
+  /**
+   * Publish video immediately after connecting to your LiveKit room.
+   * @defaultValue `false`
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/VideoCaptureOptions.html
+   */
+  video?: VideoCaptureOptions | boolean;
+  /**
+   * Publish screen share immediately after connecting to your LiveKit room.
+   * @defaultValue `false`
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/ScreenShareCaptureOptions.html
+   */
+  screen?: ScreenShareCaptureOptions | boolean;
+  /**
+   * If set to true a connection to LiveKit room is initiated.
+   * @defaultValue `true`
+   */
+  connect?: boolean;
+  /**
+   * Options for when creating a new room.
+   * When you pass your own room instance to this component, these options have no effect.
+   * Instead, set the options directly in the room instance.
+   *
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomOptions.html
+   */
+  options?: RoomOptions;
+  /**
+   * Define options how to connect to the LiveKit server.
+   *
+   * @see https://docs.livekit.io/client-sdk-js/interfaces/RoomConnectOptions.html
+   */
+  connectOptions?: RoomConnectOptions;
+  onConnected?: () => void;
+  onDisconnected?: (reason?: DisconnectReason) => void;
+  onError?: (error: Error) => void;
+  onMediaDeviceFailure?: (failure?: MediaDeviceFailure, kind?: MediaDeviceKind) => void;
+  onEncryptionError?: (error: Error) => void;
+  /**
+   * Optional room instance.
+   * By passing your own room instance you overwrite the `options` parameter,
+   * make sure to set the options directly on the room instance itself.
+   */
+  room?: Room;
+
+  simulateParticipants?: number | undefined;
+
+  /**
+   * @internal
+   */
+  featureFlags?: FeatureFlags;
+}
+
+/**
+ * The `LiveKitRoom` component provides the room context to all its child components.
+ * It is generally the starting point of your LiveKit app and the root of the LiveKit component tree.
+ * It provides the room state as a React context to all child components, so you don't have to pass it yourself.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom
+ *  token='<livekit-token>'
+ *  serverUrl='<url-to-livekit-server>'
+ *  connect={true}
+ * >
+ *     ...
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export const LiveKitRoom: (
+  props: React.PropsWithChildren<LiveKitRoomProps> & React.RefAttributes<HTMLDivElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<LiveKitRoomProps>
+>(function LiveKitRoom(props: React.PropsWithChildren<LiveKitRoomProps>, ref) {
+  const { room, htmlProps } = useLiveKitRoom(props);
+  return (
+    <div ref={ref} {...htmlProps}>
+      {room && (
+        <RoomContext.Provider value={room}>
+          <LKFeatureContext.Provider value={props.featureFlags}>
+            {props.children}
+          </LKFeatureContext.Provider>
+        </RoomContext.Provider>
+      )}
+    </div>
+  );
+});

package/src/components/ParticipantLoop.tsx

@@ -0,0 +1,41 @@
+import type { Participant } from 'livekit-client';
+import * as React from 'react';
+import { ParticipantContext } from '../context';
+import { cloneSingleChild } from '../utils';
+
+/** @public */
+export interface ParticipantLoopProps {
+  /** The participants to loop over. Use `useParticipants()` hook to get participants. */
+  participants: Participant[];
+  /** The template component to be used in the loop. */
+  children: React.ReactNode;
+}
+
+/**
+ * The `ParticipantLoop` component loops over an array of participants to create a context for every participant.
+ * This component takes exactly one child component as a template.
+ * By providing your own template as a child you have full control over the look and feel of your participant representations.
+ *
+ * @remarks
+ * If you want to loop over individual tracks instead of participants, you can use the `TrackLoop` component.
+ *
+ * @example
+ * ```tsx
+ * const participants = useParticipants();
+ * <ParticipantLoop participants={participants}>
+ *   <ParticipantName />
+ * </ParticipantLoop>
+ * ```
+ * @public
+ */
+export function ParticipantLoop({ participants, ...props }: ParticipantLoopProps) {
+  return (
+    <>
+      {participants.map((participant) => (
+        <ParticipantContext.Provider value={participant} key={participant.identity}>
+          {cloneSingleChild(props.children)}
+        </ParticipantContext.Provider>
+      ))}
+    </>
+  );
+}

package/src/components/RoomAudioRenderer.tsx

@@ -0,0 +1,57 @@
+import { getTrackReferenceId } from '@livekit/components-core';
+import { Room, Track } from 'livekit-client';
+import * as React from 'react';
+import { useTracks } from '../hooks';
+import { AudioTrack } from './participant/AudioTrack';
+
+/** @public */
+export interface RoomAudioRendererProps {
+  room?: Room;
+
+  /** Sets the volume for all audio tracks rendered by this component. By default, the range is between `0.0` and `1.0`. */
+  volume?: number;
+
+  /**
+   * If set to `true`, mutes all audio tracks rendered by the component.
+   * @remarks
+   * If set to `true`, the server will stop sending audio track data to the client.
+   * @alpha
+   */
+  muted?: boolean;
+}
+
+/**
+ * The `RoomAudioRenderer` component is a drop-in solution for adding audio to your LiveKit app.
+ * It takes care of handling remote participants’ audio tracks and makes sure that microphones and screen share are audible.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <RoomAudioRenderer />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function RoomAudioRenderer({ room, volume, muted }: RoomAudioRendererProps) {
+  const tracks = useTracks(
+    [Track.Source.Microphone, Track.Source.ScreenShareAudio, Track.Source.Unknown],
+    {
+      updateOnlyOn: [],
+      onlySubscribed: true,
+      room,
+    },
+  ).filter((ref) => !ref.participant.isLocal && ref.publication.kind === Track.Kind.Audio);
+
+  return (
+    <div style={{ display: 'none' }}>
+      {tracks.map((trackRef) => (
+        <AudioTrack
+          key={getTrackReferenceId(trackRef)}
+          trackRef={trackRef}
+          volume={volume}
+          muted={muted}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/RoomName.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useRoomInfo } from '../hooks';
+
+/** @public */
+export interface RoomNameProps extends React.HTMLAttributes<HTMLSpanElement> {
+  childrenPosition?: 'before' | 'after';
+}
+
+/**
+ * The `RoomName` component renders the name of the connected LiveKit room inside a span tag.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <RoomName />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ *
+ * @param props - RoomNameProps
+ */
+export const RoomName: React.FC<RoomNameProps & React.RefAttributes<HTMLSpanElement>> =
+  /* @__PURE__ */ React.forwardRef<HTMLSpanElement, RoomNameProps>(function RoomName(
+    { childrenPosition = 'before', children, ...htmlAttributes }: RoomNameProps,
+    ref,
+  ) {
+    const { name } = useRoomInfo();
+
+    return (
+      <span ref={ref} {...htmlAttributes}>
+        {childrenPosition === 'before' && children}
+        {name}
+        {childrenPosition === 'after' && children}
+      </span>
+    );
+  });

package/src/components/SessionProvider.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { UseSessionReturn } from '../hooks';
+import { RoomContext } from '../context';
+import { SessionContext } from '../context/session-context';
+
+/** @beta */
+export type SessionProviderProps = {
+  session: UseSessionReturn;
+  children: React.ReactNode;
+};
+
+/**
+ * The `SessionProvider` component instantiates a SessionContext from the return of useSession
+ * @beta
+ */
+export function SessionProvider(props: SessionProviderProps) {
+  return (
+    <SessionContext.Provider value={props.session}>
+      <RoomContext.Provider value={props.session.room}>{props.children}</RoomContext.Provider>
+    </SessionContext.Provider>
+  );
+}

package/src/components/Toast.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { mergeProps } from '../utils';
+
+/**
+ * The `Toast` component is a rudimentary way to display a message to the user.
+ * This message should be short lived and not require user interaction.
+ * For example, displaying the current connection state like `ConnectionStateToast` does.
+ *
+ * @example
+ * ```tsx
+ * <Toast>Connecting...</Toast>
+ * ```
+ * @public
+ */
+export function Toast(props: React.HTMLAttributes<HTMLDivElement>) {
+  const htmlProps = React.useMemo(() => mergeProps(props, { className: 'lk-toast' }), [props]);
+  return <div {...htmlProps}>{props.children}</div>;
+}

package/src/components/TrackLoop.tsx

@@ -0,0 +1,45 @@
+import type { TrackReference, TrackReferenceOrPlaceholder } from '@livekit/components-core';
+import * as React from 'react';
+import { TrackRefContext } from '../context/track-reference-context';
+import { cloneSingleChild } from '../utils';
+import { getTrackReferenceId } from '@livekit/components-core';
+
+/** @public */
+export interface TrackLoopProps {
+  /** Track references to loop over. You can the use `useTracks()` hook to get TrackReferences. */
+  tracks: TrackReference[] | TrackReferenceOrPlaceholder[];
+  /** The template component to be used in the loop. */
+  children: React.ReactNode;
+}
+
+/**
+ * The `TrackLoop` component loops over tracks. It is for example a easy way to loop over all participant camera and screen share tracks.
+ * `TrackLoop` creates a `TrackRefContext` for each track that you can use to e.g. render the track.
+ *
+ * @example
+ * ```tsx
+ * const trackRefs = useTracks([Track.Source.Camera]);
+ * <TrackLoop tracks={trackRefs} >
+ *  <TrackRefContext.Consumer>
+ *    {(trackRef) => trackRef && <VideoTrack trackRef={trackRef}/>}
+ *  </TrackRefContext.Consumer>
+ * </TrackLoop>
+ * ```
+ * @public
+ */
+export function TrackLoop({ tracks, ...props }: TrackLoopProps) {
+  return (
+    <>
+      {tracks.map((trackReference) => {
+        return (
+          <TrackRefContext.Provider
+            value={trackReference}
+            key={getTrackReferenceId(trackReference)}
+          >
+            {cloneSingleChild(props.children)}
+          </TrackRefContext.Provider>
+        );
+      })}
+    </>
+  );
+}

package/src/components/controls/ChatToggle.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useChatToggle } from '../../hooks';
+
+/** @public */
+export interface ChatToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * The `ChatToggle` component is a button that toggles the visibility of the `Chat` component.
+ * @remarks
+ * For the component to have any effect it has to live inside a `LayoutContext` context.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ToggleChat />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export const ChatToggle: (
+  props: ChatToggleProps & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ChatToggleProps>(
+  function ChatToggle(props: ChatToggleProps, ref) {
+    const { mergedProps } = useChatToggle({ props });
+
+    return (
+      <button ref={ref} {...mergedProps}>
+        {props.children}
+      </button>
+    );
+  },
+);

package/src/components/controls/ClearPinButton.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useClearPinButton } from '../../hooks';
+
+/** @public */
+export interface ClearPinButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+/**
+ * The `ClearPinButton` is a basic html button with the added ability to signal
+ * the `LayoutContext` that it should display the grid view again.
+ * @remarks
+ * This component works only inside a `LayoutContext`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ClearPinButton>Back to grid view</ClearPinButton>
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export const ClearPinButton: (
+  props: ClearPinButtonProps & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<HTMLButtonElement, ClearPinButtonProps>(
+  function ClearPinButton(props: ClearPinButtonProps, ref) {
+    const { buttonProps } = useClearPinButton(props);
+    return (
+      <button ref={ref} {...buttonProps}>
+        {props.children}
+      </button>
+    );
+  },
+);