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

package/src/components/index.ts

@@ -0,0 +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 './Permissions';
+export * from './StreamCall';
+export * from './StreamMeeting';
+export * from './Search';
+export * from './Tooltip';
+export * from './Video';

package/src/core/components/Audio/Audio.tsx

@@ -0,0 +1,42 @@
+import {
+  AudioHTMLAttributes,
+  DetailedHTMLProps,
+  useEffect,
+  useRef,
+} from 'react';
+import { StreamVideoParticipant } from '@stream-io/video-client';
+
+export type AudioProps = DetailedHTMLProps<
+  AudioHTMLAttributes<HTMLAudioElement>,
+  HTMLAudioElement
+> &
+  Pick<StreamVideoParticipant, 'audioStream'> & {
+    sinkId?: string;
+  };
+
+// TODO: rename to BaseAudio
+export const Audio = ({ audioStream, sinkId, ...rest }: AudioProps) => {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  useEffect(() => {
+    const $el = audioRef.current;
+    if (!($el && audioStream)) return;
+
+    console.log(`Attaching audio stream`, $el, audioStream);
+    $el.srcObject = audioStream;
+    return () => {
+      $el.srcObject = null;
+    };
+  }, [audioStream]);
+
+  useEffect(() => {
+    const $el = audioRef.current;
+    if (!$el || !sinkId) return;
+
+    console.log(`Setting sinkId`, $el, sinkId);
+    if (($el as any).setSinkId) {
+      ($el as any).setSinkId(sinkId);
+    }
+  }, [sinkId]);
+
+  return <audio autoPlay ref={audioRef} {...rest} />;
+};

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

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

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

