@stream-io/video-react-sdk 1.17.1 → 1.18.0

package/src/wrappers/LivestreamPlayer/LivestreamPlayer.tsx

@@ -1,11 +1,18 @@
 import { useEffect, useState } from 'react';
-import { Call } from '@stream-io/video-client';
-import { useStreamVideoClient } from '@stream-io/video-react-bindings';
+import { Call, CallingState } from '@stream-io/video-client';
 import {
+  useCall,
+  useCallStateHooks,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import {
+  BackstageLayout,
+  BackstageLayoutProps,
   LivestreamLayout,
   LivestreamLayoutProps,
   StreamCall,
 } from '../../core';
+import { useEffectEvent } from '../../hooks/useEffectEvent';
 
 export type LivestreamPlayerProps = {
   /**
@@ -16,22 +23,45 @@ export type LivestreamPlayerProps = {
    * The call ID.
    */
   callId: string;
+  /**
+   * Determines when the viewer joins the call.
+   *
+   * `"asap"` behavior means joining the call as soon as it is possible
+   * (either the `join_ahead_time_seconds` setting allows it, or the user
+   * has a the capability to join backstage).
+   *
+   * `"live"` behavior means joining the call when it goes live.
+   *
+   * @default "asap"
+   */
+  joinBehavior?: 'asap' | 'live';
   /**
    * The props for the {@link LivestreamLayout} component.
    */
   layoutProps?: LivestreamLayoutProps;
+  /**
+   * The props for the {@link BackstageLayout} component.
+   */
+  backstageProps?: BackstageLayoutProps;
+  /**
+   * Callback to handle errors while fetching or joining livestream.
+   */
+  onError?: (error: any) => void;
 };
 
 export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
-  const { callType, callId, layoutProps } = props;
+  const { callType, callId, ...restProps } = props;
   const client = useStreamVideoClient();
   const [call, setCall] = useState<Call>();
+  const onError = useEffectEvent(props.onError);
+
   useEffect(() => {
     if (!client) return;
     const myCall = client.call(callType, callId);
     setCall(myCall);
-    myCall.join().catch((e) => {
-      console.error('Failed to join call', e);
+    myCall.get().catch((e) => {
+      console.error('Failed to fetch call', e);
+      onError(e);
     });
     return () => {
       myCall.leave().catch((e) => {
@@ -39,13 +69,94 @@ export const LivestreamPlayer = (props: LivestreamPlayerProps) => {
       });
       setCall(undefined);
     };
-  }, [callId, callType, client]);
+  }, [callId, callType, client, onError]);
 
-  if (!call) return null;
+  if (!call) {
+    return null;
+  }
 
   return (
     <StreamCall call={call}>
-      <LivestreamLayout {...layoutProps} />
+      <LivestreamCall {...restProps} />
     </StreamCall>
   );
 };
+
+const LivestreamCall = (props: {
+  joinBehavior?: 'asap' | 'live';
+  layoutProps?: LivestreamLayoutProps;
+  backstageProps?: BackstageLayoutProps;
+  onError?: (error: any) => void;
+}) => {
+  const call = useLivestreamCall(props);
+  const { useIsCallLive } = useCallStateHooks();
+  const isLive = useIsCallLive();
+
+  if (!call) return null;
+
+  if (isLive) {
+    return <LivestreamLayout {...props.layoutProps} />;
+  }
+
+  return <BackstageLayout {...props.backstageProps} />;
+};
+
+const useLivestreamCall = (props: {
+  joinBehavior?: 'asap' | 'live';
+  onError?: (error: any) => void;
+}) => {
+  const call = useCall();
+  const { useIsCallLive, useOwnCapabilities } = useCallStateHooks();
+  const canJoinLive = useIsCallLive();
+  const canJoinEarly = useCanJoinEearly();
+  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, onError]);
+
+  return call;
+};
+
+const useCanJoinEearly = () => {
+  const { useCallStartsAt, useCallSettings } = useCallStateHooks();
+  const startsAt = useCallStartsAt();
+  const settings = useCallSettings();
+  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+  const [canJoinEarly, setCanJoinEearly] = useState(() =>
+    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),
+  );
+
+  useEffect(() => {
+    if (!canJoinEarly) {
+      const handle = setInterval(() => {
+        setCanJoinEearly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+      }, 1000);
+
+      return () => clearInterval(handle);
+    }
+  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+};
+
+const checkCanJoinEarly = (
+  startsAt: Date | undefined,
+  joinAheadTimeSeconds: number | undefined,
+) => {
+  if (!startsAt) {
+    return false;
+  }
+
+  return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
+};