@stream-io/video-react-sdk 0.0.1-alpha.33 → 0.0.1-alpha.35

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -0,0 +1,165 @@
+import { forwardRef } from 'react';
+import { Placement } from '@floating-ui/react';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+import { clsx } from 'clsx';
+
+import {
+  IconButton,
+  MenuToggle,
+  Notification,
+  ParticipantActionsContextMenu,
+  ToggleMenuButtonProps,
+} from '../../../components';
+import { Reaction } from '../../../components/Reaction';
+import { ParticipantViewProps } from './ParticipantView';
+
+import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
+import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
+import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
+
+export type ParticipantViewUIProps = Pick<ParticipantViewProps, 'participant'>;
+
+export type DefaultParticipantViewUIProps = {
+  /**
+   * Turns on/off the status indicator icons (mute, connection quality, etc...).
+   */
+  indicatorsVisible?: boolean;
+  /**
+   * Placement of the context menu component when opened
+   */
+  menuPlacement?: Placement;
+  /**
+   * Option to show/hide menu button component
+   */
+  showMenuButton?: boolean;
+} & ParticipantViewUIProps;
+
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  (props, ref) => {
+    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
+  },
+);
+
+export const DefaultParticipantViewUI = ({
+  participant,
+  indicatorsVisible = true,
+  menuPlacement = 'bottom-end',
+  showMenuButton = true,
+}: DefaultParticipantViewUIProps) => {
+  const call = useCall()!;
+  const { reaction, sessionId } = participant;
+
+  return (
+    <>
+      {showMenuButton && (
+        <MenuToggle
+          strategy="fixed"
+          placement={menuPlacement}
+          ToggleButton={ToggleButton}
+        >
+          <ParticipantActionsContextMenu participant={participant} />
+        </MenuToggle>
+      )}
+      {reaction && (
+        <Reaction reaction={reaction} sessionId={sessionId} call={call} />
+      )}
+      <ParticipantDetails
+        participant={participant}
+        indicatorsVisible={indicatorsVisible}
+      />
+    </>
+  );
+};
+
+export const ParticipantDetails = ({
+  participant,
+  indicatorsVisible = true,
+}: Pick<
+  DefaultParticipantViewUIProps,
+  'participant' | 'indicatorsVisible'
+>) => {
+  const {
+    isDominantSpeaker,
+    isLoggedInUser,
+    connectionQuality,
+    publishedTracks,
+    pinnedAt,
+    sessionId,
+    name,
+    userId,
+    videoStream,
+  } = participant;
+  const call = useCall()!;
+
+  const connectionQualityAsString =
+    !!connectionQuality &&
+    String(SfuModels.ConnectionQuality[connectionQuality]).toLowerCase();
+
+  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const isPinned = !!pinnedAt;
+
+  const isDebugMode = useIsDebugMode();
+
+  return (
+    <div className="str-video__participant-details">
+      <span className="str-video__participant-details__name">
+        {name || userId}
+        {indicatorsVisible && isDominantSpeaker && (
+          <span
+            className="str-video__participant-details__name--dominant_speaker"
+            title="Dominant speaker"
+          />
+        )}
+        {indicatorsVisible && (
+          <Notification
+            isVisible={
+              isLoggedInUser &&
+              connectionQuality === SfuModels.ConnectionQuality.POOR
+            }
+            message="Poor connection quality. Please check your internet connection."
+          >
+            {connectionQualityAsString && (
+              <span
+                className={clsx(
+                  'str-video__participant-details__connection-quality',
+                  `str-video__participant-details__connection-quality--${connectionQualityAsString}`,
+                )}
+                title={connectionQualityAsString}
+              />
+            )}
+          </Notification>
+        )}
+        {indicatorsVisible && !hasAudio && (
+          <span className="str-video__participant-details__name--audio-muted" />
+        )}
+        {indicatorsVisible && !hasVideo && (
+          <span className="str-video__participant-details__name--video-muted" />
+        )}
+        {indicatorsVisible && isPinned && (
+          // TODO: remove this monstrosity once we have a proper design
+          <span
+            title="Unpin"
+            onClick={() => call?.setParticipantPinnedAt(sessionId)}
+            style={{ cursor: 'pointer' }}
+            className="str-video__participant-details__name--pinned"
+          />
+        )}
+      </span>
+      {isDebugMode && (
+        <>
+          <DebugParticipantPublishQuality
+            participant={participant}
+            call={call}
+          />
+          <DebugStatsView
+            call={call}
+            kind={isLoggedInUser ? 'publisher' : 'subscriber'}
+            mediaStream={videoStream}
+          />
+        </>
+      )}
+    </div>
+  );
+};

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -0,0 +1,136 @@
+import { forwardRef, ComponentType, useState, ReactElement } from 'react';
+import clsx from 'clsx';
+import {
+  SfuModels,
+  StreamVideoLocalParticipant,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+
+import { Audio } from '../Audio';
+import { Video, VideoProps } from '../Video';
+import { useTrackElementVisibility } from '../../hooks';
+import {
+  DefaultParticipantViewUI,
+  ParticipantViewUIProps,
+} from './DefaultParticipantViewUI';
+import { isComponentType, applyElementRef } from '../../../utilities';
+
+export type ParticipantViewProps = {
+  /**
+   * The participant bound to this component.
+   */
+  participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+
+  /**
+   * Component used to render user interface elements (details, network status...),
+   * pass `null` if you wish to not render anything
+   * @default DefaultParticipantViewUI
+   */
+  ParticipantViewUI?:
+    | ComponentType<ParticipantViewUIProps>
+    | ReactElement
+    | null;
+
+  /**
+   * In supported browsers, this sets the default audio output.
+   * The value of this prop should be a valid Audio Output `deviceId`.
+   */
+  sinkId?: string;
+
+  /**
+   * The kind of video stream to play for the given participant.
+   */
+  videoKind?: 'video' | 'screen';
+
+  /**
+   * Turns on/off the audio for the participant.
+   */
+  muteAudio?: boolean;
+
+  /**
+   * A function meant for exposing the "native" element ref to the integrators.
+   * The element can either be:
+   * - `<video />` for participants with enabled video.
+   * - `<div />` for participants with disabled video. This ref would point to
+   * the VideoPlaceholder component.
+   *
+   * @param element the element ref.
+   */
+  setVideoElementRef?: (element: HTMLElement | null) => void;
+
+  /**
+   * Custom class applied to the root DOM element.
+   */
+  className?: string;
+} & Pick<VideoProps, 'VideoPlaceholder'>;
+
+export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
+  (
+    {
+      participant,
+      sinkId,
+      videoKind = 'video',
+      muteAudio,
+      setVideoElementRef,
+      className,
+      VideoPlaceholder,
+      ParticipantViewUI = DefaultParticipantViewUI as ComponentType<ParticipantViewUIProps>,
+    },
+    ref,
+  ) => {
+    const {
+      audioStream,
+      isLoggedInUser,
+      isSpeaking,
+      publishedTracks,
+      sessionId,
+    } = participant;
+
+    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+
+    const [trackedElement, setTrackedElement] = useState<HTMLDivElement | null>(
+      null,
+    );
+
+    useTrackElementVisibility({
+      sessionId,
+      trackedElement,
+    });
+
+    return (
+      <div
+        ref={(element) => {
+          applyElementRef(ref, element);
+          setTrackedElement(element);
+        }}
+        className={clsx(
+          'str-video__participant-view',
+          isSpeaking && 'str-video__participant-view--speaking',
+          !hasVideo && 'str-video__participant-view--no-video',
+          !hasAudio && 'str-video__participant-view--no-audio',
+          className,
+        )}
+      >
+        <Audio
+          // mute the local participant, as we don't want to hear ourselves
+          muted={isLoggedInUser || muteAudio}
+          sinkId={sinkId}
+          audioStream={audioStream}
+        />
+        <Video
+          VideoPlaceholder={VideoPlaceholder}
+          participant={participant}
+          kind={videoKind}
+          setVideoElementRef={setVideoElementRef}
+          autoPlay
+        />
+        {isComponentType(ParticipantViewUI) ? (
+          <ParticipantViewUI participant={participant} />
+        ) : (
+          ParticipantViewUI
+        )}
+      </div>
+    );
+  },
+);

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

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

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 { applyElementRef } 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) => {
+          applyElementRef(ref, element);
+          setVideoElement(element);
+        }}
       />
     );
   },

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

