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

package/src/components/StreamCall/CallStats.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  AggregatedStatsReport,
+  CallStatsReport,
+} from '@stream-io/video-client';
+import { useCurrentCallStatsReport } from '@stream-io/video-react-bindings';
+import { CallStatsLatencyChart } from './CallStatsLatencyChart';
+
+export const CallStats = () => {
+  const [latencyBuffer, setLatencyBuffer] = useState<
+    Array<{ x: number; y: number }>
+  >(() => {
+    const now = Date.now();
+    return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
+  });
+
+  const [publishBitrate, setPublishBitrate] = useState('-');
+  const [subscribeBitrate, setSubscribeBitrate] = useState('-');
+  const previousStats = useRef<CallStatsReport>();
+  const callStatsReport = useCurrentCallStatsReport();
+
+  useEffect(() => {
+    if (!callStatsReport) return;
+    if (!previousStats.current) {
+      previousStats.current = callStatsReport;
+      return;
+    }
+    const previousCallStatsReport = previousStats.current;
+    setPublishBitrate(() => {
+      return calculatePublishBitrate(previousCallStatsReport, callStatsReport);
+    });
+    setSubscribeBitrate(() => {
+      return calculateSubscribeBitrate(
+        previousCallStatsReport,
+        callStatsReport,
+      );
+    });
+
+    setLatencyBuffer((latencyBuf) => {
+      const newLatencyBuffer = latencyBuf.slice(-19);
+      newLatencyBuffer.push({
+        x: callStatsReport.timestamp,
+        y: callStatsReport.publisherStats.averageRoundTripTimeInMs,
+      });
+      return newLatencyBuffer;
+    });
+
+    previousStats.current = callStatsReport;
+  }, [callStatsReport]);
+
+  return (
+    <div className="str-video__call-stats">
+      {callStatsReport && (
+        <>
+          <h3>Call Latency</h3>
+          <CallStatsLatencyChart values={latencyBuffer} />
+
+          <h3>Call performance</h3>
+          <div className="str-video__call-stats__card-container">
+            <StatCard label="Region" value={callStatsReport.datacenter} />
+            <StatCard
+              label="Latency"
+              value={`${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`}
+            />
+            <StatCard
+              label="Receive jitter"
+              value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}
+            />
+            <StatCard
+              label="Publish jitter"
+              value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
+            />
+            <StatCard
+              label="Publish resolution"
+              value={toFrameSize(callStatsReport.publisherStats)}
+            />
+            <StatCard
+              label="Publish quality drop reason"
+              value={callStatsReport.publisherStats.qualityLimitationReasons}
+            />
+            <StatCard
+              label="Receiving resolution"
+              value={toFrameSize(callStatsReport.subscriberStats)}
+            />
+            <StatCard
+              label="Receive quality drop reason"
+              value={callStatsReport.subscriberStats.qualityLimitationReasons}
+            />
+            <StatCard label="Publish bitrate" value={publishBitrate} />
+            <StatCard label="Receiving bitrate" value={subscribeBitrate} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+const StatCard = (props: { label: string; value: string }) => {
+  const { label, value } = props;
+  return (
+    <div className="str-video__call-stats__card">
+      <div className="str-video__call-stats__card_label">{label}</div>
+      <div className="str-video__call-stats__card_value">{value}</div>
+    </div>
+  );
+};
+
+const toFrameSize = (stats: AggregatedStatsReport) => {
+  const {
+    highestFrameWidth: w,
+    highestFrameHeight: h,
+    highestFramesPerSecond: fps,
+  } = stats;
+  let size = `-`;
+  if (w && h) {
+    size = `${w}x${h}`;
+    if (fps) {
+      size += `@${fps}fps.`;
+    }
+  }
+  return size;
+};
+
+const calculatePublishBitrate = (
+  previousCallStatsReport: CallStatsReport,
+  callStatsReport: CallStatsReport,
+) => {
+  const {
+    publisherStats: {
+      totalBytesSent: previousTotalBytesSent,
+      timestamp: previousTimestamp,
+    },
+  } = previousCallStatsReport;
+
+  const {
+    publisherStats: { totalBytesSent, timestamp },
+  } = callStatsReport;
+
+  const bytesSent = totalBytesSent - previousTotalBytesSent;
+  const timeElapsed = timestamp - previousTimestamp;
+  return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+
+const calculateSubscribeBitrate = (
+  previousCallStatsReport: CallStatsReport,
+  callStatsReport: CallStatsReport,
+) => {
+  const {
+    subscriberStats: {
+      totalBytesReceived: previousTotalBytesReceived,
+      timestamp: previousTimestamp,
+    },
+  } = previousCallStatsReport;
+
+  const {
+    subscriberStats: { totalBytesReceived, timestamp },
+  } = callStatsReport;
+
+  const bytesReceived = totalBytesReceived - previousTotalBytesReceived;
+  const timeElapsed = timestamp - previousTimestamp;
+  return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
+};

package/src/components/StreamCall/CallStatsLatencyChart.tsx

@@ -0,0 +1,58 @@
+import { ResponsiveLine } from '@nivo/line';
+
+export const CallStatsLatencyChart = (props: {
+  values: Array<{ x: number; y: number }>;
+}) => {
+  const { values } = props;
+  let max = 0;
+  const data = values.map((point) => {
+    const { y } = point;
+    max = Math.max(max, y);
+    return point;
+  });
+  return (
+    <div className="str-video__call-stats-line-chart-container">
+      <ResponsiveLine
+        colors={{ scheme: 'blues' }}
+        data={[
+          {
+            id: 'Latency',
+            data: data,
+          },
+        ]}
+        animate={false}
+        margin={{ top: 10, right: 5, bottom: 5, left: 30 }}
+        enablePoints
+        enableGridX={false}
+        enableGridY
+        enableSlices="x"
+        isInteractive
+        useMesh={false}
+        xScale={{ type: 'point' }}
+        yScale={{
+          type: 'linear',
+          min: 0,
+          max: max < 220 ? 220 : max + 30,
+          nice: true,
+        }}
+        theme={{
+          axis: {
+            ticks: {
+              text: {
+                fill: '#FCFCFD',
+              },
+              line: {
+                stroke: '#FCFCFD',
+              },
+            },
+          },
+          grid: {
+            line: {
+              strokeWidth: 0.1,
+            },
+          },
+        }}
+      />
+    </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/hooks/index.ts

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

package/src/components/StreamCall/hooks/useScrollPosition.ts

@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+
+const SCROLL_TRESHOLD = 10;
+
+/**
+ * Hook which observes element's scroll position and returns text value based on the
+ * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)
+ */
+export const useVerticalScrollPosition = (
+  scrollElement: HTMLElement | null,
+  treshold: number = SCROLL_TRESHOLD,
+) => {
+  const [scrollPosition, setScrollPosition] = useState<
+    'top' | 'bottom' | 'between' | null
+  >(null);
+
+  useEffect(() => {
+    if (!scrollElement) return;
+
+    const scrollHandler = () => {
+      const element = scrollElement;
+
+      const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
+
+      if (!hasVerticalScrollbar) return setScrollPosition(null);
+
+      const isAtTheTop = element.scrollTop <= treshold;
+      if (isAtTheTop) return setScrollPosition('top');
+
+      const isAtTheBottom =
+        Math.abs(
+          element.scrollHeight - element.scrollTop - element.clientHeight,
+        ) <= treshold;
+
+      if (isAtTheBottom) return setScrollPosition('bottom');
+
+      setScrollPosition('between');
+    };
+
+    const resizeObserver = new ResizeObserver(scrollHandler);
+    resizeObserver.observe(scrollElement);
+
+    scrollElement.addEventListener('scroll', scrollHandler);
+    return () => {
+      scrollElement.removeEventListener('scroll', scrollHandler);
+      resizeObserver.disconnect();
+    };
+  }, [scrollElement, treshold]);
+
+  return scrollPosition;
+};
+
+export const useHorizontalScrollPosition = (
+  scrollElement: HTMLElement | null,
+  treshold: number = SCROLL_TRESHOLD,
+) => {
+  const [scrollPosition, setScrollPosition] = useState<
+    'start' | 'end' | 'between' | null
+  >(null);
+
+  useEffect(() => {
+    if (!scrollElement) return;
+
+    const scrollHandler = () => {
+      const element = scrollElement;
+
+      const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
+
+      if (!hasHorizontalScrollbar) return setScrollPosition(null);
+
+      const isAtTheStart = element.scrollLeft <= treshold;
+      if (isAtTheStart) return setScrollPosition('start');
+
+      const isAtTheEnd =
+        Math.abs(
+          element.scrollWidth - element.scrollLeft - element.clientWidth,
+        ) <= treshold;
+
+      if (isAtTheEnd) return setScrollPosition('end');
+
+      setScrollPosition('between');
+    };
+
+    const resizeObserver = new ResizeObserver(scrollHandler);
+    resizeObserver.observe(scrollElement);
+
+    scrollElement.addEventListener('scroll', scrollHandler);
+    return () => {
+      scrollElement.removeEventListener('scroll', scrollHandler);
+      resizeObserver.disconnect();
+    };
+  }, [scrollElement, treshold]);
+
+  return scrollPosition;
+};

package/src/components/StreamCall/index.ts

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

package/src/components/StreamMeeting/StreamMeeting.tsx

@@ -0,0 +1,80 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { Call, CallingState, JoinCallRequest } from '@stream-io/video-client';
+import {
+  StreamCallProvider,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import { MediaDevicesProvider, MediaDevicesProviderProps } from '../../core';
+
+type InitWithCallCID = {
+  callId: string;
+  callType: string;
+  call?: never;
+};
+
+type InitWithCallInstance = {
+  call: Call | undefined;
+  callId?: never;
+  callType?: never;
+};
+
+type InitStreamMeeting = InitWithCallCID | InitWithCallInstance;
+
+export type StreamMeetingProps = InitStreamMeeting & {
+  /**
+   * If true, the call will be joined automatically.
+   * Usually, in the "ring" scenario, this flag should be set to false as
+   * the callee should decide whether to join the call or not.
+   *
+   * @default true.
+   */
+  autoJoin?: boolean;
+
+  /**
+   * An optional data to pass when joining the call.
+   */
+  data?: JoinCallRequest;
+
+  /**
+   * An optional props to pass to the `MediaDevicesProvider`.
+   */
+  mediaDevicesProviderProps?: MediaDevicesProviderProps;
+};
+
+export const StreamMeeting = ({
+  children,
+  callId,
+  callType,
+  call,
+  autoJoin = true,
+  data,
+  mediaDevicesProviderProps,
+}: PropsWithChildren<StreamMeetingProps>) => {
+  const client = useStreamVideoClient();
+  const [activeCall, setActiveCall] = useState<Call | undefined>(call);
+
+  useEffect(() => {
+    if (!client) return;
+
+    if (callId && callType && !activeCall) {
+      const newCall = client.call(callType, callId);
+      setActiveCall(newCall);
+    }
+  }, [activeCall, callId, callType, client]);
+
+  useEffect(() => {
+    if (autoJoin && activeCall?.state.callingState === CallingState.IDLE) {
+      activeCall.join(data).catch((err) => {
+        console.error(`Failed to join call`, err);
+      });
+    }
+  }, [activeCall, autoJoin, data]);
+
+  return (
+    <StreamCallProvider call={activeCall}>
+      <MediaDevicesProvider {...mediaDevicesProviderProps}>
+        {children}
+      </MediaDevicesProvider>
+    </StreamCallProvider>
+  );
+};

package/src/components/StreamMeeting/index.ts

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

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,127 @@
+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/BaseVideo';
+import { DEVICE_STATE, useMediaDevices } from '../../core/contexts';
+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 = {
+  mirror?: boolean;
+  DisabledVideoPreview?: ComponentType;
+  NoCameraPreview?: ComponentType;
+  StartingCameraPreview?: ComponentType;
+  VideoErrorPreview?: ComponentType<VideoErrorPreviewProps>;
+};
+
+export const VideoPreview = ({
+  mirror = true,
+  DisabledVideoPreview = DefaultDisabledVideoPreview,
+  NoCameraPreview = DefaultNoCameraPreview,
+  StartingCameraPreview = LoadingIndicator,
+  VideoErrorPreview = DefaultVideoErrorPreview,
+}: VideoPreviewProps) => {
+  const [stream, setStream] = useState<MediaStream>();
+
+  const {
+    videoDevices,
+    selectedVideoDeviceId,
+    getVideoStream,
+    initialVideoState,
+    setInitialVideoState,
+  } = useMediaDevices();
+
+  useEffect(() => {
+    if (!initialVideoState.enabled || videoDevices.length === 0) return;
+
+    getVideoStream(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/VideoPlaceholder';
+export * from './VideoPreview';