@stream-io/video-react-sdk 1.41.0 → 1.42.0

package/dist/esm/src/wrappers/LivestreamPlayer/LivestreamPlayer.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { CallingState } from '@stream-io/video-client';
+import { useStreamVideoClient, useEffectEvent, useCallStateHooks, useCall } from '@stream-io/video-react-bindings';
+import '../../core/components/Audio/Audio.js';
+import '../../core/components/Audio/ParticipantsAudio.js';
+import '../../core/components/ParticipantView/ParticipantViewContext.js';
+import '../../components/Menu/MenuToggle.js';
+import 'clsx';
+import '../../core/components/ParticipantView/ParticipantView.js';
+import '../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import { StreamCall } from '../../core/components/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/Video.js';
+import { LivestreamLayout, BackstageLayout } from '../../core/components/CallLayout/LivestreamLayout.js';
+import '../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../core/components/CallLayout/SpeakerLayout.js';
+import '../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../core/components/CallLayout/PipLayout/Host.js';
+import '../../core/components/CallLayout/PipLayout/Grid.js';
+
+const LivestreamPlayer = (props) => {
+    const { callType, callId, children, ...restProps } = props;
+    const client = useStreamVideoClient();
+    const [call, setCall] = useState();
+    const onError = useEffectEvent(props.onError ?? (() => { }));
+    useEffect(() => {
+        if (!client)
+            return;
+        const myCall = client.call(callType, callId);
+        setCall(myCall);
+        myCall.get().catch((e) => {
+            console.error('Failed to fetch call', e);
+            onError(e);
+        });
+        return () => {
+            myCall.leave().catch((e) => {
+                console.error('Failed to leave call', e);
+            });
+            setCall(undefined);
+        };
+    }, [callId, callType, client]);
+    if (!call) {
+        return null;
+    }
+    return (jsxs(StreamCall, { call: call, children: [jsx(LivestreamCall, { ...restProps }), children] }));
+};
+const LivestreamCall = (props) => {
+    const call = useLivestreamCall(props);
+    const { useIsCallLive } = useCallStateHooks();
+    const isLive = useIsCallLive();
+    if (!call)
+        return null;
+    if (isLive) {
+        return jsx(LivestreamLayout, { ...props.layoutProps });
+    }
+    return jsx(BackstageLayout, { ...props.backstageProps });
+};
+const useLivestreamCall = (props) => {
+    const call = useCall();
+    const { useIsCallLive, useOwnCapabilities } = useCallStateHooks();
+    const canJoinLive = useIsCallLive();
+    const canJoinEarly = useCanJoinEarly();
+    const canJoinBackstage = useOwnCapabilities()?.includes('join-backstage') ?? false;
+    const canJoinAsap = canJoinLive || canJoinEarly || canJoinBackstage;
+    const joinBehavior = props.joinBehavior ?? 'asap';
+    const canJoin = (joinBehavior === 'asap' && canJoinAsap) ||
+        (joinBehavior === 'live' && canJoinLive);
+    const onError = useEffectEvent(props.onError ?? (() => { }));
+    useEffect(() => {
+        if (call && call.state.callingState === CallingState.IDLE && canJoin) {
+            call.join().catch((e) => {
+                console.error('Failed to join call', e);
+                onError(e);
+            });
+        }
+    }, [call, canJoin]);
+    return call;
+};
+const useCanJoinEarly = () => {
+    const { useCallStartsAt, useCallSettings } = useCallStateHooks();
+    const startsAt = useCallStartsAt();
+    const settings = useCallSettings();
+    const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+    const [canJoinEarly, setCanJoinEarly] = useState(() => checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    useEffect(() => {
+        if (canJoinEarly)
+            return;
+        const handle = setInterval(() => {
+            setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+        }, 1000);
+        return () => clearInterval(handle);
+    }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+    return canJoinEarly;
+};
+const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
+    if (!startsAt) {
+        return false;
+    }
+    return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
+};
+
+export { LivestreamPlayer };
+//# sourceMappingURL=LivestreamPlayer.js.map

package/dist/esm/src/wrappers/LivestreamPlayer/LivestreamPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivestreamPlayer.js","sources":["../../../../../../../src/wrappers/LivestreamPlayer/LivestreamPlayer.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport { Call, CallingState } from '@stream-io/video-client';\nimport {\n  useCall,\n  useCallStateHooks,\n  useEffectEvent,\n  useStreamVideoClient,\n} from '@stream-io/video-react-bindings';\nimport {\n  BackstageLayout,\n  BackstageLayoutProps,\n  LivestreamLayout,\n  LivestreamLayoutProps,\n  StreamCall,\n} from '../../core';\n\nexport type LivestreamPlayerProps = {\n  /**\n   * The call type. Usually `livestream`.\n   */\n  callType: string;\n  /**\n   * The call ID.\n   */\n  callId: string;\n  /**\n   * Determines when the viewer joins the call.\n   *\n   * `\"asap\"` behavior means joining the call as soon as it is possible\n   * (either the `join_ahead_time_seconds` setting allows it, or the user\n   * has the capability to join backstage).\n   *\n   * `\"live\"` behavior means joining the call when it goes live.\n   *\n   * @default \"asap\"\n   */\n  joinBehavior?: 'asap' | 'live';\n  /**\n   * The props for the {@link LivestreamLayout} component.\n   */\n  layoutProps?: LivestreamLayoutProps;\n  /**\n   * The props for the {@link BackstageLayout} component.\n   */\n  backstageProps?: BackstageLayoutProps;\n  /**\n   * Callback to handle errors while fetching or joining livestream.\n   */\n  onError?: (error: any) => void;\n};\n\nexport const LivestreamPlayer = (\n  props: PropsWithChildren<LivestreamPlayerProps>,\n) => {\n  const { callType, callId, children, ...restProps } = props;\n  const client = useStreamVideoClient();\n  const [call, setCall] = useState<Call>();\n  const onError = useEffectEvent(props.onError ?? (() => {}));\n\n  useEffect(() => {\n    if (!client) return;\n    const myCall = client.call(callType, callId);\n    setCall(myCall);\n    myCall.get().catch((e) => {\n      console.error('Failed to fetch call', e);\n      onError(e);\n    });\n    return () => {\n      myCall.leave().catch((e) => {\n        console.error('Failed to leave call', e);\n      });\n      setCall(undefined);\n    };\n  }, [callId, callType, client]);\n\n  if (!call) {\n    return null;\n  }\n\n  return (\n    <StreamCall call={call}>\n      <LivestreamCall {...restProps} />\n      {children}\n    </StreamCall>\n  );\n};\n\nconst LivestreamCall = (props: {\n  joinBehavior?: 'asap' | 'live';\n  layoutProps?: LivestreamLayoutProps;\n  backstageProps?: BackstageLayoutProps;\n  onError?: (error: any) => void;\n}) => {\n  const call = useLivestreamCall(props);\n  const { useIsCallLive } = useCallStateHooks();\n  const isLive = useIsCallLive();\n\n  if (!call) return null;\n\n  if (isLive) {\n    return <LivestreamLayout {...props.layoutProps} />;\n  }\n\n  return <BackstageLayout {...props.backstageProps} />;\n};\n\nconst useLivestreamCall = (props: {\n  joinBehavior?: 'asap' | 'live';\n  onError?: (error: any) => void;\n}) => {\n  const call = useCall();\n  const { useIsCallLive, useOwnCapabilities } = useCallStateHooks();\n  const canJoinLive = useIsCallLive();\n  const canJoinEarly = useCanJoinEarly();\n  const canJoinBackstage =\n    useOwnCapabilities()?.includes('join-backstage') ?? false;\n  const canJoinAsap = canJoinLive || canJoinEarly || canJoinBackstage;\n  const joinBehavior = props.joinBehavior ?? 'asap';\n  const canJoin =\n    (joinBehavior === 'asap' && canJoinAsap) ||\n    (joinBehavior === 'live' && canJoinLive);\n  const onError = useEffectEvent(props.onError ?? (() => {}));\n\n  useEffect(() => {\n    if (call && call.state.callingState === CallingState.IDLE && canJoin) {\n      call.join().catch((e) => {\n        console.error('Failed to join call', e);\n        onError(e);\n      });\n    }\n  }, [call, canJoin]);\n\n  return call;\n};\n\nconst useCanJoinEarly = () => {\n  const { useCallStartsAt, useCallSettings } = useCallStateHooks();\n  const startsAt = useCallStartsAt();\n  const settings = useCallSettings();\n  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;\n  const [canJoinEarly, setCanJoinEarly] = useState(() =>\n    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),\n  );\n\n  useEffect(() => {\n    if (canJoinEarly) return;\n    const handle = setInterval(() => {\n      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));\n    }, 1000);\n\n    return () => clearInterval(handle);\n  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);\n\n  return canJoinEarly;\n};\n\nconst checkCanJoinEarly = (\n  startsAt: Date | undefined,\n  joinAheadTimeSeconds: number | undefined,\n) => {\n  if (!startsAt) {\n    return false;\n  }\n\n  return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/index.cjs.js

@@ -458,6 +458,138 @@ function useDragToScroll(element, options = {}) {
     }, [element, enabled, decay, minVelocity, dragThreshold]);
 }
 
