@stream-io/video-react-sdk 1.32.4 → 1.33.0

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -203,7 +203,12 @@ export const BackstageLayout = (props: BackstageLayoutProps) => {
           <span className="str-video__livestream-layout__starts-at">
             {startsAt.getTime() < Date.now()
               ? t('Livestream starts soon')
-              : t('Livestream starts at {{ startsAt }}', { startsAt })}
+              : t('Livestream starts at {{ time }}', {
+                  time: startsAt.toLocaleTimeString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                  }),
+                })}
           </span>
         )}
         {showEarlyParticipantCount && (
@@ -259,49 +264,56 @@ const ParticipantOverlay = (props: {
     <div className="str-video__livestream-layout__overlay">
       {overlayBarVisible && (
         <div className="str-video__livestream-layout__overlay__bar">
-          {showLiveBadge && (
-            <span className="str-video__livestream-layout__live-badge">
-              {t('Live')}
-            </span>
-          )}
-          {showParticipantCount && (
-            <span className="str-video__livestream-layout__viewers-count">
-              {humanizeParticipantCount
-                ? humanize(participantCount)
-                : participantCount}
-            </span>
-          )}
-          {showSpeakerName && (
-            <span
-              className="str-video__livestream-layout__speaker-name"
-              title={participant.name || participant.userId || ''}
-            >
-              {participant.name || participant.userId || ''}
-            </span>
-          )}
-          {showDuration && (
-            <span className="str-video__livestream-layout__duration">
-              {formatDuration(duration)}
-            </span>
-          )}
-          {showMuteButton && (
-            <span
-              className={clsx(
-                'str-video__livestream-layout__mute-button',
-                isSpeakerMuted &&
-                  'str-video__livestream-layout__mute-button--muted',
-              )}
-              onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}
-            />
-          )}
-          {enableFullScreen &&
-            participantViewElement &&
-            typeof participantViewElement.requestFullscreen !== 'undefined' && (
+          <div className="str-video__livestream-layout__overlay__bar-left">
+            {showLiveBadge && (
+              <span className="str-video__livestream-layout__live-badge">
+                {t('Live')}
+              </span>
+            )}
+            {showParticipantCount && (
+              <span className="str-video__livestream-layout__viewers-count">
+                {humanizeParticipantCount
+                  ? humanize(participantCount)
+                  : participantCount}
+              </span>
+            )}
+            {showSpeakerName && (
+              <span
+                className="str-video__livestream-layout__speaker-name"
+                title={participant.name || participant.userId || ''}
+              >
+                {participant.name || participant.userId || ''}
+              </span>
+            )}
+          </div>
+          <div className="str-video__livestream-layout__overlay__bar-center">
+            {showDuration && (
+              <span className="str-video__livestream-layout__duration">
+                {formatDuration(duration)}
+              </span>
+            )}
+          </div>
+          <div className="str-video__livestream-layout__overlay__bar-right">
+            {showMuteButton && (
               <span
-                className="str-video__livestream-layout__go-fullscreen"
-                onClick={toggleFullScreen}
+                className={clsx(
+                  'str-video__livestream-layout__mute-button',
+                  isSpeakerMuted &&
+                    'str-video__livestream-layout__mute-button--muted',
+                )}
+                onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}
               />
             )}
+            {enableFullScreen &&
+              participantViewElement &&
+              typeof participantViewElement.requestFullscreen !==
+                'undefined' && (
+                <span
+                  className="str-video__livestream-layout__go-fullscreen"
+                  onClick={toggleFullScreen}
+                />
+              )}
+          </div>
         </div>
       )}
     </div>

package/src/embedded/EmbeddedClientProvider.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useState, type ReactNode } from 'react';
+import type { INoiseCancellation } from '@stream-io/audio-filters-web';
+import { useEffectEvent as useEffectEventShim } from '@stream-io/video-react-bindings';
+
+import { StreamCall, StreamVideo } from '../core';
+import {
+  StreamTheme,
+  BackgroundFiltersProvider,
+  NoiseCancellationProvider,
+} from '../components';
+import { ConfigurationProvider } from './context';
+import { useEmbeddedClient } from './hooks';
+import type { LogLevel, TokenProvider } from '@stream-io/video-client';
+import type { EmbeddedUser, LayoutOption } from './types';
+import { LoadingIndicator } from '../components';
+
+export interface EmbeddedClientProviderProps {
+  apiKey: string;
+  user: EmbeddedUser;
+  callId: string;
+  callType: string;
+  token?: string;
+  tokenProvider?: TokenProvider;
+  logLevel?: LogLevel;
+  onError?: (error: any) => void;
+  layout?: LayoutOption;
+  theme?: Record<string, string>;
+  children: ReactNode;
+}
+
+const NoiseCancellationWrapper = ({
+  noiseCancellation,
+  children,
+}: {
+  noiseCancellation?: INoiseCancellation;
+  children: ReactNode;
+}) => {
+  if (!noiseCancellation) {
+    return <>{children}</>;
+  }
+
+  return (
+    <NoiseCancellationProvider noiseCancellation={noiseCancellation}>
+      {children}
+    </NoiseCancellationProvider>
+  );
+};
+
+/**
+ * Shared provider wrapper for embedded components.
+ * Handles client/call initialization and wraps children with all necessary providers.
+ */
+export const EmbeddedClientProvider = ({
+  apiKey,
+  user,
+  callId,
+  callType,
+  token,
+  tokenProvider,
+  logLevel,
+  onError,
+  layout,
+  theme,
+  children,
+}: EmbeddedClientProviderProps) => {
+  const [showError, setShowError] = useState<boolean>(false);
+
+  const onErrorStable = useEffectEventShim(onError ?? console.error);
+  const handleError = useCallback(
+    (error: any) => {
+      setShowError(true);
+      onErrorStable(error);
+    },
+    [onErrorStable],
+  );
+
+  const { client, call, noiseCancellation, noiseCancellationReady } =
+    useEmbeddedClient({
+      apiKey,
+      user,
+      callId,
+      callType,
+      token,
+      tokenProvider,
+      logLevel,
+      handleError,
+    });
+
+  if (showError) {
+    return (
+      <StreamTheme className="str-video__embedded">
+        <div className="str-video__embedded-error">
+          <p className="str-video__embedded-error__message">
+            An error occurred while initializing the client. Please try again
+            later.
+          </p>
+        </div>
+      </StreamTheme>
+    );
+  }
+
+  if (!call || !client || !noiseCancellationReady) {
+    return (
+      <StreamTheme className="str-video__embedded">
+        <LoadingIndicator className="str-video__embedded-loading" />
+      </StreamTheme>
+    );
+  }
+
+  return (
+    <StreamVideo client={client}>
+      <StreamCall call={call}>
+        <ConfigurationProvider layout={layout} onError={onErrorStable}>
+          <BackgroundFiltersProvider>
+            <NoiseCancellationWrapper noiseCancellation={noiseCancellation}>
+              <StreamTheme className="str-video__embedded" style={theme}>
+                {children}
+              </StreamTheme>
+            </NoiseCancellationWrapper>
+          </BackgroundFiltersProvider>
+        </ConfigurationProvider>
+      </StreamCall>
+    </StreamVideo>
+  );
+};

package/src/embedded/call/CallControls.tsx

@@ -0,0 +1,124 @@
+import { OwnCapability } from '@stream-io/video-client';
+import {
+  Restricted,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import {
+  CancelCallConfirmButton,
+  CompositeButton,
+  DeviceSelectorAudioInput,
+  DeviceSelectorAudioOutput,
+  Icon,
+  MicCaptureErrorNotification,
+  ReactionsButton,
+  RecordCallConfirmationButton,
+  ScreenShareButton,
+  ToggleAudioPublishingButton,
+  ToggleVideoPublishingButton,
+  WithTooltip,
+} from '../../components';
+
+import { useCallDuration } from '../hooks';
+import { CameraMenuWithBlur } from '../shared';
+
+interface CallControlsProps {
+  showParticipants: boolean;
+  onToggleParticipants: () => void;
+}
+
+/**
+ * Renders the active call control bar
+ */
+export const CallControls = ({
+  showParticipants,
+  onToggleParticipants,
+}: CallControlsProps) => {
+  const { t } = useI18n();
+  const { useCallSession } = useCallStateHooks();
+  const session = useCallSession();
+  const startedAt = session?.started_at;
+  const { elapsed } = useCallDuration(startedAt);
+
+  return (
+    <div className="str-video__embedded-call-controls str-video__call-controls">
+      <div className="str-video__call-controls--group str-video__call-controls--options">
+        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
+          <div className="str-video__embedded-mobile">
+            <ReactionsButton />
+          </div>
+        </Restricted>
+        {startedAt && (
+          <div className="str-video__embedded-call-duration str-video__embedded-desktop">
+            <Icon
+              icon="verified"
+              className="str-video__embedded-call-duration__icon"
+            />
+            <span className="str-video__embedded-call-duration__time">
+              {elapsed}
+            </span>
+          </div>
+        )}
+      </div>
+      <div className="str-video__call-controls--group str-video__call-controls--media">
+        <Restricted
+          requiredGrants={[OwnCapability.SEND_AUDIO]}
+          hasPermissionsOnly
+        >
+          <MicCaptureErrorNotification>
+            <ToggleAudioPublishingButton
+              Menu={
+                <>
+                  <DeviceSelectorAudioInput
+                    visualType="list"
+                    title={t('Microphone')}
+                  />
+                  <DeviceSelectorAudioOutput
+                    visualType="list"
+                    title={t('Speaker')}
+                  />
+                </>
+              }
+              menuPlacement="top"
+            />
+          </MicCaptureErrorNotification>
+        </Restricted>
+        <Restricted
+          requiredGrants={[OwnCapability.SEND_VIDEO]}
+          hasPermissionsOnly
+        >
+          <ToggleVideoPublishingButton
+            Menu={<CameraMenuWithBlur />}
+            menuPlacement="top"
+          />
+        </Restricted>
+        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
+          <div className="str-video__embedded-desktop">
+            <ReactionsButton />
+          </div>
+        </Restricted>
+        <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
+          <div className="str-video__embedded-desktop">
+            <ScreenShareButton />
+          </div>
+        </Restricted>
+        <RecordCallConfirmationButton />
+        <div className="str-video__embedded-desktop">
+          <CancelCallConfirmButton />
+        </div>
+      </div>
+      <div className="str-video__call-controls--group str-video__call-controls--sidebar">
+        <WithTooltip title={t('Participants')}>
+          <CompositeButton
+            active={showParticipants}
+            aria-label={t('Participants')}
+            aria-pressed={showParticipants}
+            onClick={onToggleParticipants}
+          >
+            <Icon icon="participants" />
+          </CompositeButton>
+        </WithTooltip>
+      </div>
+    </div>
+  );
+};

package/src/embedded/call/CallHeader.tsx

@@ -0,0 +1,30 @@
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallDuration } from '../hooks';
+import { CancelCallConfirmButton, Icon } from '../../components';
+
+/**
+ * Renders the call header bar with elapsed time and leave/end call button.
+ */
+export const CallHeader = () => {
+  const { useCallSession } = useCallStateHooks();
+  const session = useCallSession();
+  const startedAt = session?.started_at;
+  const { elapsed } = useCallDuration(startedAt);
+
+  return (
+    <div className="str-video__embedded-call-header">
+      {startedAt && (
+        <div className="str-video__embedded-call-duration">
+          <Icon
+            icon="verified"
+            className="str-video__embedded-call-duration__icon"
+          />
+          <span className="str-video__embedded-call-duration__time">
+            {elapsed}
+          </span>
+        </div>
+      )}
+      <CancelCallConfirmButton />
+    </div>
+  );
+};

package/src/embedded/call/CallLayout.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useState } from 'react';
+import clsx from 'clsx';
+import { OwnCapability } from '@stream-io/video-client';
+import { Restricted } from '@stream-io/video-react-bindings';
+import {
+  CallParticipantsList,
+  PermissionRequests,
+  SpeakingWhileMutedNotification,
+} from '../../components';
+
+import { useLayout, useWakeLock } from '../hooks';
+import { ConnectionNotification } from '../shared';
+import { CallControls } from './CallControls';
+import { CallHeader } from './CallHeader';
+
+/**
+ * CallLayout renders the active call experience with layout, controls and sidebar.
+ */
+export const CallLayout = () => {
+  useWakeLock();
+  const [showParticipants, setShowParticipants] = useState(false);
+
+  const { Component: LayoutComponent, props: layoutProps } = useLayout();
+
+  const handleToggleParticipants = useCallback(() => {
+    setShowParticipants((prev) => !prev);
+  }, []);
+
+  return (
+    <div className="str-video__embedded-call">
+      <ConnectionNotification />
+      <PermissionRequests />
+      <div className="str-video__embedded-notifications">
+        <Restricted
+          requiredGrants={[OwnCapability.SEND_AUDIO]}
+          hasPermissionsOnly
+        >
+          <SpeakingWhileMutedNotification />
+        </Restricted>
+      </div>
+      <CallHeader />
+      <div className="str-video__embedded-layout">
+        <div className="str-video__embedded-layout__stage">
+          <LayoutComponent {...layoutProps} />
+        </div>
+
+        <div
+          className={clsx(
+            'str-video__embedded-sidebar',
+            showParticipants && 'str-video__embedded-sidebar--open',
+          )}
+        >
+          {showParticipants && (
+            <div className="str-video__embedded-participants">
+              <CallParticipantsList onClose={handleToggleParticipants} />
+            </div>
+          )}
+        </div>
+      </div>
+      <CallControls
+        showParticipants={showParticipants}
+        onToggleParticipants={handleToggleParticipants}
+      />
+    </div>
+  );
+};

package/src/embedded/call/CallStateRouter.tsx

@@ -0,0 +1,56 @@
+import { CallingState } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+import { LoadingIndicator } from '../../components';
+import { CallFeedback, JoinError, Lobby } from '../shared';
+import { CallLayout } from './CallLayout';
+import { useCallback, useState } from 'react';
+import { useEmbeddedConfiguration } from '../context';
+
+/**
+ * CallStateRouter is the state decider component that manages view state transitions.
+ */
+export const CallStateRouter = () => {
+  const call = useCall();
+
+  const { useCallCallingState, useLocalParticipant } = useCallStateHooks();
+  const localParticipant = useLocalParticipant();
+  const callingState = useCallCallingState();
+  const { onError } = useEmbeddedConfiguration();
+
+  const [joinError, setJoinError] = useState(false);
+  const handleJoin = useCallback(async () => {
+    if (!call) return;
+
+    setJoinError(false);
+    try {
+      if (call.state.callingState !== CallingState.JOINED) {
+        await call.join();
+      }
+    } catch (e) {
+      onError?.(e);
+      setJoinError(true);
+    }
+  }, [call, onError]);
+
+  if (joinError) {
+    return <JoinError onJoin={handleJoin} />;
+  }
+
+  if (
+    callingState === CallingState.IDLE ||
+    callingState === CallingState.UNKNOWN
+  ) {
+    return <Lobby onJoin={handleJoin} />;
+  }
+
+  if (callingState === CallingState.JOINING && !localParticipant) {
+    return <LoadingIndicator className="str-video__embedded-loading" />;
+  }
+
+  if (callingState === CallingState.LEFT) {
+    return <CallFeedback onJoin={handleJoin} />;
+  }
+
+  return <CallLayout />;
+};

package/src/embedded/call/EmbeddedCall.tsx

@@ -0,0 +1,14 @@
+import type { EmbeddedMeetingProps } from '../types';
+import { EmbeddedClientProvider } from '../EmbeddedClientProvider';
+import { CallStateRouter } from './CallStateRouter';
+
+/**
+ * Drop-in video call component that renders a lobby, active call,
+ * and post-call feedback screen. Handles client and call setup internally.
+ */
+export const EmbeddedCall = ({ children, ...props }: EmbeddedMeetingProps) => (
+  <EmbeddedClientProvider {...props}>
+    <CallStateRouter />
+    {children}
+  </EmbeddedClientProvider>
+);

package/src/embedded/call/index.ts

@@ -0,0 +1 @@
+export * from './EmbeddedCall';

package/src/embedded/context/ConfigurationContext.tsx

@@ -0,0 +1,36 @@
+import { createContext, useContext, useMemo, PropsWithChildren } from 'react';
+import type { LayoutOption } from '../types';
+
+export interface EmbeddedConfiguration {
+  layout?: LayoutOption;
+  onError?: (error: any) => void;
+}
+
+const defaultConfiguration: EmbeddedConfiguration = {
+  layout: 'SpeakerTop',
+  onError: undefined,
+};
+
+const ConfigurationContext =
+  createContext<EmbeddedConfiguration>(defaultConfiguration);
+
+export const ConfigurationProvider = ({
+  children,
+  layout = 'SpeakerTop',
+  onError,
+}: PropsWithChildren<EmbeddedConfiguration>) => {
+  const value = useMemo(() => ({ layout, onError }), [layout, onError]);
+
+  return (
+    <ConfigurationContext.Provider value={value}>
+      {children}
+    </ConfigurationContext.Provider>
+  );
+};
+
+/**
+ * Hook to access embedded configuration settings.
+ */
+export const useEmbeddedConfiguration = () => {
+  return useContext(ConfigurationContext);
+};

package/src/embedded/context/index.ts

@@ -0,0 +1 @@
+export * from './ConfigurationContext';

package/src/embedded/hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './useInitializeVideoClient';
+export * from './useInitializeCall';
+export * from './useLayout';
+export * from './useNoiseCancellationLoader';
+export * from './useWakeLock';
+export * from './useCallDuration';
+export * from './useEmbeddedClient';
+export * from './useIsLivestreamPaused';

package/src/embedded/hooks/useCallDuration.ts

@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useState } from 'react';
+
+const formatElapsed = (seconds: number) => {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+};
+
+/**
+ * Returns a live-updating formatted elapsed duration string
+ * computed from the given start date.
+ */
+export const useCallDuration = (startedAt?: string) => {
+  const startedAtDate = useMemo(
+    () => (startedAt ? new Date(startedAt).getTime() : undefined),
+    [startedAt],
+  );
+
+  const [elapsed, setElapsed] = useState('');
+
+  useEffect(() => {
+    if (!startedAtDate) return;
+
+    const update = () => {
+      const seconds = Math.max(
+        0,
+        Math.floor((Date.now() - startedAtDate) / 1000),
+      );
+      setElapsed(formatElapsed(seconds));
+    };
+
+    update();
+    const interval = setInterval(update, 1000);
+    return () => clearInterval(interval);
+  }, [startedAtDate]);
+
+  return { elapsed };
+};

package/src/embedded/hooks/useEmbeddedClient.ts

@@ -0,0 +1,64 @@
+import { useEffect } from 'react';
+import { useInitializeVideoClient } from './useInitializeVideoClient';
+import { useInitializeCall } from './useInitializeCall';
+import { useNoiseCancellationLoader } from './useNoiseCancellationLoader';
+import type { EmbeddedUser } from '../types';
+import { LogLevel, TokenProvider } from '@stream-io/video-client';
+
+export interface UseEmbeddedClientProps {
+  apiKey: string;
+  user: EmbeddedUser;
+  callId: string;
+  callType: string;
+  token?: string;
+  tokenProvider?: TokenProvider;
+  logLevel?: LogLevel;
+  handleError: (error: any) => void;
+}
+
+/**
+ * Hook that initializes the Stream Video client and call.
+ * Combines useInitializeVideoClient, useInitializeCall, and useNoiseCancellationLoader.
+ */
+export const useEmbeddedClient = ({
+  apiKey,
+  user,
+  callId,
+  callType,
+  token,
+  tokenProvider,
+  logLevel,
+  handleError,
+}: UseEmbeddedClientProps) => {
+  const client = useInitializeVideoClient({
+    apiKey,
+    user,
+    token,
+    tokenProvider,
+    logLevel,
+    handleError,
+  });
+
+  const call = useInitializeCall({
+    client,
+    callType,
+    callId,
+    handleError,
+  });
+
+  useEffect(() => {
+    if (!call) return;
+
+    call.tracer.trace('embedded.initialized', { callType });
+  }, [call, callType]);
+
+  const { noiseCancellation, ready: noiseCancellationReady } =
+    useNoiseCancellationLoader(call);
+
+  return {
+    client,
+    call,
+    noiseCancellation,
+    noiseCancellationReady,
+  };
+};