@@ -0,0 +1,163 @@
+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 { ParticipantBox } from '../ParticipantBox';
+import { Audio } from '../Audio';
+import { IconButton } from '../../../components';
+
+const GROUP_SIZE = 16;
+
+type PaginatedGridLayoutGroupProps = {
+  /**
+   * The group of participants to render.
+   */
+  group: Array<StreamVideoParticipant | StreamVideoLocalParticipant>;
+
+  /**
+   * Turns on/off the status indicator icons (mute, connection quality, etc...)
+   * on the participant boxes.
+   */
+  indicatorsVisible?: boolean;
+};
+const PaginatedGridLayoutGroup = ({
+  group,
+  indicatorsVisible = true,
+}: PaginatedGridLayoutGroupProps) => {
+  const call = useCall();
+  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) => (
+        <ParticipantBox
+          key={participant.sessionId}
+          participant={participant}
+          call={call!}
+          indicatorsVisible={indicatorsVisible}
+          muteAudio
+        />
+      ))}
+    </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 status indicator icons (mute, connection quality, etc...)
+   * on the participant boxes.
+   */
+  indicatorsVisible?: boolean;
+
+  /**
+   * Turns on/off the pagination arrows.
+   */
+  pageArrowsVisible?: boolean;
+};
+
+export const PaginatedGridLayout = ({
+  groupSize = GROUP_SIZE,
+  excludeLocalParticipant = false,
+  indicatorsVisible = true,
+  pageArrowsVisible = true,
+}: PaginatedGridLayoutProps) => {
+  const [page, setPage] = useState(0);
+
+  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(pageCount - 1);
+  }, [page, pageCount]);
+
+  const selectedGroup = participantGroups[page];
+
+  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((pv) => (pv === 0 ? pv : pv - 1))}
+            />
+          )}
+          {selectedGroup && (
+            <PaginatedGridLayoutGroup
+              group={participantGroups[page]}
+              indicatorsVisible={indicatorsVisible}
+            />
+          )}
+          {pageArrowsVisible && pageCount > 1 && (
+            <IconButton
+              disabled={page === pageCount - 1}
+              icon="caret-right"
+              onClick={() =>
+                setPage((pv) => (pv === pageCount - 1 ? pv : pv + 1))
+              }
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+// 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

@@ -0,0 +1,145 @@
+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 { ParticipantBox } from '../ParticipantBox';
+import { IconButton } from '../../../components/Button';
+import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
+
+export const SpeakerLayout = () => {
+  const call = useCall()!;
+  const [participantInSpotlight, ...otherParticipants] = useParticipants();
+  const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
+    null,
+  );
+  const isOneOnOneCall = otherParticipants.length === 1;
+  const localParticipant = useLocalParticipant();
+
+  const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
+
+  const scrollStartClickHandler = () => {
+    scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
+  };
+
+  const scrollEndClickHandler = () => {
+    scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (!scrollWrapper) return;
+
+    const cleanup = call.viewportTracker.setViewport(scrollWrapper);
+
+    return () => cleanup();
+  }, [scrollWrapper, call.viewportTracker]);
+
+  useEffect(() => {
+    // 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]);
+
+  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+  return (
+    <div className="str-video__speaker-layout--wrapper">
+      <div className="str-video__speaker-layout">
+        <div className="str-video__speaker-layout--spotlight">
+          {participantInSpotlight && (
+            <ParticipantBox
+              participant={participantInSpotlight}
+              call={call}
+              muteAudio={isSpeakerScreenSharing}
+              videoKind={isSpeakerScreenSharing ? 'screen' : 'video'}
+              sinkId={localParticipant?.audioOutputDeviceId}
+            />
+          )}
+        </div>
+        {otherParticipants.length > 0 && (
+          <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"
+              />
+            )}
+            <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}
+                  >
+                    <ParticipantBox
+                      participant={participantInSpotlight}
+                      call={call}
+                      sinkId={localParticipant?.audioOutputDeviceId}
+                      toggleMenuPosition="top"
+                    />
+                  </div>
+                )}
+                {otherParticipants.map((participant) => (
+                  <div
+                    className="str-video__speaker-layout--participant-tile"
+                    key={participant.sessionId}
+                  >
+                    <ParticipantBox
+                      participant={participant}
+                      call={call}
+                      sinkId={localParticipant?.audioOutputDeviceId}
+                      toggleMenuPosition="top"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {scrollPosition && scrollPosition !== 'end' && (
+              <IconButton
+                onClick={scrollEndClickHandler}
+                icon="caret-right"
+                className="str-video__speaker-layout--participants-bar-button-right"
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+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/ParticipantBox/ParticipantBox.tsx

@@ -0,0 +1,248 @@
+import { forwardRef, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import {
+  Call,
+  SfuModels,
+  StreamVideoParticipant,
+  VisibilityState,
+} from '@stream-io/video-client';
+import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
+import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
+import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
+import { Audio } from '../Audio/Audio';
+import { Video } from '../../../components/Video';
+import { Notification } from '../../../components/Notification';
+import { Reaction } from '../../../components/Reaction';
+import { MenuToggle, ToggleMenuButtonProps } from '../../../components/Menu';
+import { IconButton } from '../../../components/Button';
+import { ParticipantActionsContextMenu } from '../../../components/CallParticipantsList';
+
+export interface ParticipantBoxProps {
+  /**
+   * The participant bound to this component.
+   */
+  participant: StreamVideoParticipant;
+
+  /**
+   * The current call.
+   */
+  call: Call;
+
+  /**
+   * 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 status indicator icons (mute, connection quality, etc...).
+   */
+  indicatorsVisible?: boolean;
+
+  /**
+   * 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;
+
+  /**
+   * An additional list of class names to append to the root DOM element.
+   */
+  className?: string;
+
+  /**
+   * The position of the toggle button menu, relative to its button element.
+   */
+  toggleMenuPosition?: 'top' | 'bottom';
+}
+
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  (props, ref) => {
+    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
+  },
+);
+
+export const ParticipantBox = (props: ParticipantBoxProps) => {
+  const {
+    participant,
+    indicatorsVisible = true,
+    videoKind = 'video',
+    call,
+    sinkId,
+    muteAudio,
+    setVideoElementRef,
+    className,
+    toggleMenuPosition = 'bottom',
+  } = props;
+
+  const {
+    audioStream,
+    videoStream,
+    isLoggedInUser: isLocalParticipant,
+    isDominantSpeaker,
+    isSpeaking,
+    publishedTracks,
+    connectionQuality,
+    sessionId,
+    reaction,
+  } = participant;
+
+  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const isPinned = !!participant.pinnedAt;
+
+  const [trackedElement, setTrackedElement] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  const connectionQualityAsString =
+    !!connectionQuality &&
+    String(SfuModels.ConnectionQuality[connectionQuality]).toLowerCase();
+
+  useEffect(() => {
+    if (!trackedElement) return;
+
+    const unobserve = call.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, call.viewportTracker, call.state, sessionId]);
+
+  const isDebugMode = useIsDebugMode();
+  return (
+    <div
+      className={clsx(
+        'str-video__participant',
+        isSpeaking && 'str-video__participant--speaking',
+        !hasVideo && 'str-video__participant--no-video',
+        !hasAudio && 'str-video__participant--no-audio',
+        className,
+      )}
+      ref={setTrackedElement}
+    >
+      <MenuToggle
+        strategy="fixed"
+        placement={toggleMenuPosition === 'top' ? 'top-end' : 'bottom-end'}
+        ToggleButton={ToggleButton}
+      >
+        <ParticipantActionsContextMenu participant={participant} />
+      </MenuToggle>
+
+      <div className="str-video__video-container">
+        <Audio
+          // mute the local participant, as we don't want to hear ourselves
+          muted={participant.isLoggedInUser || muteAudio}
+          sinkId={sinkId}
+          audioStream={audioStream}
+        />
+        <Video
+          call={call}
+          participant={participant}
+          kind={videoKind}
+          setVideoElementRef={setVideoElementRef}
+          className={clsx('str-video__remote-video', {
+            'str-video__remote-video--mirror':
+              isLocalParticipant && videoKind === 'video',
+            'str-video__screen-share': videoKind === 'screen',
+          })}
+          // mute the local participant, as we don't want to hear ourselves
+          muted={participant.isLoggedInUser}
+          autoPlay
+        />
+        {reaction && (
+          <Reaction reaction={reaction} sessionId={sessionId} call={call} />
+        )}
+        <div className="str-video__participant_details">
+          <span className="str-video__participant_name">
+            {participant.name || participant.userId}
+            {indicatorsVisible && isDominantSpeaker && (
+              <span
+                className="str-video__participant_name--dominant_speaker"
+                title="Dominant speaker"
+              />
+            )}
+            {indicatorsVisible && (
+              <Notification
+                isVisible={
+                  isLocalParticipant &&
+                  connectionQuality === SfuModels.ConnectionQuality.POOR
+                }
+                message="Poor connection quality. Please check your internet connection."
+              >
+                {connectionQualityAsString && (
+                  <span
+                    className={clsx(
+                      'str-video__participant__connection-quality',
+                      `str-video__participant__connection-quality--${connectionQualityAsString}`,
+                    )}
+                    title={connectionQualityAsString}
+                  />
+                )}
+              </Notification>
+            )}
+            {indicatorsVisible && !hasAudio && (
+              <span className="str-video__participant_name--audio-muted"></span>
+            )}
+            {indicatorsVisible && !hasVideo && (
+              <span className="str-video__participant_name--video-muted"></span>
+            )}
+            {indicatorsVisible && isPinned && (
+              // TODO: remove this monstrosity once we have a proper design
+              <span
+                title="Unpin"
+                onClick={() =>
+                  call.setParticipantPinnedAt(participant.sessionId)
+                }
+                style={{ cursor: 'pointer' }}
+                className="str-video__participant_name--pinned"
+              ></span>
+            )}
+          </span>
+          {isDebugMode && (
+            <>
+              <DebugParticipantPublishQuality
+                participant={participant}
+                call={call}
+              />
+              <DebugStatsView
+                call={call}
+                kind={isLocalParticipant ? 'publisher' : 'subscriber'}
+                mediaStream={videoStream}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,68 @@
+import {
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useState,
+  VideoHTMLAttributes,
+} from 'react';
+import clsx from 'clsx';
+import { Browsers } from '@stream-io/video-client';
+
+export type VideoProps = DetailedHTMLProps<
+  VideoHTMLAttributes<HTMLVideoElement>,
+  HTMLVideoElement
+> & {
+  stream?: MediaStream;
+};
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+export const BaseVideo = forwardRef<HTMLVideoElement, VideoProps>(
+  ({ 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;
+      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}
+        className={clsx('str-video__base-video', rest.className)}
+        ref={setRef}
+      />
+    );
+  },
+);