@stream-io/video-react-sdk 0.0.1-alpha.9 → 0.0.1-alpha.91

package/src/core/components/StreamCall/StreamCall.tsx

@@ -0,0 +1,157 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { Call, CallingState, JoinCallData } from '@stream-io/video-client';
+import {
+  StreamCallProvider,
+  useConnectedUser,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import {
+  MediaDevicesProvider,
+  MediaDevicesProviderProps,
+} from '../../contexts';
+
+type InitWithCallCID = {
+  /**
+   * The call type.
+   */
+  callType: string;
+  /**
+   * The call id.
+   */
+  callId: string;
+  /**
+   * The call instance to use.
+   */
+  call?: never;
+};
+
+type InitWithCallInstance = {
+  /**
+   * The call instance to use.
+   */
+  call: Call | undefined;
+  /**
+   * The call type.
+   */
+  callType?: never;
+  /**
+   * The call id.
+   */
+  callId?: never;
+};
+
+type InitStreamCall = InitWithCallCID | InitWithCallInstance;
+
+export type StreamCallProps = InitStreamCall & {
+  /**
+   * If true, the call will be joined automatically.
+   * Set it to true if you want to join the call immediately.
+   * Useful for scenarios where you want to skip prompting the user to join the call.
+   *
+   * @default false.
+   */
+  autoJoin?: boolean;
+
+  /**
+   * If true, the call data will be loaded automatically from the server.
+   *
+   * This property is useful for the scenarios where you declaratively create
+   * the call instance by using the `callId` and `callType` props,
+   * and you have a UI that depends on the call metadata.
+   *
+   * @example
+   * ```jsx
+   * <StreamCall callId="call-id" callType="call-type" autoLoad>
+   *   <CallMetadata /> // has access to `call.metadata` although not joined yet
+   *   <CallUI />
+   *   <CallControls />
+   * </StreamCall>
+   * ```
+   *
+   * This property is ignored if you pass the `call` prop or enable `autoJoin`.
+   *
+   * @default true.
+   */
+  autoLoad?: boolean;
+
+  /**
+   * An optional data to pass when joining the call.
+   */
+  data?: JoinCallData;
+
+  /**
+   * An optional props to pass to the `MediaDevicesProvider`.
+   */
+  mediaDevicesProviderProps?: MediaDevicesProviderProps;
+};
+
+export const StreamCall = ({
+  children,
+  callId,
+  callType,
+  call,
+  autoJoin = false,
+  autoLoad = true,
+  data,
+  mediaDevicesProviderProps,
+}: PropsWithChildren<StreamCallProps>) => {
+  const client = useStreamVideoClient();
+  const [activeCall, setActiveCall] = useState<Call | undefined>(() => {
+    if (call) return call;
+    if (!client || !callId || !callType) return;
+    return client.call(callType, callId);
+  });
+
+  useEffect(() => {
+    if (!client) return;
+
+    if (callId && callType && !activeCall) {
+      const newCall = client.call(callType, callId);
+      setActiveCall(newCall);
+    }
+  }, [activeCall, callId, callType, client]);
+
+  const connectedUser = useConnectedUser();
+  useEffect(() => {
+    // run the effect only when the user is connected and the call
+    // is created declaratively by using the `callId` and `callType` props.
+    if (!connectedUser) return;
+    if (activeCall && callType && callId && autoLoad && !autoJoin) {
+      activeCall
+        .getOrCreate({
+          ring: data?.ring,
+          data: data?.data,
+          members_limit: data?.members_limit,
+        })
+        .catch((err) => {
+          console.error(`Failed to get or create call`, err);
+        });
+    }
+  }, [
+    activeCall,
+    autoJoin,
+    autoLoad,
+    callId,
+    callType,
+    connectedUser,
+    data?.data,
+    data?.members_limit,
+    data?.ring,
+  ]);
+
+  useEffect(() => {
+    if (autoJoin && activeCall?.state.callingState === CallingState.IDLE) {
+      activeCall.join(data).catch((err) => {
+        console.error(`Failed to join call`, err);
+      });
+    }
+  }, [activeCall, autoJoin, data]);
+
+  return (
+    <StreamCallProvider call={activeCall}>
+      <MediaDevicesProvider {...mediaDevicesProviderProps}>
+        {children}
+      </MediaDevicesProvider>
+    </StreamCallProvider>
+  );
+};

package/src/core/components/StreamCall/index.ts

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

package/src/core/components/Video/BaseVideo.tsx

@@ -1,18 +1,9 @@
-import {
-  DetailedHTMLProps,
-  ForwardedRef,
-  forwardRef,
-  useEffect,
-  useState,
-  VideoHTMLAttributes,
-} from 'react';
-import clsx from 'clsx';
+import { ComponentPropsWithRef, forwardRef, useEffect, useState } from 'react';
 import { Browsers } from '@stream-io/video-client';
 
-export type VideoProps = DetailedHTMLProps<
-  VideoHTMLAttributes<HTMLVideoElement>,
-  HTMLVideoElement
-> & {
+import { applyElementToRef } from '../../../utilities';
+
+export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
   stream?: MediaStream;
 };
 
@@ -20,19 +11,11 @@ export type VideoProps = DetailedHTMLProps<
  * @description Extends video element with `stream` property
  * (`srcObject`) to reactively handle stream changes
  */
-export const BaseVideo = forwardRef<HTMLVideoElement, VideoProps>(
+export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
   ({ stream, ...rest }, ref) => {
     const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
       null,
     );
-    const setRef: ForwardedRef<HTMLVideoElement> = (instance) => {
-      setVideoElement(instance);
-      if (typeof ref === 'function') {
-        (ref as (instance: HTMLVideoElement | null) => void)(instance);
-      } else if (ref) {
-        ref.current = instance;
-      }
-    };
 
     useEffect(() => {
       if (!videoElement || !stream) return;
@@ -60,8 +43,10 @@ export const BaseVideo = forwardRef<HTMLVideoElement, VideoProps>(
         autoPlay
         playsInline
         {...rest}
-        className={clsx('str-video__base-video', rest.className)}
-        ref={setRef}
+        ref={(element) => {
+          applyElementToRef(ref, element);
+          setVideoElement(element);
+        }}
       />
     );
   },

package/src/core/components/Video/DefaultVideoPlaceholder.tsx

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef, forwardRef, useState } from 'react';
+import type { StreamVideoParticipant } from '@stream-io/video-client';
+
+export type VideoPlaceholderProps = {
+  participant: StreamVideoParticipant;
+} & ComponentPropsWithRef<'div'>;
+
+export const DefaultVideoPlaceholder = forwardRef<
+  HTMLDivElement,
+  VideoPlaceholderProps
+>(({ participant, style }, ref) => {
+  const [error, setError] = useState(false);
+
+  const name = participant?.name || participant?.userId;
+
+  return (
+    <div className="str-video__video-placeholder" style={style} ref={ref}>
+      {(!participant.image || error) &&
+        (name ? (
+          <div className="str-video__video-placeholder__initials-fallback">
+            <div>{name[0]}</div>
+          </div>
+        ) : (
+          <div>Video is disabled</div>
+        ))}
+      {participant.image && !error && (
+        <img
+          onError={() => setError(true)}
+          alt="video-placeholder"
+          className="str-video__video-placeholder__avatar"
+          src={participant.image}
+        />
+      )}
+    </div>
+  );
+});

package/src/core/components/Video/Video.tsx

@@ -1,45 +1,63 @@
 import {
-  DetailedHTMLProps,
+  ComponentPropsWithoutRef,
+  ComponentType,
   useCallback,
   useEffect,
   useRef,
   useState,
-  VideoHTMLAttributes,
 } from 'react';
 import {
-  Call,
   DebounceType,
   SfuModels,
   StreamVideoParticipant,
   VisibilityState,
 } from '@stream-io/video-client';
 import clsx from 'clsx';
-import { VideoPlaceholder } from './VideoPlaceholder';
+import {
+  DefaultVideoPlaceholder,
+  VideoPlaceholderProps,
+} from './DefaultVideoPlaceholder';
 import { BaseVideo } from './BaseVideo';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export type VideoProps = ComponentPropsWithoutRef<'video'> & {
+  kind: 'video' | 'screen';
+  participant: StreamVideoParticipant;
+  VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+  refs?: {
+    setVideoElement?: (element: HTMLVideoElement | null) => void;
+    setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
+  };
+};
 
-export const Video = (
-  props: DetailedHTMLProps<
-    VideoHTMLAttributes<HTMLVideoElement>,
-    HTMLVideoElement
-  > & {
-    call: Call;
-    kind: 'video' | 'screen';
-    participant: StreamVideoParticipant;
-    setVideoElementRef?: (element: HTMLElement | null) => void;
-  },
-) => {
-  const { call, kind, participant, className, setVideoElementRef, ...rest } =
-    props;
-  const { sessionId, videoStream, screenShareStream, publishedTracks } =
-    participant;
+export const Video = ({
+  kind,
+  participant,
+  className,
+  VideoPlaceholder = DefaultVideoPlaceholder,
+  refs,
+  ...rest
+}: VideoProps) => {
+  const {
+    sessionId,
+    videoStream,
+    screenShareStream,
+    publishedTracks,
+    viewportVisibilityState,
+    isLoggedInUser,
+    userId,
+  } = participant;
+
+  const call = useCall();
 
   const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
     null,
   );
+
   // const [videoTrackMuted, setVideoTrackMuted] = useState(false);
   const [videoPlaying, setVideoPlaying] = useState(false);
   const viewportVisibilityRef = useRef<VisibilityState | undefined>(
-    participant.viewportVisibilityState,
+    viewportVisibilityState,
   );
 
   const stream = kind === 'video' ? videoStream : screenShareStream;
@@ -75,7 +93,7 @@ export const Video = (
 
   const displayPlaceholder =
     !isPublishingTrack ||
-    (participant.viewportVisibilityState === VisibilityState.INVISIBLE &&
+    (viewportVisibilityState === VisibilityState.INVISIBLE &&
       !screenShareStream) ||
     !videoPlaying;
 
@@ -85,6 +103,8 @@ export const Video = (
       dimension?: SfuModels.VideoDimension,
       type: DebounceType = DebounceType.SLOW,
     ) => {
+      if (!call) return;
+
       call.updateSubscriptionsPartial(
         kind,
         {
@@ -98,17 +118,14 @@ export const Video = (
     [call, kind, sessionId],
   );
 
-  // handle generic subscription updates
-
   // handle visibility subscription updates
   useEffect(() => {
-    viewportVisibilityRef.current = participant.viewportVisibilityState;
+    viewportVisibilityRef.current = viewportVisibilityState;
 
-    if (!videoElement || !isPublishingTrack || participant.isLoggedInUser)
-      return;
+    if (!videoElement || !isPublishingTrack || isLoggedInUser) return;
 
     const isInvisibleVVS =
-      participant.viewportVisibilityState === VisibilityState.INVISIBLE;
+      viewportVisibilityState === VisibilityState.INVISIBLE;
 
     updateSubscription(
       isInvisibleVVS
@@ -121,16 +138,15 @@ export const Video = (
     );
   }, [
     updateSubscription,
-    participant.viewportVisibilityState,
+    viewportVisibilityState,
     videoElement,
     isPublishingTrack,
-    participant.isLoggedInUser,
+    isLoggedInUser,
   ]);
 
   // handle resize subscription updates
   useEffect(() => {
-    if (!videoElement || !isPublishingTrack || participant.isLoggedInUser)
-      return;
+    if (!videoElement || !isPublishingTrack || isLoggedInUser) return;
 
     const resizeObserver = new ResizeObserver(() => {
       const currentDimensions = `${videoElement.clientWidth},${videoElement.clientHeight}`;
@@ -163,14 +179,14 @@ export const Video = (
   }, [
     updateSubscription,
     videoElement,
-    participant.viewportVisibilityState,
+    viewportVisibilityState,
     isPublishingTrack,
-    participant.isLoggedInUser,
+    isLoggedInUser,
   ]);
 
+  // handle generic subscription updates
   useEffect(() => {
-    if (!isPublishingTrack || !videoElement || participant.isLoggedInUser)
-      return;
+    if (!isPublishingTrack || !videoElement || isLoggedInUser) return;
 
     updateSubscription(
       {
@@ -183,12 +199,7 @@ export const Video = (
     return () => {
       updateSubscription(undefined, DebounceType.FAST);
     };
-  }, [
-    updateSubscription,
-    videoElement,
-    isPublishingTrack,
-    participant.isLoggedInUser,
-  ]);
+  }, [updateSubscription, videoElement, isPublishingTrack, isLoggedInUser]);
 
   const [isWideMode, setIsWideMode] = useState(true);
   useEffect(() => {
@@ -210,27 +221,30 @@ export const Video = (
     };
   }, [stream, videoElement]);
 
+  if (!call) return null;
+
   return (
     <>
       <BaseVideo
         {...rest}
         stream={stream}
-        className={clsx(className, {
-          'str-video__video--wide': isWideMode,
+        className={clsx(className, 'str-video__video', {
           'str-video__video--tall': !isWideMode,
+          'str-video__video--mirror': isLoggedInUser && kind === 'video',
+          'str-video__video--screen-share': kind === 'screen',
         })}
-        data-user-id={participant.userId}
+        data-user-id={userId}
         data-session-id={sessionId}
-        ref={(ref) => {
-          setVideoElement(ref);
-          setVideoElementRef?.(ref);
+        ref={(element) => {
+          setVideoElement(element);
+          refs?.setVideoElement?.(element);
         }}
       />
       {displayPlaceholder && (
         <VideoPlaceholder
           style={{ position: 'absolute' }}
           participant={participant}
-          ref={setVideoElementRef}
+          ref={refs?.setVideoPlaceholderElement}
         />
       )}
     </>

package/src/core/components/index.ts

@@ -1,7 +1,8 @@
 export * from './Audio';
-export * from './ParticipantBox';
+export * from './ParticipantView';
+export * from './StreamCall';
 
 export { Video } from './Video';
-export type { VideoProps } from './Video';
+export type { BaseVideoProps, VideoProps } from './Video';
 
 export * from './CallLayout';