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

package/src/components/StreamCall/CallParticipantsScreenView.tsx

@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+import { Call, SfuModels } from '@stream-io/video-client';
+
+import {
+  useLocalParticipant,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+import { ParticipantView, DefaultParticipantViewUI } from '../../core';
+import { Video } from '../Video';
+
+import { useVerticalScrollPosition } from '../../hooks';
+import { IconButton } from '../Button';
+
+export const CallParticipantsScreenView = (props: { call: Call }) => {
+  const { call } = props;
+  const localParticipant = useLocalParticipant();
+  const allParticipants = useParticipants();
+  const firstScreenSharingParticipant = allParticipants.find((p) =>
+    p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE),
+  );
+
+  const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!scrollWrapper) return;
+
+    const cleanup = call.viewportTracker.setViewport(scrollWrapper);
+
+    return () => cleanup();
+  }, [scrollWrapper, call.viewportTracker]);
+
+  const scrollUpClickHandler = () => {
+    scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
+  };
+
+  const scrollDownClickHandler = () => {
+    scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
+  };
+
+  const scrollPosition = useVerticalScrollPosition(scrollWrapper);
+
+  const [overlayVisible, setOverlayVisible] = useState(
+    () =>
+      firstScreenSharingParticipant?.sessionId === localParticipant?.sessionId,
+  );
+
+  return (
+    <div className="str-video__call-participants-screen-view">
+      <div className="str-video__call-participants-screen-view__screen">
+        {firstScreenSharingParticipant && (
+          <>
+            <span className="str-video__call-participants-screen-view__screen__presenter">
+              {firstScreenSharingParticipant.name ||
+                firstScreenSharingParticipant.userId}{' '}
+              is presenting their screen.
+            </span>
+            <div className="str-video__call-participants-screen-view__wrapper">
+              <Video
+                className="str-video__screen-share"
+                participant={firstScreenSharingParticipant}
+                kind="screen"
+                autoPlay
+                muted
+              />
+              {overlayVisible && (
+                <div className="str-video__call-participants-screen-view__overlay">
+                  <div>
+                    <div>
+                      To avoid an infinity mirror, don't share your entire
+                      screen or browser window.
+                    </div>
+                    <div>
+                      Share just a single tab or a different window instead.
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setOverlayVisible(false);
+                    }}
+                  >
+                    Got it
+                  </button>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="str-video__call-participants-screen-view__buttons-wrapper">
+        {scrollPosition && scrollPosition !== 'top' && (
+          <IconButton
+            onClick={scrollUpClickHandler}
+            icon="caret-up"
+            className="str-video__call-participants-screen-view__button-up"
+          />
+        )}
+        <div
+          ref={setScrollWrapper}
+          className="str-video__call-participants-screen-view__participants-wrapper"
+        >
+          <div className="str-video__call-participants-screen-view__participants">
+            {allParticipants.map((participant) => (
+              <ParticipantView
+                key={participant.sessionId}
+                participant={participant}
+                sinkId={localParticipant?.audioOutputDeviceId}
+                ParticipantViewUI={DefaultParticipantViewUI}
+              />
+            ))}
+          </div>
+        </div>
+        {scrollPosition && scrollPosition !== 'bottom' && (
+          <IconButton
+            onClick={scrollDownClickHandler}
+            icon="caret-down"
+            className="str-video__call-participants-screen-view__button-down"
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/StreamCall/CallParticipantsView.tsx

@@ -0,0 +1,24 @@
+import { Call } from '@stream-io/video-client';
+import { DefaultParticipantViewUI, ParticipantView } from '../../core';
+import {
+  useLocalParticipant,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+
+export const CallParticipantsView = (props: { call: Call }) => {
+  const localParticipant = useLocalParticipant();
+  const participants = useParticipants();
+  const grid = `str-video__grid-${participants.length || 1}`;
+  return (
+    <div className={`str-video__call-participants-view ${grid}`}>
+      {participants.map((participant) => (
+        <ParticipantView
+          key={participant.sessionId}
+          participant={participant}
+          sinkId={localParticipant?.audioOutputDeviceId}
+          ParticipantViewUI={DefaultParticipantViewUI}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/StreamCall/Stage.tsx

@@ -0,0 +1,22 @@
+import { Call } from '@stream-io/video-client';
+import { useHasOngoingScreenShare } from '@stream-io/video-react-bindings';
+
+import { CallParticipantsView } from './CallParticipantsView';
+import { CallParticipantsScreenView } from './CallParticipantsScreenView';
+
+/**
+ * @deprecated
+ */
+export const Stage = (props: { call: Call }) => {
+  const { call } = props;
+  const hasScreenShare = useHasOngoingScreenShare();
+  return (
+    <div className="str-video__stage">
+      {hasScreenShare ? (
+        <CallParticipantsScreenView call={call} />
+      ) : (
+        <CallParticipantsView call={call} />
+      )}
+    </div>
+  );
+};

package/src/components/StreamCall/index.ts

@@ -0,0 +1,4 @@
+export * from './Stage';
+
+export * from './CallParticipantsView';
+export * from './CallParticipantsScreenView';

package/src/components/StreamTheme/StreamTheme.tsx

@@ -0,0 +1,19 @@
+import { ElementType, HTMLProps, PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+export type StreamThemeProps = HTMLProps<HTMLElement> & {
+  as?: ElementType;
+};
+
+export const StreamTheme = ({
+  as: Component = 'div',
+  className,
+  children,
+  ...props
+}: PropsWithChildren<StreamThemeProps>) => {
+  return (
+    <Component {...props} className={clsx('str-video', className)}>
+      {children}
+    </Component>
+  );
+};

package/src/components/StreamTheme/index.ts

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

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,51 @@
+import { PropsWithChildren, useEffect } from 'react';
+import clsx from 'clsx';
+import { useFloatingUIPreset } from '../../hooks';
+import { Placement } from '@floating-ui/react';
+
+export type TooltipProps<T extends HTMLElement> = PropsWithChildren<{
+  /** Reference element to which the tooltip should attach to */
+  referenceElement: T | null;
+  /** Additional class applied to the tooltip root element */
+  tooltipClassName?: string;
+  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */
+  offset?: [number, number];
+  /** Popper's placement property defining default position of the tooltip, default 'top' */
+  tooltipPlacement?: Placement;
+  /** Tells component whether to render its contents */
+  visible?: boolean;
+}>;
+
+export const Tooltip = <T extends HTMLElement>({
+  children,
+  referenceElement,
+  tooltipClassName,
+  tooltipPlacement = 'top',
+  visible = false,
+}: TooltipProps<T>) => {
+  const { refs, x, y, strategy } = useFloatingUIPreset({
+    placement: tooltipPlacement,
+    strategy: 'absolute',
+  });
+
+  useEffect(() => {
+    refs.setReference(referenceElement);
+  }, [referenceElement, refs]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={clsx('str-video__tooltip', tooltipClassName)}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        overflowY: 'auto',
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Tooltip/WithTooltip.tsx

@@ -0,0 +1,39 @@
+import React, { ComponentProps, useState } from 'react';
+import { Tooltip, TooltipProps } from './Tooltip';
+import { useEnterLeaveHandlers } from './hooks';
+
+type WithPopupProps = ComponentProps<'div'> &
+  Omit<TooltipProps<HTMLDivElement>, 'referenceElement'>;
+
+// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
+export const WithTooltip = ({
+  title,
+  tooltipClassName,
+  tooltipPlacement,
+  ...props
+}: WithPopupProps) => {
+  const { handleMouseEnter, handleMouseLeave, tooltipVisible } =
+    useEnterLeaveHandlers<HTMLDivElement>();
+  const [tooltipAnchor, setTooltipAnchor] = useState<HTMLDivElement | null>(
+    null,
+  );
+
+  return (
+    <>
+      <Tooltip
+        referenceElement={tooltipAnchor}
+        visible={tooltipVisible}
+        tooltipClassName={tooltipClassName}
+        tooltipPlacement={tooltipPlacement}
+      >
+        {title || ''}
+      </Tooltip>
+      <div
+        ref={setTooltipAnchor}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      />
+    </>
+  );
+};

package/src/components/Tooltip/hooks/index.ts

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

package/src/components/Tooltip/hooks/useEnterLeaveHandlers.ts

@@ -0,0 +1,28 @@
+import { MouseEventHandler, useCallback, useState } from 'react';
+
+export const useEnterLeaveHandlers = <T extends HTMLElement>({
+  onMouseEnter,
+  onMouseLeave,
+}: Partial<
+  Record<'onMouseEnter' | 'onMouseLeave', MouseEventHandler<T>>
+> = {}) => {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  const handleMouseEnter: MouseEventHandler<T> = useCallback(
+    (e) => {
+      setTooltipVisible(true);
+      onMouseEnter?.(e);
+    },
+    [onMouseEnter],
+  );
+
+  const handleMouseLeave: MouseEventHandler<T> = useCallback(
+    (e) => {
+      setTooltipVisible(false);
+      onMouseLeave?.(e);
+    },
+    [onMouseLeave],
+  );
+
+  return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+};

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './WithTooltip';

package/src/components/Video/VideoPreview.tsx

@@ -0,0 +1,152 @@
+import {
+  ComponentType,
+  ReactEventHandler,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+import { disposeOfMediaStream } from '@stream-io/video-client';
+import { BaseVideo } from '../../core/components/Video';
+import {
+  DEVICE_STATE,
+  useMediaDevices,
+  useOnUnavailableVideoDevices,
+  useVideoDevices,
+} from '../../core';
+import { LoadingIndicator } from '../LoadingIndicator';
+
+const DefaultDisabledVideoPreview = () => {
+  return <div>Video is disabled</div>;
+};
+
+const DefaultNoCameraPreview = () => {
+  return <div>No camera found</div>;
+};
+
+type VideoErrorPreviewProps = {
+  message?: string;
+};
+const DefaultVideoErrorPreview = ({ message }: VideoErrorPreviewProps) => {
+  return (
+    <>
+      <div>Error:</div>
+      <p>{message || 'Unexpected error happened'}</p>
+    </>
+  );
+};
+
+export type VideoPreviewProps = {
+  /**
+   * Enforces mirroring of the video on the X axis. Defaults to true.
+   */
+  mirror?: boolean;
+  /**
+   * Component rendered when user turns off the video.
+   */
+  DisabledVideoPreview?: ComponentType;
+  /**
+   * Component rendered when no camera devices are available.
+   */
+  NoCameraPreview?: ComponentType;
+  /**
+   * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).
+   */
+  StartingCameraPreview?: ComponentType;
+  /**
+   * Component rendered when the video stream could not be retrieved.
+   */
+  VideoErrorPreview?: ComponentType<VideoErrorPreviewProps>;
+};
+
+export const VideoPreview = ({
+  mirror = true,
+  DisabledVideoPreview = DefaultDisabledVideoPreview,
+  NoCameraPreview = DefaultNoCameraPreview,
+  StartingCameraPreview = LoadingIndicator,
+  VideoErrorPreview = DefaultVideoErrorPreview,
+}: VideoPreviewProps) => {
+  const [stream, setStream] = useState<MediaStream>();
+  const {
+    selectedVideoDeviceId,
+    getVideoStream,
+    initialVideoState,
+    setInitialVideoState,
+  } = useMediaDevices();
+  // When there are 0 video devices (e.g. when laptop lid closed),
+  // we do not restart the video automatically when the device is again available,
+  // but rather leave turning the video on manually to the user.
+  useOnUnavailableVideoDevices(() =>
+    setInitialVideoState(DEVICE_STATE.stopped),
+  );
+  const videoDevices = useVideoDevices();
+
+  useEffect(() => {
+    if (!initialVideoState.enabled) return;
+
+    getVideoStream({ deviceId: selectedVideoDeviceId })
+      .then((s) => {
+        setStream((previousStream) => {
+          if (previousStream) {
+            disposeOfMediaStream(previousStream);
+          }
+          return s;
+        });
+      })
+      .catch((e) =>
+        setInitialVideoState({
+          ...DEVICE_STATE.error,
+          message: (e as Error).message,
+        }),
+      );
+    return () => {
+      setStream(undefined);
+    };
+  }, [
+    initialVideoState,
+    getVideoStream,
+    selectedVideoDeviceId,
+    setInitialVideoState,
+    videoDevices.length,
+  ]);
+
+  useEffect(() => {
+    if (initialVideoState.type === 'stopped') {
+      setStream(undefined);
+    }
+  }, [initialVideoState]);
+
+  const handleOnPlay: ReactEventHandler<HTMLVideoElement> = useCallback(() => {
+    setInitialVideoState(DEVICE_STATE.playing);
+  }, [setInitialVideoState]);
+
+  let contents;
+  if (initialVideoState.type === 'error') {
+    contents = <VideoErrorPreview />;
+  } else if (initialVideoState.type === 'stopped' && !videoDevices.length) {
+    contents = <NoCameraPreview />;
+  } else if (initialVideoState.enabled) {
+    const loading = initialVideoState.type === 'starting';
+    contents = (
+      <>
+        {stream && (
+          <BaseVideo
+            stream={stream}
+            className={clsx('str-video__video-preview', {
+              'str-video__video-preview--mirror': mirror,
+              'str-video__video-preview--loading': loading,
+            })}
+            onPlay={handleOnPlay}
+          />
+        )}
+        {loading && <StartingCameraPreview />}
+      </>
+    );
+  } else {
+    contents = <DisabledVideoPreview />;
+  }
+
+  return (
+    <div className={clsx('str-video__video-preview-container')}>{contents}</div>
+  );
+};

package/src/components/Video/index.ts

@@ -0,0 +1,4 @@
+export * from '../../core/components/Video/Video';
+export * from '../../core/components/Video/BaseVideo';
+export * from '../../core/components/Video/DefaultVideoPlaceholder';
+export * from './VideoPreview';

package/src/components/index.ts

@@ -0,0 +1,16 @@
+export * from './Avatar';
+export * from './Button';
+export * from './CallControls';
+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 './StreamTheme';
+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';