+const attachHiddenMediaSink = (stream) => {
+    const logger = videoClient.videoLoggerSystem.getLogger('useLoopbackRecording');
+    const element = document.createElement('video');
+    element.muted = true;
+    element.autoplay = true;
+    element.playsInline = true;
+    element.srcObject = stream;
+    element.play().catch((error) => {
+        logger.warn('sink element failed to play; recording may be empty', error);
+    });
+    return () => {
+        element.pause();
+        element.srcObject = null;
+    };
+};
+/** Records SFU loopback streams for pre-call testing. */
+const useLoopbackRecording = () => {
+    const call = videoReactBindings.useCall();
+    const { useCallCallingState, useParticipantCount, useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const participantCount = useParticipantCount();
+    const localParticipant = useLocalParticipant();
+    const [recordingState, setRecordingState] = react.useState('idle');
+    const recordingStateRef = react.useRef('idle');
+    const isMountedRef = react.useRef(true);
+    const awaitAbortRef = react.useRef(null);
+    const stopRef = react.useRef(null);
+    const runRef = react.useRef(null);
+    const loopbackStreams = react.useMemo(() => videoClient.getLoopbackStreams(call, localParticipant), [call, localParticipant]);
+    const updateState = react.useCallback((next) => {
+        recordingStateRef.current = next;
+        if (isMountedRef.current) {
+            setRecordingState(next);
+        }
+    }, []);
+    const stopRecording = react.useCallback(async () => {
+        const current = recordingStateRef.current;
+        if (current === 'idle')
+            return;
+        if (current === 'awaiting-streams') {
+            videoClient.videoLoggerSystem
+                .getLogger('useLoopbackRecording')
+                .debug('aborting the awaiting-streams wait');
+            awaitAbortRef.current?.abort();
+            return;
+        }
+        stopRef.current?.();
+        await runRef.current;
+    }, []);
+    const startRecording = react.useCallback(async ({ includeVideo = true, maxDurationMs = videoClient.DEFAULT_LOOPBACK_RECORDING_DURATION_MS, } = {}) => {
+        const logger = videoClient.videoLoggerSystem.getLogger('useLoopbackRecording');
+        if (!call)
+            return null;
+        if (recordingStateRef.current !== 'idle') {
+            logger.warn('a recording is already running');
+            return null;
+        }
+        if (call.state.participantCount > 1) {
+            logger.warn('cannot start recording with other participants present');
+            return null;
+        }
+        const run = async () => {
+            awaitAbortRef.current = new AbortController();
+            updateState('awaiting-streams');
+            try {
+                const tracks = await videoClient.waitForLoopbackStreams(call, {
+                    includeVideo,
+                    signal: awaitAbortRef.current.signal,
+                    timeoutMs: videoClient.LOOPBACK_STREAMS_WAIT_TIMEOUT_MS,
+                });
+                if (tracks === null) {
+                    logger.debug('loopback stream wait was aborted');
+                    return null;
+                }
+                updateState('recording');
+                const restoreAudio = videoClient.enableLoopbackAudio(tracks);
+                const stream = new MediaStream([tracks.audioTrack, tracks.videoTrack].filter((track) => !!track));
+                const detachSink = attachHiddenMediaSink(stream);
+                const recorder = new videoClient.MediaStreamRecorder(stream, {
+                    maxDurationMs: videoClient.clampLoopbackRecordingDuration(maxDurationMs),
+                });
+                stopRef.current = recorder.stop;
+                try {
+                    return await recorder.start();
+                }
+                finally {
+                    detachSink();
+                    restoreAudio();
+                }
+            }
+            catch (err) {
+                logger.error('loopback recording failed', err);
+                throw err;
+            }
+            finally {
+                awaitAbortRef.current = null;
+                stopRef.current = null;
+                updateState('idle');
+            }
+        };
+        const promise = run();
+        runRef.current = promise.catch(() => undefined);
+        return promise;
+    }, [call, updateState]);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.LEFT ||
+            callingState === videoClient.CallingState.IDLE) {
+            stopRecording().catch(() => { });
+        }
+    }, [callingState, stopRecording]);
+    react.useEffect(() => {
+        if (recordingState !== 'idle' && participantCount > 1) {
+            stopRecording().catch(() => { });
+        }
+    }, [participantCount, recordingState, stopRecording]);
+    react.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+            awaitAbortRef.current?.abort('the component unmounted');
+            stopRef.current?.();
+        };
+    }, []);
+    return {
+        startRecording,
+        stopRecording,
+        recordingState,
+        loopbackVideoStream: loopbackStreams.loopbackVideoStream,
+        loopbackAudioStream: loopbackStreams.loopbackAudioStream,
+    };
+};
+
 exports.MenuVisualType = void 0;
 (function (MenuVisualType) {
     MenuVisualType["PORTAL"] = "portal";
@@ -1406,7 +1538,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.41.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.42.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -3279,7 +3411,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.41.0").split('.');
+const [major, minor, patch] = ("1.42.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3379,6 +3511,7 @@ exports.useBackgroundFilters = useBackgroundFilters;
 exports.useDeviceList = useDeviceList;
 exports.useFilteredParticipants = useFilteredParticipants;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
+exports.useLoopbackRecording = useLoopbackRecording;
 exports.useMenuContext = useMenuContext;
 exports.useModeration = useModeration;
 exports.useNoiseCancellation = useNoiseCancellation;