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

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

@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  useCall,
+  useLocalParticipant,
+  useParticipants,
+  useRemoteParticipants,
+} from '@stream-io/video-react-bindings';
+import {
+  StreamVideoLocalParticipant,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import clsx from 'clsx';
+
+import {
+  ParticipantView,
+  DefaultParticipantViewUI,
+  ParticipantViewProps,
+} from '../ParticipantView';
+import { Audio } from '../Audio';
+import { IconButton } from '../../../components';
+import { chunk } from '../../../utilities';
+
+const GROUP_SIZE = 16;
+
+type PaginatedGridLayoutGroupProps = {
+  /**
+   * The group of participants to render.
+   */
+  group: Array<StreamVideoParticipant | StreamVideoLocalParticipant>;
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'> &
+  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
+
+const PaginatedGridLayoutGroup = ({
+  group,
+  VideoPlaceholder,
+  ParticipantViewUI,
+}: PaginatedGridLayoutGroupProps) => {
+  return (
+    <div
+      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,
+        'str-video__paginated-grid-layout--five-nine':
+          group.length >= 5 && group.length <= 9,
+      })}
+    >
+      {group.map((participant) => (
+        <ParticipantView
+          key={participant.sessionId}
+          participant={participant}
+          muteAudio
+          VideoPlaceholder={VideoPlaceholder}
+          ParticipantViewUI={ParticipantViewUI}
+        />
+      ))}
+    </div>
+  );
+};
+
+export type PaginatedGridLayoutProps = {
+  /**
+   * The number of participants to display per page.
+   */
+  groupSize?: number;
+
+  /**
+   * Whether to exclude the local participant from the grid.
+   */
+  excludeLocalParticipant?: boolean;
+
+  /**
+   * Turns on/off the pagination arrows.
+   */
+  pageArrowsVisible?: boolean;
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
+
+export const PaginatedGridLayout = ({
+  groupSize = GROUP_SIZE,
+  excludeLocalParticipant = false,
+  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
+  const remoteParticipants = useRemoteParticipants();
+
+  // only used to render video elements
+  const participantGroups = useMemo(
+    () =>
+      chunk(
+        excludeLocalParticipant ? remoteParticipants : participants,
+        groupSize,
+      ),
+    [excludeLocalParticipant, remoteParticipants, participants, groupSize],
+  );
+
+  const pageCount = participantGroups.length;
+
+  // update page when page count is reduced and selected page no longer exists
+  useEffect(() => {
+    if (page > pageCount - 1) {
+      setPage(Math.max(0, pageCount - 1));
+    }
+  }, [page, pageCount]);
+
+  const selectedGroup = participantGroups[page];
+
+  if (!call) return null;
+
+  return (
+    <>
+      {remoteParticipants.map((participant) => (
+        <Audio
+          muted={false}
+          key={participant.sessionId}
+          audioStream={participant.audioStream}
+          sinkId={localParticipant?.audioOutputDeviceId}
+        />
+      ))}
+      <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((currentPage) => Math.max(0, currentPage - 1))
+              }
+            />
+          )}
+          {selectedGroup && (
+            <PaginatedGridLayoutGroup
+              group={participantGroups[page]}
+              VideoPlaceholder={VideoPlaceholder}
+              ParticipantViewUI={ParticipantViewUI}
+            />
+          )}
+          {pageArrowsVisible && pageCount > 1 && (
+            <IconButton
+              disabled={page === pageCount - 1}
+              icon="caret-right"
+              onClick={() =>
+                setPage((currentPage) =>
+                  Math.min(pageCount - 1, currentPage + 1),
+                )
+              }
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,231 @@
+import { useEffect, useState } from 'react';
+
+import {
+  CallTypes,
+  combineComparators,
+  Comparator,
+  defaultSortPreset,
+  screenSharing,
+  SfuModels,
+  speakerLayoutSortPreset,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import {
+  useCall,
+  useLocalParticipant,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+
+import {
+  DefaultParticipantViewUI,
+  ParticipantView,
+  ParticipantViewProps,
+} from '../ParticipantView';
+import { IconButton } from '../../../components';
+import {
+  useHorizontalScrollPosition,
+  useVerticalScrollPosition,
+} from '../../../hooks';
+import clsx from 'clsx';
+
+export type SpeakerLayoutProps = {
+  ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
+  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
+  participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right';
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+
+const DefaultParticipantViewUIBar = () => (
+  <DefaultParticipantViewUI menuPlacement="top-end" />
+);
+
+const DefaultParticipantViewUISpotlight = () => <DefaultParticipantViewUI />;
+
+export const SpeakerLayout = ({
+  ParticipantViewUIBar = DefaultParticipantViewUIBar,
+  ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
+  VideoPlaceholder,
+  participantsBarPosition = 'bottom',
+}: SpeakerLayoutProps) => {
+  const call = useCall();
+  const [participantInSpotlight, ...otherParticipants] = useParticipants();
+  const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
+    null,
+  );
+  const isOneOnOneCall = otherParticipants.length === 1;
+  const localParticipant = useLocalParticipant();
+
+  useEffect(() => {
+    if (!scrollWrapper || !call) return;
+
+    const cleanup = call.viewportTracker.setViewport(scrollWrapper);
+
+    return () => cleanup();
+  }, [scrollWrapper, call]);
+
+  useEffect(() => {
+    if (!call) return;
+    // always show the remote participant in the spotlight
+    if (isOneOnOneCall) {
+      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
+    } else {
+      call.setSortParticipantsBy(speakerLayoutSortPreset);
+    }
+
+    return () => {
+      // reset the sorting to the default for the call type
+      const callConfig = CallTypes.get(call.type);
+      call.setSortParticipantsBy(
+        callConfig.options.sortParticipantsBy || defaultSortPreset,
+      );
+    };
+  }, [call, isOneOnOneCall]);
+
+  if (!call) return null;
+
+  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+  return (
+    <div className="str-video__speaker-layout__wrapper">
+      <div
+        className={clsx(
+          'str-video__speaker-layout',
+          `str-video__speaker-layout--variant-${participantsBarPosition}`,
+        )}
+      >
+        <div className="str-video__speaker-layout__spotlight">
+          {participantInSpotlight && (
+            <ParticipantView
+              participant={participantInSpotlight}
+              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-wrapper"
+              ref={setScrollWrapper}
+            >
+              <div className="str-video__speaker-layout__participants-bar">
+                {isSpeakerScreenSharing && (
+                  <div
+                    className="str-video__speaker-layout__participant-tile"
+                    key={participantInSpotlight.sessionId}
+                  >
+                    <ParticipantView
+                      participant={participantInSpotlight}
+                      sinkId={localParticipant?.audioOutputDeviceId}
+                      ParticipantViewUI={ParticipantViewUIBar}
+                      VideoPlaceholder={VideoPlaceholder}
+                    />
+                  </div>
+                )}
+                {otherParticipants.map((participant) => (
+                  <div
+                    className="str-video__speaker-layout__participant-tile"
+                    key={participant.sessionId}
+                  >
+                    <ParticipantView
+                      participant={participant}
+                      sinkId={localParticipant?.audioOutputDeviceId}
+                      ParticipantViewUI={ParticipantViewUIBar}
+                      VideoPlaceholder={VideoPlaceholder}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {(participantsBarPosition === 'left' ||
+              participantsBarPosition === 'right') && (
+              <VerticalScrollButtons scrollWrapper={scrollWrapper} />
+            )}
+            {(participantsBarPosition === 'top' ||
+              participantsBarPosition === 'bottom') && (
+              <HorizontalScrollButtons scrollWrapper={scrollWrapper} />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+type ScrollButtonsProps<T extends HTMLElement> = {
+  scrollWrapper: T | null;
+};
+
+const HorizontalScrollButtons = <T extends HTMLElement>({
+  scrollWrapper,
+}: ScrollButtonsProps<T>) => {
+  const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
+
+  const scrollStartClickHandler = () => {
+    scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
+  };
+
+  const scrollEndClickHandler = () => {
+    scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
+  };
+  return (
+    <>
+      {scrollPosition && scrollPosition !== 'start' && (
+        <IconButton
+          onClick={scrollStartClickHandler}
+          icon="caret-left"
+          className="str-video__speaker-layout__participants-bar--button-left"
+        />
+      )}
+      {scrollPosition && scrollPosition !== 'end' && (
+        <IconButton
+          onClick={scrollEndClickHandler}
+          icon="caret-right"
+          className="str-video__speaker-layout__participants-bar--button-right"
+        />
+      )}
+    </>
+  );
+};
+
+const VerticalScrollButtons = <T extends HTMLElement>({
+  scrollWrapper,
+}: ScrollButtonsProps<T>) => {
+  const scrollPosition = useVerticalScrollPosition(scrollWrapper);
+
+  const scrollTopClickHandler = () => {
+    scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
+  };
+
+  const scrollBottomClickHandler = () => {
+    scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
+  };
+  return (
+    <>
+      {scrollPosition && scrollPosition !== 'top' && (
+        <IconButton
+          onClick={scrollTopClickHandler}
+          icon="caret-up"
+          className="str-video__speaker-layout__participants-bar--button-top"
+        />
+      )}
+      {scrollPosition && scrollPosition !== 'bottom' && (
+        <IconButton
+          onClick={scrollBottomClickHandler}
+          icon="caret-down"
+          className="str-video__speaker-layout__participants-bar--button-bottom"
+        />
+      )}
+    </>
+  );
+};
+
+const hasScreenShare = (p?: StreamVideoParticipant) =>
+  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
+  if (a.isLoggedInUser) return 1;
+  if (b.isLoggedInUser) return -1;
+  return 0;
+};

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

@@ -0,0 +1,2 @@
+export * from './PaginatedGridLayout';
+export * from './SpeakerLayout';

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>
+    );
+  },
+);