@stream-io/video-react-sdk 0.0.1-alpha.100

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

@@ -0,0 +1,2 @@
+export * from './ParticipantView';
+export * from './DefaultParticipantViewUI';

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

@@ -0,0 +1,53 @@
+import { ComponentPropsWithRef, forwardRef, useEffect, useState } from 'react';
+import { Browsers } from '@stream-io/video-client';
+
+import { applyElementToRef } from '../../../utilities';
+
+export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
+  stream?: MediaStream;
+};
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
+  ({ stream, ...rest }, ref) => {
+    const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
+      null,
+    );
+
+    useEffect(() => {
+      if (!videoElement || !stream) return;
+      if (stream === videoElement.srcObject) return;
+
+      videoElement.srcObject = stream;
+      if (Browsers.isSafari() || Browsers.isFirefox()) {
+        // Firefox and Safari have some timing issue
+        setTimeout(() => {
+          videoElement.srcObject = stream;
+          videoElement.play().catch((e) => {
+            console.error(`Failed to play stream`, e);
+          });
+        }, 0);
+      }
+
+      return () => {
+        videoElement.pause();
+        videoElement.srcObject = null;
+      };
+    }, [stream, videoElement]);
+
+    return (
+      <video
+        autoPlay
+        playsInline
+        {...rest}
+        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

@@ -0,0 +1,252 @@
+import {
+  ComponentPropsWithoutRef,
+  ComponentType,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  DebounceType,
+  SfuModels,
+  StreamVideoParticipant,
+  VisibilityState,
+} from '@stream-io/video-client';
+import clsx from 'clsx';
+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 = ({
+  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>(
+    viewportVisibilityState,
+  );
+
+  const stream = kind === 'video' ? videoStream : screenShareStream;
+
+  // TODO: handle track muting
+  // useEffect(() => {
+  //   if (!stream) return;
+
+  //   const [track] = stream.getVideoTracks();
+  //   setVideoTrackMuted(track.muted);
+
+  //   const handleMute = () => {
+  //     setVideoTrackMuted(true);
+  //   };
+  //   const handleUnmute = () => {
+  //     setVideoTrackMuted(false);
+  //   };
+
+  //   track.addEventListener('mute', handleMute);
+  //   track.addEventListener('unmute', handleUnmute);
+
+  //   return () => {
+  //     track.removeEventListener('mute', handleMute);
+  //     track.removeEventListener('unmute', handleUnmute);
+  //   };
+  // }, [stream]);
+
+  const isPublishingTrack = publishedTracks.includes(
+    kind === 'video'
+      ? SfuModels.TrackType.VIDEO
+      : SfuModels.TrackType.SCREEN_SHARE,
+  );
+
+  const displayPlaceholder =
+    !isPublishingTrack ||
+    (viewportVisibilityState === VisibilityState.INVISIBLE &&
+      !screenShareStream) ||
+    !videoPlaying;
+
+  const lastDimensionRef = useRef<string | undefined>();
+  const updateSubscription = useCallback(
+    (
+      dimension?: SfuModels.VideoDimension,
+      type: DebounceType = DebounceType.SLOW,
+    ) => {
+      if (!call) return;
+
+      call.updateSubscriptionsPartial(
+        kind,
+        {
+          [sessionId]: {
+            dimension,
+          },
+        },
+        type,
+      );
+    },
+    [call, kind, sessionId],
+  );
+
+  // handle visibility subscription updates
+  useEffect(() => {
+    viewportVisibilityRef.current = viewportVisibilityState;
+
+    if (!videoElement || !isPublishingTrack || isLoggedInUser) return;
+
+    const isInvisibleVVS =
+      viewportVisibilityState === VisibilityState.INVISIBLE;
+
+    updateSubscription(
+      isInvisibleVVS
+        ? undefined
+        : {
+            height: videoElement.clientHeight,
+            width: videoElement.clientWidth,
+          },
+      DebounceType.MEDIUM,
+    );
+  }, [
+    updateSubscription,
+    viewportVisibilityState,
+    videoElement,
+    isPublishingTrack,
+    isLoggedInUser,
+  ]);
+
+  // handle resize subscription updates
+  useEffect(() => {
+    if (!videoElement || !isPublishingTrack || isLoggedInUser) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      const currentDimensions = `${videoElement.clientWidth},${videoElement.clientHeight}`;
+
+      // skip initial trigger of the observer
+      if (!lastDimensionRef.current) {
+        return (lastDimensionRef.current = currentDimensions);
+      }
+
+      if (
+        lastDimensionRef.current === currentDimensions ||
+        viewportVisibilityRef.current === VisibilityState.INVISIBLE
+      )
+        return;
+
+      updateSubscription(
+        {
+          height: videoElement.clientHeight,
+          width: videoElement.clientWidth,
+        },
+        DebounceType.SLOW,
+      );
+      lastDimensionRef.current = currentDimensions;
+    });
+    resizeObserver.observe(videoElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    updateSubscription,
+    videoElement,
+    viewportVisibilityState,
+    isPublishingTrack,
+    isLoggedInUser,
+  ]);
+
+  // handle generic subscription updates
+  useEffect(() => {
+    if (!isPublishingTrack || !videoElement || isLoggedInUser) return;
+
+    updateSubscription(
+      {
+        height: videoElement.clientHeight,
+        width: videoElement.clientWidth,
+      },
+      DebounceType.FAST,
+    );
+
+    return () => {
+      updateSubscription(undefined, DebounceType.FAST);
+    };
+  }, [updateSubscription, videoElement, isPublishingTrack, isLoggedInUser]);
+
+  const [isWideMode, setIsWideMode] = useState(true);
+  useEffect(() => {
+    if (!stream || !videoElement) return;
+
+    setVideoPlaying(!videoElement.paused);
+
+    const calculateVideoRatio = () => {
+      setVideoPlaying(true);
+      const [track] = stream.getVideoTracks();
+      if (!track) return;
+
+      const { width = 0, height = 0 } = track.getSettings();
+      setIsWideMode(width > height);
+    };
+    videoElement.addEventListener('play', calculateVideoRatio);
+    return () => {
+      videoElement.removeEventListener('play', calculateVideoRatio);
+    };
+  }, [stream, videoElement]);
+
+  if (!call) return null;
+
+  return (
+    <>
+      <BaseVideo
+        {...rest}
+        stream={stream}
+        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={userId}
+        data-session-id={sessionId}
+        ref={(element) => {
+          setVideoElement(element);
+          refs?.setVideoElement?.(element);
+        }}
+      />
+      {displayPlaceholder && (
+        <VideoPlaceholder
+          style={{ position: 'absolute' }}
+          participant={participant}
+          ref={refs?.setVideoPlaceholderElement}
+        />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './BaseVideo';
+export * from './Video';

package/src/core/components/index.ts

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