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

package/src/embedded/livestream/host/HostStateRouter.tsx

@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react';
+import { CallingState } from '@stream-io/video-client';
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+
+import { HostLayout } from './HostLayout';
+import { LoadingIndicator } from '../../../components';
+import { CallFeedback, JoinError, Lobby } from '../../shared';
+import { useEmbeddedConfiguration } from '../../context';
+
+export const HostStateRouter = () => {
+  const call = useCall();
+  const { t } = useI18n();
+  const { onError } = useEmbeddedConfiguration();
+  const {
+    useCallCallingState,
+    useIsCallLive,
+    useCallSettings,
+    useLocalParticipant,
+  } = useCallStateHooks();
+  const callingState = useCallCallingState();
+  const isLive = useIsCallLive();
+  const localParticipant = useLocalParticipant();
+  const settings = useCallSettings();
+  const isBackstageEnabled = settings?.backstage?.enabled ?? true;
+
+  const [joinError, setJoinError] = useState(false);
+  const handleJoin = useCallback(async () => {
+    if (!call) return;
+
+    setJoinError(false);
+    try {
+      if (callingState !== CallingState.JOINED) {
+        await call.join();
+      }
+    } catch (err) {
+      onError?.(err);
+      setJoinError(true);
+    }
+  }, [call, onError, callingState]);
+
+  const handleGoLive = useCallback(async () => {
+    if (!call) return;
+    try {
+      await call.goLive();
+    } catch (err) {
+      onError?.(err);
+    }
+  }, [call, onError]);
+
+  const handleStopLive = useCallback(async () => {
+    if (!call) return;
+    try {
+      await call.stopLive();
+    } catch (err) {
+      onError?.(err);
+    }
+  }, [call, onError]);
+
+  if (joinError) {
+    return <JoinError onJoin={handleJoin} />;
+  }
+
+  if (
+    callingState === CallingState.IDLE ||
+    callingState === CallingState.UNKNOWN
+  ) {
+    return (
+      <Lobby
+        onJoin={handleJoin}
+        title={
+          isBackstageEnabled
+            ? t('Prepare your livestream')
+            : t('Ready to go live')
+        }
+        joinLabel={isBackstageEnabled ? t('Enter Backstage') : t('Go Live')}
+      />
+    );
+  }
+
+  if (callingState === CallingState.JOINING && !localParticipant) {
+    return <LoadingIndicator className="str-video__embedded-loading" />;
+  }
+
+  if (callingState === CallingState.LEFT) {
+    return <CallFeedback onJoin={handleJoin} />;
+  }
+
+  return (
+    <HostLayout
+      isLive={isLive}
+      isBackstageEnabled={isBackstageEnabled}
+      onGoLive={handleGoLive}
+      onStopLive={handleStopLive}
+    />
+  );
+};

package/src/embedded/livestream/index.ts

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

