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

package/src/components/index.ts

@@ -1,16 +1,16 @@
 export * from './Avatar';
 export * from './Button';
 export * from './CallControls';
-export * from '../core/components/CallLayout';
 export * from './CallParticipantsList';
 export * from './CallRecordingList';
 export * from './DeviceSettings';
 export * from './LoadingIndicator';
 export * from './Menu';
 export * from './Notification';
+export * from './PendingCallPanel';
 export * from './Permissions';
 export * from './StreamCall';
-export * from './StreamMeeting';
+export * from './StreamTheme';
 export * from './Search';
 export * from './Tooltip';
 export * from './Video';

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -11,9 +11,14 @@ import {
 } from '@stream-io/video-client';
 import clsx from 'clsx';
 
-import { ParticipantBox } from '../ParticipantBox';
+import {
+  ParticipantView,
+  DefaultParticipantViewUI,
+  ParticipantViewProps,
+} from '../ParticipantView';
 import { Audio } from '../Audio';
 import { IconButton } from '../../../components';
+import { chunk } from '../../../utilities';
 
 const GROUP_SIZE = 16;
 
@@ -22,21 +27,17 @@ type PaginatedGridLayoutGroupProps = {
    * The group of participants to render.
    */
   group: Array<StreamVideoParticipant | StreamVideoLocalParticipant>;
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'> &
+  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 
-  /**
-   * Turns on/off the status indicator icons (mute, connection quality, etc...)
-   * on the participant boxes.
-   */
-  indicatorsVisible?: boolean;
-};
 const PaginatedGridLayoutGroup = ({
   group,
-  indicatorsVisible = true,
+  VideoPlaceholder,
+  ParticipantViewUI,
 }: PaginatedGridLayoutGroupProps) => {
-  const call = useCall();
   return (
     <div
-      className={clsx('str-video__paginated-grid-layout--group', {
+      className={clsx('str-video__paginated-grid-layout__group', {
         'str-video__paginated-grid-layout--one': group.length === 1,
         'str-video__paginated-grid-layout--two-four':
           group.length >= 2 && group.length <= 4,
@@ -45,12 +46,12 @@ const PaginatedGridLayoutGroup = ({
       })}
     >
       {group.map((participant) => (
-        <ParticipantBox
+        <ParticipantView
           key={participant.sessionId}
           participant={participant}
-          call={call!}
-          indicatorsVisible={indicatorsVisible}
           muteAudio
+          VideoPlaceholder={VideoPlaceholder}
+          ParticipantViewUI={ParticipantViewUI}
         />
       ))}
     </div>
@@ -68,26 +69,22 @@ export type PaginatedGridLayoutProps = {
    */
   excludeLocalParticipant?: boolean;
 
-  /**
-   * Turns on/off the status indicator icons (mute, connection quality, etc...)
-   * on the participant boxes.
-   */
-  indicatorsVisible?: boolean;
-
   /**
    * Turns on/off the pagination arrows.
    */
   pageArrowsVisible?: boolean;
-};
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
 
 export const PaginatedGridLayout = ({
   groupSize = GROUP_SIZE,
   excludeLocalParticipant = false,
-  indicatorsVisible = true,
   pageArrowsVisible = true,
+  VideoPlaceholder,
+  ParticipantViewUI = DefaultParticipantViewUI,
 }: PaginatedGridLayoutProps) => {
   const [page, setPage] = useState(0);
 
+  const call = useCall();
   const localParticipant = useLocalParticipant();
   const participants = useParticipants();
   // used to render audio elements
@@ -107,11 +104,15 @@ export const PaginatedGridLayout = ({
 
   // update page when page count is reduced and selected page no longer exists
   useEffect(() => {
-    if (page > pageCount - 1) setPage(pageCount - 1);
+    if (page > pageCount - 1) {
+      setPage(Math.max(0, pageCount - 1));
+    }
   }, [page, pageCount]);
 
   const selectedGroup = participantGroups[page];
 
+  if (!call) return null;
+
   return (
     <>
       {remoteParticipants.map((participant) => (
@@ -122,19 +123,22 @@ export const PaginatedGridLayout = ({
           sinkId={localParticipant?.audioOutputDeviceId}
         />
       ))}
-      <div className="str-video__paginated-grid-layout--wrapper">
+      <div className="str-video__paginated-grid-layout__wrapper">
         <div className="str-video__paginated-grid-layout">
           {pageArrowsVisible && pageCount > 1 && (
             <IconButton
               icon="caret-left"
               disabled={page === 0}
-              onClick={() => setPage((pv) => (pv === 0 ? pv : pv - 1))}
+              onClick={() =>
+                setPage((currentPage) => Math.max(0, currentPage - 1))
+              }
             />
           )}
           {selectedGroup && (
             <PaginatedGridLayoutGroup
               group={participantGroups[page]}
-              indicatorsVisible={indicatorsVisible}
+              VideoPlaceholder={VideoPlaceholder}
+              ParticipantViewUI={ParticipantViewUI}
             />
           )}
           {pageArrowsVisible && pageCount > 1 && (
@@ -142,7 +146,9 @@ export const PaginatedGridLayout = ({
               disabled={page === pageCount - 1}
               icon="caret-right"
               onClick={() =>
-                setPage((pv) => (pv === pageCount - 1 ? pv : pv + 1))
+                setPage((currentPage) =>
+                  Math.min(pageCount - 1, currentPage + 1),
+                )
               }
             />
           )}
@@ -151,13 +157,3 @@ export const PaginatedGridLayout = ({
     </>
   );
 };
-
-// TODO: move to utilities
-const chunk = <T extends unknown[]>(array: T, size = GROUP_SIZE) => {
-  const chunkCount = Math.ceil(array.length / size);
-
-  return Array.from(
-    { length: chunkCount },
-    (_, index) => array.slice(size * index, size * index + size) as T,
-  );
-};

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -16,12 +16,31 @@ import {
   useParticipants,
 } from '@stream-io/video-react-bindings';
 
-import { ParticipantBox } from '../ParticipantBox';
-import { IconButton } from '../../../components/Button';
+import {
+  DefaultParticipantViewUI,
+  ParticipantView,
+  ParticipantViewProps,
+} from '../ParticipantView';
+import { IconButton } from '../../../components';
 import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
 
-export const SpeakerLayout = () => {
-  const call = useCall()!;
+export type SpeakerLayoutProps = {
+  ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
+  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+
+const DefaultParticipantViewUIBar = () => (
+  <DefaultParticipantViewUI menuPlacement="top-end" />
+);
+
+const DefaultParticipantViewUISpotlight = () => <DefaultParticipantViewUI />;
+
+export const SpeakerLayout = ({
+  ParticipantViewUIBar = DefaultParticipantViewUIBar,
+  ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
+  VideoPlaceholder,
+}: SpeakerLayoutProps) => {
+  const call = useCall();
   const [participantInSpotlight, ...otherParticipants] = useParticipants();
   const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
     null,
@@ -40,14 +59,15 @@ export const SpeakerLayout = () => {
   };
 
   useEffect(() => {
-    if (!scrollWrapper) return;
+    if (!scrollWrapper || !call) return;
 
     const cleanup = call.viewportTracker.setViewport(scrollWrapper);
 
     return () => cleanup();
-  }, [scrollWrapper, call.viewportTracker]);
+  }, [scrollWrapper, call]);
 
   useEffect(() => {
+    if (!call) return;
     // always show the remote participant in the spotlight
     if (isOneOnOneCall) {
       call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
@@ -64,58 +84,61 @@ export const SpeakerLayout = () => {
     };
   }, [call, isOneOnOneCall]);
 
+  if (!call) return null;
+
   const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
   return (
-    <div className="str-video__speaker-layout--wrapper">
+    <div className="str-video__speaker-layout__wrapper">
       <div className="str-video__speaker-layout">
-        <div className="str-video__speaker-layout--spotlight">
+        <div className="str-video__speaker-layout__spotlight">
           {participantInSpotlight && (
-            <ParticipantBox
+            <ParticipantView
               participant={participantInSpotlight}
-              call={call}
               muteAudio={isSpeakerScreenSharing}
               videoKind={isSpeakerScreenSharing ? 'screen' : 'video'}
               sinkId={localParticipant?.audioOutputDeviceId}
+              ParticipantViewUI={ParticipantViewUISpotlight}
+              VideoPlaceholder={VideoPlaceholder}
             />
           )}
         </div>
         {otherParticipants.length > 0 && (
-          <div className="str-video__speaker-layout--participants-bar-buttons-wrapper">
+          <div className="str-video__speaker-layout__participants-bar-buttons-wrapper">
             {scrollPosition && scrollPosition !== 'start' && (
               <IconButton
                 onClick={scrollStartClickHandler}
                 icon="caret-left"
-                className="str-video__speaker-layout--participants-bar-button-left"
+                className="str-video__speaker-layout__participants-bar--button-left"
               />
             )}
             <div
-              className="str-video__speaker-layout--participants-bar-wrapper"
+              className="str-video__speaker-layout__participants-bar-wrapper"
               ref={setScrollWrapper}
             >
-              <div className="str-video__speaker-layout--participants-bar">
+              <div className="str-video__speaker-layout__participants-bar">
                 {isSpeakerScreenSharing && (
                   <div
-                    className="str-video__speaker-layout--participant-tile"
+                    className="str-video__speaker-layout__participant-tile"
                     key={participantInSpotlight.sessionId}
                   >
-                    <ParticipantBox
+                    <ParticipantView
                       participant={participantInSpotlight}
-                      call={call}
                       sinkId={localParticipant?.audioOutputDeviceId}
-                      toggleMenuPosition="top"
+                      ParticipantViewUI={ParticipantViewUIBar}
+                      VideoPlaceholder={VideoPlaceholder}
                     />
                   </div>
                 )}
                 {otherParticipants.map((participant) => (
                   <div
-                    className="str-video__speaker-layout--participant-tile"
+                    className="str-video__speaker-layout__participant-tile"
                     key={participant.sessionId}
                   >
-                    <ParticipantBox
+                    <ParticipantView
                       participant={participant}
-                      call={call}
                       sinkId={localParticipant?.audioOutputDeviceId}
-                      toggleMenuPosition="top"
+                      ParticipantViewUI={ParticipantViewUIBar}
+                      VideoPlaceholder={VideoPlaceholder}
                     />
                   </div>
                 ))}
@@ -125,7 +148,7 @@ export const SpeakerLayout = () => {
               <IconButton
                 onClick={scrollEndClickHandler}
                 icon="caret-right"
-                className="str-video__speaker-layout--participants-bar-button-right"
+                className="str-video__speaker-layout__participants-bar--button-right"
               />
             )}
           </div>
@@ -135,8 +158,8 @@ export const SpeakerLayout = () => {
   );
 };
 
-const hasScreenShare = (p: StreamVideoParticipant) =>
-  p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+const hasScreenShare = (p?: StreamVideoParticipant) =>
+  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 
 const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
   if (a.isLoggedInUser) return 1;

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

@@ -0,0 +1,160 @@
+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 { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
+import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
+import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
+import { useParticipantViewContext } from './ParticipantView';
+
+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;
+};
+
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  (props, ref) => {
+    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
+  },
+);
+
+export const DefaultParticipantViewUI = ({
+  indicatorsVisible = true,
+  menuPlacement = 'bottom-end',
+  showMenuButton = true,
+}: DefaultParticipantViewUIProps) => {
+  const call = useCall()!;
+  const { participant, participantViewElement } = useParticipantViewContext();
+  const { reaction, sessionId } = participant;
+
+  return (
+    <>
+      {showMenuButton && (
+        <MenuToggle
+          strategy="fixed"
+          placement={menuPlacement}
+          ToggleButton={ToggleButton}
+        >
+          <ParticipantActionsContextMenu
+            participantViewElement={participantViewElement}
+            participant={participant}
+          />
+        </MenuToggle>
+      )}
+      {reaction && (
+        <Reaction reaction={reaction} sessionId={sessionId} call={call} />
+      )}
+      <ParticipantDetails indicatorsVisible={indicatorsVisible} />
+    </>
+  );
+};
+
+export const ParticipantDetails = ({
+  indicatorsVisible = true,
+}: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {
+  const { participant } = useParticipantViewContext();
+  const {
+    isDominantSpeaker,
+    isLoggedInUser,
+    connectionQuality,
+    publishedTracks,
+    pinnedAt,
+    sessionId,
+    name,
+    userId,
+    videoStream,
+  } = participant;
+  const call = useCall()!;
+
+  const connectionQualityAsString =
+    !!connectionQuality &&
+    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}
+            sessionId={sessionId}
+            mediaStream={videoStream}
+          />
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,156 @@
+import { useContext, useMemo } from 'react';
+import {
+  forwardRef,
+  ComponentType,
+  useState,
+  ReactElement,
+  createContext,
+} 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 } from './DefaultParticipantViewUI';
+import { isComponentType, applyElementToRef } from '../../../utilities';
+
+export type ParticipantViewContextValue = Pick<
+  ParticipantViewProps,
+  'participant'
+> & {
+  participantViewElement: HTMLDivElement | null;
+};
+
+const ParticipantViewContext = createContext<
+  ParticipantViewContextValue | undefined
+>(undefined);
+
+export const useParticipantViewContext = () =>
+  useContext(ParticipantViewContext) as ParticipantViewContextValue;
+
+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 | 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;
+
+  /**
+   * An object with set functions meant for exposing the "native" video
+   * and video placeholder elements to the integrators.
+   * - `refs.setVideoElement`
+   * - `refs.setVideoPlaceholderElement`
+   */
+  refs?: VideoProps['refs'];
+
+  /**
+   * Custom class applied to the root DOM element.
+   */
+  className?: string;
+} & Pick<VideoProps, 'VideoPlaceholder'>;
+
+export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
+  (
+    {
+      participant,
+      sinkId,
+      videoKind = 'video',
+      muteAudio,
+      refs,
+      className,
+      VideoPlaceholder,
+      ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
+    },
+    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,
+    );
+
+    // TODO: allow to pass custom ViewportTracker instance from props
+    useTrackElementVisibility({
+      sessionId,
+      trackedElement,
+    });
+
+    const participantViewContextValue = useMemo(
+      () => ({ participant, participantViewElement: trackedElement }),
+      [participant, trackedElement],
+    );
+
+    return (
+      <div
+        ref={(element) => {
+          applyElementToRef(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,
+        )}
+      >
+        <ParticipantViewContext.Provider value={participantViewContextValue}>
+          <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}
+            refs={refs}
+            autoPlay
+          />
+          {isComponentType(ParticipantViewUI) ? (
+            <ParticipantViewUI />
+          ) : (
+            ParticipantViewUI
+          )}
+        </ParticipantViewContext.Provider>
+      </div>
+    );
+  },
+);

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

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