@@ -1,45 +1,60 @@
 import {
-  DetailedHTMLProps,
+  ComponentType,
   useCallback,
   useEffect,
   useRef,
   useState,
-  VideoHTMLAttributes,
+  ComponentPropsWithoutRef,
 } from 'react';
 import {
-  Call,
   DebounceType,
   SfuModels,
   StreamVideoParticipant,
   VisibilityState,
 } from '@stream-io/video-client';
 import clsx from 'clsx';
-import { VideoPlaceholder } from './VideoPlaceholder';
+import {
+  VideoPlaceholder as DefaultVideoPlaceholder,
+  VideoPlaceholderProps,
+} from './VideoPlaceholder';
 import { BaseVideo } from './BaseVideo';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export type VideoProps = ComponentPropsWithoutRef<'video'> & {
+  kind: 'video' | 'screen';
+  participant: StreamVideoParticipant;
+  setVideoElementRef?: (element: HTMLElement | null) => void;
+  VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+};
 
-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,
+  setVideoElementRef,
+  VideoPlaceholder = DefaultVideoPlaceholder,
+  ...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 +90,7 @@ export const Video = (
 
   const displayPlaceholder =
     !isPublishingTrack ||
-    (participant.viewportVisibilityState === VisibilityState.INVISIBLE &&
+    (viewportVisibilityState === VisibilityState.INVISIBLE &&
       !screenShareStream) ||
     !videoPlaying;
 
@@ -85,6 +100,8 @@ export const Video = (
       dimension?: SfuModels.VideoDimension,
       type: DebounceType = DebounceType.SLOW,
     ) => {
+      if (!call) return;
+
       call.updateSubscriptionsPartial(
         kind,
         {
@@ -98,17 +115,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 +135,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 +176,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 +196,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,16 +218,19 @@ 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);

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

@@ -1,10 +1,9 @@
-import { ComponentProps, forwardRef, useState } from 'react';
-import { clsx } from 'clsx';
-import { StreamVideoParticipant } from '@stream-io/video-client';
+import { ComponentPropsWithRef, forwardRef, useState } from 'react';
+import type { StreamVideoParticipant } from '@stream-io/video-client';
 
 export type VideoPlaceholderProps = {
   participant: StreamVideoParticipant;
-} & ComponentProps<'div'>;
+} & ComponentPropsWithRef<'div'>;
 
 export const VideoPlaceholder = forwardRef<
   HTMLDivElement,
@@ -15,10 +14,10 @@ export const VideoPlaceholder = forwardRef<
   const name = participant?.name || participant?.userId;
 
   return (
-    <div className="str-video__participant-placeholder" style={style} ref={ref}>
+    <div className="str-video__video-placeholder" style={style} ref={ref}>
       {(!participant.image || error) &&
         (name ? (
-          <div className="str-video__participant-placeholder--initials-fallback">
+          <div className="str-video__video-placeholder__initials-fallback">
             <div>{name[0]}</div>
           </div>
         ) : (
@@ -27,11 +26,8 @@ export const VideoPlaceholder = forwardRef<
       {participant.image && !error && (
         <img
           onError={() => setError(true)}
-          alt="participant-placeholder"
-          className={clsx('str-video__participant-placeholder--avatar', {
-            'str-video__participant-placeholder--avatar-speaking':
-              participant.isSpeaking,
-          })}
+          alt="video-placeholder"
+          className="str-video__video-placeholder__avatar"
           src={participant.image}
         />
       )}

package/src/core/components/index.ts

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

package/src/core/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useAudioPublisher';
 export * from './useVideoPublisher';
+export * from './useTrackElementVisibility';

package/src/core/hooks/useTrackElementVisibility.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { ViewportTracker, VisibilityState } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+
+export const useTrackElementVisibility = <T extends HTMLElement>({
+  trackedElement,
+  viewportTracker: propsViewportTracker,
+  sessionId,
+}: {
+  trackedElement: T | null;
+  sessionId: string;
+  viewportTracker?: ViewportTracker;
+}) => {
+  const call = useCall();
+
+  const viewportTracker = propsViewportTracker ?? call?.viewportTracker;
+
+  useEffect(() => {
+    if (!trackedElement || !viewportTracker || !call) return;
+
+    const unobserve = viewportTracker.observe(trackedElement, (entry) => {
+      call.state.updateParticipant(sessionId, (p) => ({
+        ...p,
+        viewportVisibilityState: entry.isIntersecting
+          ? VisibilityState.VISIBLE
+          : VisibilityState.INVISIBLE,
+      }));
+    });
+
+    return () => {
+      unobserve();
+      // reset visibility state to UNKNOWN upon cleanup
+      // so that the layouts that are not actively observed
+      // can still function normally (runtime layout switching)
+      call.state.updateParticipant(sessionId, (p) => ({
+        ...p,
+        viewportVisibilityState: VisibilityState.UNKNOWN,
+      }));
+    };
+  }, [trackedElement, viewportTracker, call, sessionId]);
+};

package/src/utilities/applyElementRef.ts

@@ -0,0 +1,12 @@
+import type { ForwardedRef } from 'react';
+
+export const applyElementRef = <T extends HTMLElement | null>(
+  ref: ForwardedRef<T>,
+  element: T,
+) => {
+  if (!ref) return;
+
+  if (typeof ref === 'function') return ref(element);
+
+  ref.current = element;
+};

package/src/utilities/chunk.ts

@@ -0,0 +1,8 @@
+export const chunk = <T extends unknown[]>(array: T, size: number) => {
+  const chunkCount = Math.ceil(array.length / size);
+
+  return Array.from(
+    { length: chunkCount },
+    (_, index) => array.slice(size * index, size * index + size) as T,
+  );
+};

package/src/utilities/index.ts

@@ -0,0 +1,3 @@
+export * from './isComponentType';
+export * from './chunk';
+export * from './applyElementRef';