package/src/embedded/livestream/viewer/ViewerLayout.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useState } from 'react';
+import clsx from 'clsx';
+import { OwnCapability } from '@stream-io/video-client';
+import {
+  Restricted,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { useCallDuration, useLayout, useWakeLock } from '../../hooks';
+import {
+  CallParticipantsList,
+  CancelCallConfirmButton,
+  CompositeButton,
+  DeviceSelectorAudioInput,
+  DeviceSelectorAudioOutput,
+  Icon,
+  MicCaptureErrorNotification,
+  ReactionsButton,
+  ToggleAudioPublishingButton,
+  ToggleVideoPublishingButton,
+  WithTooltip,
+} from '../../../components';
+import {
+  CameraMenuWithBlur,
+  ConnectionNotification,
+  ViewersCount,
+} from '../../shared';
+
+export const ViewerLayout = () => {
+  useWakeLock();
+  const { t } = useI18n();
+
+  const { useParticipantCount, useCallSession } = useCallStateHooks();
+  const participantCount = useParticipantCount();
+  const session = useCallSession();
+  const { elapsed } = useCallDuration(session?.live_started_at);
+  const { Component: LayoutComponent, props: layoutProps } = useLayout();
+  const [showParticipants, setShowParticipants] = useState(false);
+
+  const handleCloseParticipants = useCallback(() => {
+    setShowParticipants(false);
+  }, []);
+
+  const handleToggleParticipants = useCallback(() => {
+    setShowParticipants((prev) => !prev);
+  }, []);
+
+  return (
+    <div className="str-video__embedded-call str-video__embedded-livestream">
+      <ConnectionNotification />
+      <div className="str-video__embedded-call-header">
+        <div className="str-video__embedded-livestream-duration">
+          <span className="str-video__embedded-livestream-duration__live-badge">
+            {t('Live')}
+          </span>
+          <ViewersCount count={participantCount} />
+          {elapsed && (
+            <span className="str-video__embedded-livestream-duration__elapsed">
+              {elapsed}
+            </span>
+          )}
+        </div>
+        <CancelCallConfirmButton />
+      </div>
+      <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={handleCloseParticipants} />
+            </div>
+          )}
+        </div>
+      </div>
+      <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>
+          <div className="str-video__embedded-desktop">
+            <div className="str-video__embedded-livestream-duration">
+              <span className="str-video__embedded-livestream-duration__live-badge">
+                {t('Live')}
+              </span>
+              <ViewersCount count={participantCount} />
+              {elapsed && (
+                <span className="str-video__embedded-livestream-duration__elapsed">
+                  {elapsed}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="str-video__call-controls--group str-video__call-controls--media">
+          <Restricted
+            requiredGrants={[OwnCapability.SEND_AUDIO]}
+            hasPermissionsOnly
+          >
+            <MicCaptureErrorNotification>
+              <ToggleAudioPublishingButton
+                Menu={
+                  <>
+                    <DeviceSelectorAudioOutput
+                      visualType="list"
+                      title={t('Speaker')}
+                    />
+                    <DeviceSelectorAudioInput
+                      visualType="list"
+                      title={t('Microphone')}
+                    />
+                  </>
+                }
+                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>
+          <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={handleToggleParticipants}
+            >
+              <Icon icon="participants" />
+            </CompositeButton>
+          </WithTooltip>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/embedded/livestream/viewer/ViewerLobby.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { Icon } from '../../../components';
+import { ViewersCount } from '../../shared';
+import { OwnCapability } from '@stream-io/video-client';
+
+const checkCanJoinEarly = (
+  startsAt: Date | undefined,
+  joinAheadTimeSeconds: number | undefined,
+) => {
+  if (!startsAt) return false;
+  const now = Date.now();
+  const earliestJoin = +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
+  return now >= earliestJoin && now < +startsAt;
+};
+
+export type ViewerLobbyProps = {
+  onJoin: () => Promise<void>;
+};
+
+export const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {
+  const { t } = useI18n();
+  const {
+    useCallStartsAt,
+    useCallEndedAt,
+    useHasPermissions,
+    useParticipantCount,
+    useIsCallLive,
+    useCallSettings,
+  } = useCallStateHooks();
+
+  const startsAt = useCallStartsAt();
+  const endedAt = useCallEndedAt();
+  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);
+
+  const participantCount = useParticipantCount();
+  const isLive = useIsCallLive();
+  const settings = useCallSettings();
+  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+
+  const [autoJoin, setAutoJoin] = useState(false);
+  const [startsAtPassed, setStartsAtPassed] = useState(
+    () => !!startsAt && startsAt.getTime() < Date.now(),
+  );
+  const [canJoinEarly, setCanJoinEarly] = useState(() =>
+    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),
+  );
+
+  const canJoin = (isLive || canJoinEarly) && (!endedAt || canJoinEndedCall);
+
+  useEffect(() => {
+    if (canJoin && autoJoin) {
+      onJoin();
+    }
+  }, [canJoin, autoJoin, onJoin]);
+
+  useEffect(() => {
+    if (!canJoinEarly) {
+      const handle = setInterval(() => {
+        setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+      }, 1000);
+
+      return () => clearInterval(handle);
+    }
+  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+
+  useEffect(() => {
+    if (!startsAt || startsAtPassed) return;
+
+    const check = () => {
+      if (startsAt.getTime() < Date.now()) {
+        setStartsAtPassed(true);
+      }
+    };
+
+    const interval = setInterval(check, 1000);
+    return () => clearInterval(interval);
+  }, [startsAt, startsAtPassed]);
+
+  const getStartsAtMessage = () => {
+    if (!startsAt) return null;
+
+    if (startsAtPassed) {
+      return t('Livestream starts soon');
+    }
+
+    return t('Livestream starts at {{ time }}', {
+      time: startsAt.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+      }),
+    });
+  };
+
+  return (
+    <div className="str-video__embedded-viewer-lobby">
+      <div className="str-video__embedded-viewer-lobby__content">
+        <div className="str-video__embedded-viewer-lobby__icon">
+          <Icon icon="streaming" />
+        </div>
+
+        <h2 className="str-video__embedded-viewer-lobby__title">
+          {canJoin
+            ? t('Stream is ready!')
+            : t('Waiting for the livestream to start')}
+        </h2>
+
+        {!canJoin && getStartsAtMessage() && (
+          <p className="str-video__embedded-viewer-lobby__starts-at">
+            {getStartsAtMessage()}
+          </p>
+        )}
+
+        {participantCount > 0 && <ViewersCount count={participantCount} />}
+
+        <div className="str-video__embedded-viewer-lobby__actions">
+          {canJoin ? (
+            <button className="str-video__button" onClick={onJoin}>
+              {t('Join Stream')}
+            </button>
+          ) : (
+            <label className="str-video__embedded-viewer-lobby__auto-join">
+              <input
+                type="checkbox"
+                checked={autoJoin}
+                onChange={(e) => setAutoJoin(e.target.checked)}
+              />
+              <span>{t('Join automatically when stream starts')}</span>
+            </label>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/embedded/livestream/viewer/ViewerStateRouter.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react';
+import { CallingState, OwnCapability } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+import { ViewerLobby } from './ViewerLobby';
+import { ViewerLayout } from './ViewerLayout';
+import { LoadingIndicator } from '../../../components';
+import { CallFeedback, JoinError } from '../../shared';
+import { useEmbeddedConfiguration } from '../../context';
+import { useIsLivestreamPaused } from '../../hooks';
+
+export const ViewerStateRouter = () => {
+  const call = useCall();
+  const { onError } = useEmbeddedConfiguration();
+
+  const {
+    useCallCallingState,
+    useCallEndedAt,
+    useHasPermissions,
+    useLocalParticipant,
+  } = useCallStateHooks();
+  const callingState = useCallCallingState();
+  const localParticipant = useLocalParticipant();
+  const endedAt = useCallEndedAt();
+  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);
+
+  const isLivestreamPaused = useIsLivestreamPaused();
+  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]);
+
+  useEffect(() => {
+    if (!call || callingState !== CallingState.LEFT) return;
+
+    return call.on('call.live_started', () => {
+      call.get().catch((e) => {
+        onError?.(e);
+      });
+    });
+  }, [call, callingState, onError]);
+
+  if (joinError) {
+    return <JoinError onJoin={handleJoin} />;
+  }
+
+  switch (callingState) {
+    case CallingState.IDLE:
+    case CallingState.UNKNOWN:
+      return <ViewerLobby onJoin={handleJoin} />;
+
+    case CallingState.JOINING:
+      if (!localParticipant) {
+        return <LoadingIndicator className="str-video__embedded-loading" />;
+      }
+      break;
+
+    case CallingState.LEFT: {
+      if (isLivestreamPaused) {
+        return <ViewerLobby onJoin={handleJoin} />;
+      }
+
+      return (
+        <CallFeedback
+          onJoin={!endedAt || canJoinEndedCall ? handleJoin : undefined}
+        />
+      );
+    }
+  }
+
+  return <ViewerLayout />;
+};

package/src/embedded/shared/BlurToggleButton/BlurToggleButton.tsx

@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import {
+  DeviceSelectorVideo,
+  Icon,
+  useBackgroundFilters,
+} from '../../../components';
+
+export const BlurToggleButton = () => {
+  const { t } = useI18n();
+  const { useCameraState } = useCallStateHooks();
+  const { isMute } = useCameraState();
+
+  const {
+    isSupported,
+    isReady,
+    isLoading,
+    backgroundFilter,
+    applyBackgroundBlurFilter,
+    disableBackgroundFilter,
+  } = useBackgroundFilters();
+
+  const isBlurred = backgroundFilter === 'blur';
+  const isDisabled = !isReady || isLoading || isMute;
+
+  const handleClick = useCallback(() => {
+    if (isDisabled) return;
+
+    if (isBlurred) {
+      disableBackgroundFilter();
+    } else {
+      applyBackgroundBlurFilter('high');
+    }
+  }, [
+    applyBackgroundBlurFilter,
+    disableBackgroundFilter,
+    isBlurred,
+    isDisabled,
+  ]);
+
+  const getLabel = () => {
+    if (isLoading) return t('Applying...');
+    return isBlurred ? t('Disable blur') : t('Blur background');
+  };
+
+  if (!isSupported) return null;
+
+  return (
+    <button
+      type="button"
+      className={clsx(
+        'str-video__embedded-blur-toggle',
+        isBlurred && 'str-video__embedded-blur-toggle--active',
+      )}
+      disabled={isDisabled}
+      aria-pressed={isBlurred}
+      onClick={handleClick}
+    >
+      <Icon icon="blur-icon" />
+      <span>{getLabel()}</span>
+    </button>
+  );
+};
+
+export const CameraMenuWithBlur = () => {
+  return (
+    <>
+      <DeviceSelectorVideo visualType="list" />
+      <div className="str-video__embedded-blur-toggle-container">
+        <BlurToggleButton />
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+import { Icon } from '../../../components';
+
+interface CallEndedScreenProps {
+  onJoin?: () => void;
+  onFeedback: () => void;
+}
+
+export const CallEndedScreen = ({
+  onJoin,
+  onFeedback,
+}: CallEndedScreenProps) => {
+  const { t } = useI18n();
+
+  return (
+    <div className="str-video__embedded-call-feedback__container">
+      <h2 className="str-video__embedded-call-feedback__title">
+        {t('Call ended')}
+      </h2>
+      <div className="str-video__embedded-call-feedback__ended-actions">
+        {onJoin && (
+          <>
+            <div className="str-video__embedded-call-feedback__ended-column">
+              <p className="str-video__embedded-call-feedback__ended-label">
+                {t('Left by mistake?')}
+              </p>
+              <button
+                type="button"
+                className="str-video__embedded-call-feedback__ended-button"
+                onClick={onJoin}
+              >
+                <Icon icon="login" />
+                {t('Rejoin call')}
+              </button>
+            </div>
+            <div className="str-video__embedded-call-feedback__ended-divider" />
+          </>
+        )}
+        <div className="str-video__embedded-call-feedback__ended-column">
+          <p className="str-video__embedded-call-feedback__ended-label">
+            {t('Help us improve')}
+          </p>
+          <button
+            type="button"
+            className="str-video__embedded-call-feedback__ended-button"
+            onClick={onFeedback}
+          >
+            <Icon icon="feedback" />
+            {t('Leave feedback')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+import { CallEndedScreen } from './CallEndedScreen';
+import { RatingScreen } from './RatingScreen';
+import { ThankYouScreen } from './ThankYouScreen';
+import { useEmbeddedConfiguration } from '../../context';
+
+export interface CallFeedbackProps {
+  onJoin?: () => void;
+}
+
+type FeedbackState = 'ended' | 'rating' | 'submitted';
+
+export const CallFeedback = ({ onJoin }: CallFeedbackProps) => {
+  const call = useCall();
+  const { onError } = useEmbeddedConfiguration();
+  const [state, setState] = useState<FeedbackState>('ended');
+
+  const onFeedback = useCallback(() => setState('rating'), []);
+
+  const handleSubmit = useCallback(
+    async (rating: number, message: string) => {
+      if (!call) return;
+
+      const clampedRating = Math.min(Math.max(1, rating), 5);
+      try {
+        await call.submitFeedback(clampedRating, {
+          reason: message,
+          custom: { message },
+        });
+      } catch (err) {
+        onError?.(err);
+      } finally {
+        setState('submitted');
+      }
+    },
+    [call, onError],
+  );
+
+  return (
+    <div className="str-video__embedded-call-feedback">
+      {state === 'submitted' ? (
+        <ThankYouScreen />
+      ) : state === 'rating' ? (
+        <RatingScreen onSubmit={handleSubmit} />
+      ) : (
+        <CallEndedScreen onJoin={onJoin} onFeedback={onFeedback} />
+      )}
+    </div>
+  );
+};