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

package/src/embedded/shared/CallFeedback/RatingScreen.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { StarRating } from './StarRating';
+
+interface RatingScreenProps {
+  onSubmit: (rating: number, message: string) => void;
+}
+
+export const RatingScreen = ({ onSubmit }: RatingScreenProps) => {
+  const { t } = useI18n();
+  const [rating, setRating] = useState(0);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = () => {
+    if (rating > 0) onSubmit(rating, message);
+  };
+
+  return (
+    <div className="str-video__embedded-call-feedback__container">
+      <h2 className="str-video__embedded-call-feedback__title">
+        {t('Share your feedback')}
+      </h2>
+
+      <StarRating value={rating} onChange={setRating} />
+
+      <textarea
+        aria-label={t('Feedback message')}
+        className="str-video__embedded-call-feedback__textarea"
+        placeholder={t('Tell us about your experience...')}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        rows={3}
+      />
+
+      <div className="str-video__embedded-call-feedback__actions">
+        <button
+          type="button"
+          className="str-video__button"
+          onClick={handleSubmit}
+          disabled={rating === 0}
+        >
+          {t('Submit feedback')}
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/embedded/shared/CallFeedback/StarRating.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { Icon } from '../../../components';
+
+interface StarRatingProps {
+  value: number;
+  onChange: (rating: number) => void;
+}
+
+export const StarRating = ({ value, onChange }: StarRatingProps) => {
+  const { t } = useI18n();
+  const [hovered, setHovered] = useState(0);
+  const displayValue = hovered || value;
+
+  const getStarClasses = (star: number) =>
+    clsx(
+      'str-video__embedded-call-feedback__star',
+      star <= displayValue && 'str-video__embedded-call-feedback__star--active',
+    );
+
+  return (
+    <div className="str-video__embedded-call-feedback__rating-section">
+      <p className="str-video__embedded-call-feedback__rating-label">
+        {t('How was your call quality?')}
+      </p>
+      <div
+        className="str-video__embedded-call-feedback__stars"
+        onMouseLeave={() => setHovered(0)}
+      >
+        {[1, 2, 3, 4, 5].map((star) => (
+          <button
+            key={star}
+            type="button"
+            className={getStarClasses(star)}
+            onClick={() => onChange(star)}
+            onMouseEnter={() => setHovered(star)}
+            aria-label={t('Rate {{ count }} star', { count: star })}
+          >
+            <Icon icon="star-filled" />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/embedded/shared/CallFeedback/ThankYouScreen.tsx

@@ -0,0 +1,19 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+import { Icon } from '../../../components';
+
+export const ThankYouScreen = () => {
+  const { t } = useI18n();
+  return (
+    <div className="str-video__embedded-call-feedback__container">
+      <div className="str-video__embedded-call-feedback__checkmark">
+        <Icon icon="checkmark" />
+      </div>
+      <h2 className="str-video__embedded-call-feedback__title">
+        {t('Thank you!')}
+      </h2>
+      <p className="str-video__embedded-call-feedback__subtitle">
+        {t('Your feedback helps improve call quality.')}
+      </p>
+    </div>
+  );
+};

package/src/embedded/shared/ConnectionNotification/ConnectionNotification.tsx

@@ -0,0 +1,59 @@
+import { CallingState } from '@stream-io/video-client';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { LoadingIndicator, Notification } from '../../../components';
+
+export const ConnectionNotification = () => {
+  const { t } = useI18n();
+  const { useCallCallingState } = useCallStateHooks();
+  const callingState = useCallCallingState();
+
+  const isOffline = callingState === CallingState.OFFLINE;
+  const isReconnecting = callingState === CallingState.RECONNECTING;
+  const isMigrating = callingState === CallingState.MIGRATING;
+  const isJoining = callingState === CallingState.JOINING;
+  const hasFailedToRecover = callingState === CallingState.RECONNECTING_FAILED;
+
+  const showError = isOffline || hasFailedToRecover;
+  const showLoading = isJoining || isReconnecting || isMigrating;
+
+  if (showError) {
+    return (
+      <div className="str-video__embedded-connection-notification">
+        <Notification
+          isVisible
+          placement="bottom"
+          message={
+            isOffline
+              ? t('You are offline. Check your internet connection.')
+              : t('Failed to restore connection. Please try again.')
+          }
+        />
+      </div>
+    );
+  }
+
+  if (showLoading) {
+    return (
+      <div className="str-video__embedded-connection-notification">
+        <Notification
+          isVisible
+          placement="bottom"
+          iconClassName={null}
+          message={
+            <LoadingIndicator
+              text={
+                isMigrating
+                  ? t('Migrating...')
+                  : isJoining
+                    ? t('Joining')
+                    : t('Reconnecting...')
+              }
+            />
+          }
+        />
+      </div>
+    );
+  }
+
+  return null;
+};

package/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.tsx

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { DefaultParticipantViewUI } from '../../../core';
+import { useParticipantViewContext } from '../../../core';
+
+export const EmbeddedParticipantViewUI = () => {
+  const { participantViewElement, trackType } = useParticipantViewContext();
+
+  const handleDoubleClick = useCallback(() => {
+    if (!participantViewElement) return;
+    if (typeof participantViewElement.requestFullscreen === 'undefined') return;
+
+    if (!document.fullscreenElement) {
+      participantViewElement.requestFullscreen().catch(console.error);
+    } else {
+      document.exitFullscreen().catch(console.error);
+    }
+  }, [participantViewElement]);
+
+  return (
+    <div
+      className={clsx(
+        'str-video__embedded-participant-view-ui',
+        trackType === 'screenShareTrack' &&
+          'str-video__embedded-participant-view-ui--screen-share',
+      )}
+      onDoubleClick={handleDoubleClick}
+    >
+      <DefaultParticipantViewUI />
+    </div>
+  );
+};

package/src/embedded/shared/JoinError/JoinError.tsx

@@ -0,0 +1,27 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+import { Icon } from '../../../components';
+
+interface JoinErrorProps {
+  onJoin: () => void;
+}
+
+export const JoinError = ({ onJoin }: JoinErrorProps) => {
+  const { t } = useI18n();
+
+  return (
+    <div className="str-video__embedded-join-error">
+      <h2 className="str-video__embedded-join-error__title">
+        {t('Failed to join the call')}
+      </h2>
+      <p className="str-video__embedded-join-error__message">
+        {t(
+          "We couldn't connect to the server. Please check your connection and try again.",
+        )}
+      </p>
+      <button type="button" className="str-video__button" onClick={onJoin}>
+        <Icon icon="login" />
+        {t('Try again')}
+      </button>
+    </div>
+  );
+};

package/src/embedded/shared/Lobby/DeviceControls.tsx

@@ -0,0 +1,54 @@
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import {
+  ToggleAudioPreviewButton,
+  ToggleVideoPreviewButton,
+  VideoPreview,
+} from '../../../components';
+import { ToggleMicButton } from './ToggleMicButton';
+import { ToggleCameraButton } from './ToggleCameraButton';
+import { DisabledDeviceButton } from './DisabledDeviceButton';
+import { DisabledVideoPreview, NoCameraPreview } from './VideoPreviewFallbacks';
+
+interface DeviceControlsProps {
+  isVideoEnabled: boolean;
+}
+
+export const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {
+  const { t } = useI18n();
+  const { useCameraState, useMicrophoneState } = useCallStateHooks();
+
+  const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+
+  return (
+    <>
+      <div className="str-video__embedded-lobby__video-preview">
+        <VideoPreview
+          DisabledVideoPreview={DisabledVideoPreview}
+          NoCameraPreview={NoCameraPreview}
+        />
+        <div className="str-video__embedded-lobby__media-toggle">
+          <ToggleAudioPreviewButton Menu={null} />
+          {isVideoEnabled && <ToggleVideoPreviewButton Menu={null} />}
+        </div>
+      </div>
+
+      <div className="str-video__embedded-lobby__media">
+        {hasMicPermission ? (
+          <ToggleMicButton />
+        ) : (
+          <DisabledDeviceButton icon="mic" label={t('Permission needed')} />
+        )}
+        {isVideoEnabled &&
+          (hasCameraPermission ? (
+            <ToggleCameraButton />
+          ) : (
+            <DisabledDeviceButton
+              icon="camera"
+              label={t('Permission needed')}
+            />
+          ))}
+      </div>
+    </>
+  );
+};

package/src/embedded/shared/Lobby/DisabledDeviceButton.tsx

@@ -0,0 +1,21 @@
+import { Icon } from '../../../components';
+
+interface DisabledDeviceButtonProps {
+  icon: string;
+  label: string;
+}
+
+export const DisabledDeviceButton = ({
+  icon,
+  label,
+}: DisabledDeviceButtonProps) => (
+  <div className="str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled">
+    <Icon
+      className="str-video__embedded-lobby__device-button-icon"
+      icon={icon}
+    />
+    <span className="str-video__embedded-lobby__device-button-label">
+      {label}
+    </span>
+  </div>
+);

package/src/embedded/shared/Lobby/Lobby.tsx

@@ -0,0 +1,59 @@
+import clsx from 'clsx';
+import {
+  useCallStateHooks,
+  useConnectedUser,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { Icon } from '../../../components';
+import { DeviceControls } from './DeviceControls';
+
+interface LobbyProps {
+  onJoin: () => void;
+  title?: string;
+  joinLabel?: string;
+}
+
+/**
+ * Lobby component - Device setup screen before joining a call.
+ */
+export const Lobby = ({ onJoin, title, joinLabel }: LobbyProps) => {
+  const { t } = useI18n();
+  const user = useConnectedUser();
+  const { useCameraState, useCallSettings } = useCallStateHooks();
+
+  const { isMute } = useCameraState();
+  const settings = useCallSettings();
+
+  const isVideoEnabled = settings?.video.enabled ?? true;
+  const resolvedJoinLabel = joinLabel ?? t('Join');
+  const resolvedTitle = title ?? t('Set up your call before joining');
+
+  return (
+    <div className="str-video__embedded-lobby">
+      <div className="str-video__embedded-lobby__content">
+        <h1 className="str-video__embedded-lobby__heading">{resolvedTitle}</h1>
+        <div
+          className={clsx(
+            'str-video__embedded-lobby__camera',
+            isMute && 'str-video__embedded-lobby__camera--off',
+          )}
+        >
+          <DeviceControls isVideoEnabled={isVideoEnabled} />
+        </div>
+
+        <div className="str-video__embedded-lobby__display-name">
+          <div className="str-video__embedded-lobby__display-name-label">
+            {t('Display name')}
+          </div>
+          <span className="str-video__embedded-lobby__display-name-value">
+            {user?.name}
+          </span>
+          <button className="str-video__button" onClick={onJoin}>
+            <Icon className="str-video__button__icon" icon="login" />
+            {resolvedJoinLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/embedded/shared/Lobby/ToggleCameraButton.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import {
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+} from '../../../components';
+import { CameraMenuWithBlur } from '../BlurToggleButton/BlurToggleButton';
+
+const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  function ToggleMenuButton(props, ref) {
+    const { useCameraState } = useCallStateHooks();
+    const { selectedDevice: selectedCamera, devices: cameras } =
+      useCameraState();
+
+    return (
+      <button ref={ref} className="str-video__embedded-lobby__device-button">
+        <Icon
+          className="str-video__embedded-lobby__device-button-icon"
+          icon="camera"
+        />
+        <span className="str-video__embedded-lobby__device-button-label">
+          {cameras?.find((c: MediaDeviceInfo) => c.deviceId === selectedCamera)
+            ?.label || 'Default'}
+        </span>
+        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />
+      </button>
+    );
+  },
+);
+
+export const ToggleCameraButton = () => {
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.MENU}
+    >
+      <CameraMenuWithBlur />
+    </MenuToggle>
+  );
+};

package/src/embedded/shared/Lobby/ToggleMicButton.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import {
+  DeviceSelectorAudioInput,
+  DeviceSelectorAudioOutput,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+} from '../../../components';
+
+const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  function ToggleMenuButton(props, ref) {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { selectedDevice: selectedMic, devices: microphones } =
+      useMicrophoneState();
+
+    return (
+      <button ref={ref} className="str-video__embedded-lobby__device-button">
+        <Icon
+          className="str-video__embedded-lobby__device-button-icon"
+          icon="mic"
+        />
+        <span className="str-video__embedded-lobby__device-button-label">
+          {microphones?.find((m: MediaDeviceInfo) => m.deviceId === selectedMic)
+            ?.label || 'Default'}
+        </span>
+        <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />
+      </button>
+    );
+  },
+);
+
+export const ToggleMicButton = () => {
+  const { t } = useI18n();
+
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.MENU}
+    >
+      <DeviceSelectorAudioInput visualType="list" title={t('Microphone')} />
+      <DeviceSelectorAudioOutput visualType="list" title={t('Speaker')} />
+    </MenuToggle>
+  );
+};

package/src/embedded/shared/Lobby/VideoPreviewFallbacks.tsx

@@ -0,0 +1,55 @@
+import {
+  useCallStateHooks,
+  useConnectedUser,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { Avatar } from '../../../components';
+
+export const DisabledVideoPreview = () => {
+  const { t } = useI18n();
+
+  const user = useConnectedUser();
+  const { useCameraState, useMicrophoneState } = useCallStateHooks();
+
+  const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+
+  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+
+  return (
+    <div className="str-video__embedded-lobby__no-permission">
+      {hasBrowserMediaPermission ? (
+        <Avatar imageSrc={user?.image} name={user?.name || user?.id} />
+      ) : (
+        t(
+          'Please grant your browser permission to access your camera and microphone.',
+        )
+      )}
+    </div>
+  );
+};
+
+export const NoCameraPreview = () => {
+  const { t } = useI18n();
+  const { useCameraState, useMicrophoneState } = useCallStateHooks();
+  const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+
+  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+
+  if (!hasBrowserMediaPermission) {
+    return (
+      <div className="str-video__embedded-lobby__no-permission">
+        {t(
+          'Please grant your browser permission to access your camera and microphone.',
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="str-video__video-preview__no-camera-preview">
+      {t('No camera found')}
+    </div>
+  );
+};

package/src/embedded/shared/ViewersCount/ViewersCount.tsx

@@ -0,0 +1,18 @@
+import { humanize } from '@stream-io/video-client';
+import { Icon } from '../../../components';
+
+interface ViewersCountProps {
+  count: number;
+}
+
+export const ViewersCount = ({ count }: ViewersCountProps) => (
+  <div className="str-video__embedded-livestream-duration__viewers">
+    <Icon
+      icon="eye"
+      className="str-video__embedded-livestream-duration__eye-icon"
+    />
+    <span className="str-video__embedded-livestream-duration__count">
+      {humanize(count)}
+    </span>
+  </div>
+);

package/src/embedded/shared/index.ts

@@ -0,0 +1,7 @@
+export * from './BlurToggleButton/BlurToggleButton';
+export * from './CallFeedback/CallFeedback';
+export * from './ConnectionNotification/ConnectionNotification';
+export * from './EmbeddedParticipantViewUI/EmbeddedParticipantViewUI';
+export * from './JoinError/JoinError';
+export * from './Lobby/Lobby';
+export * from './ViewersCount/ViewersCount';

package/src/embedded/types.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import type { LogLevel, TokenProvider } from '@stream-io/video-client';
+
+/**
+ * Available layout options.
+ */
+export type LayoutOption =
+  | 'Livestream'
+  | 'PaginatedGrid'
+  | 'SpeakerLeft'
+  | 'SpeakerRight'
+  | 'SpeakerTop'
+  | 'SpeakerBottom';
+
+/**
+ * An authenticated user with a known identity.
+ * Requires a `token` or `tokenProvider` on the component props.
+ */
+export interface EmbeddedAuthenticatedUser {
+  type?: 'authenticated';
+  id: string;
+  name?: string;
+  image?: string;
+}
+
+/**
+ * A guest user — the server generates credentials automatically.
+ */
+export interface EmbeddedGuestUser {
+  type: 'guest';
+  id: string;
+  name?: string;
+  image?: string;
+}
+
+/**
+ * An anonymous user with no identity.
+ * May optionally receive a call-scoped token via the `token` prop.
+ */
+export interface EmbeddedAnonymousUser {
+  type: 'anonymous';
+  id?: '!anon';
+  name?: string;
+  image?: string;
+}
+
+/**
+ * Discriminated union for embedded user configuration.
+ */
+export type EmbeddedUser =
+  | EmbeddedAuthenticatedUser
+  | EmbeddedGuestUser
+  | EmbeddedAnonymousUser;
+
+/**
+ * Base props shared by EmbeddedCall and EmbeddedLivestream.
+ */
+export interface EmbeddedClientBaseProps {
+  apiKey: string;
+  callType: string;
+  callId: string;
+  user: EmbeddedUser;
+  token?: string;
+  tokenProvider?: TokenProvider;
+  logLevel?: LogLevel;
+  layout?: LayoutOption;
+  theme?: Record<string, string>;
+  onError?: (error: any) => void;
+  children?: ReactNode;
+}
+
+/**
+ * Props for the EmbeddedCall component.
+ */
+export interface EmbeddedMeetingProps extends EmbeddedClientBaseProps {}
+
+/**
+ * Props for the EmbeddedLivestream component.
+ */
+export interface EmbeddedLivestreamProps extends EmbeddedClientBaseProps {}