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

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -0,0 +1,255 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useState,
+  ComponentProps,
+} from 'react';
+import {
+  Restricted,
+  useCall,
+  useCallMetadata,
+  useOwnCapabilities,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+import {
+  name,
+  OwnCapability,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import { clsx } from 'clsx';
+
+import { BlockedUserListing } from './BlockedUserListing';
+import {
+  CopyToClipboardButtonWithPopup,
+  IconButton,
+  TextButton,
+} from '../Button';
+import { CallParticipantListHeader } from './CallParticipantListHeader';
+import { CallParticipantListing } from './CallParticipantListing';
+import { EmptyParticipantSearchList } from './EmptyParticipantSearchList';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { SearchInput, SearchResults } from '../Search';
+import { useSearch, UseSearchParams } from '../Search/hooks';
+import {
+  GenericMenu,
+  GenericMenuButtonItem,
+  MenuToggle,
+  ToggleMenuButtonProps,
+} from '../Menu';
+
+type CallParticipantListProps = {
+  /** Click event listener function to be invoked in order to dismiss/hide the CallParticipantsList from the UI */
+  onClose: () => void;
+  /** Custom function to override the searching logic of active participants */
+  activeUsersSearchFn?: UseSearchParams<StreamVideoParticipant>['searchFn'];
+  /** Custom function to override the searching logic of blocked users */
+  blockedUsersSearchFn?: UseSearchParams<string>['searchFn'];
+  /** Interval in ms, during which the participant search calls will be throttled. The default value is 200ms. */
+  debounceSearchInterval?: number;
+};
+
+const UserListTypes = {
+  active: 'Active users',
+  blocked: 'Blocked users',
+} as const;
+
+export const CallParticipantsList = ({
+  onClose,
+  activeUsersSearchFn,
+  blockedUsersSearchFn,
+  debounceSearchInterval,
+}: CallParticipantListProps) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [userListType, setUserListType] =
+    useState<keyof typeof UserListTypes>('active');
+
+  const exitSearch = useCallback(() => setSearchQuery(''), []);
+
+  return (
+    <div className="str-video__participant-list">
+      <CallParticipantListHeader onClose={onClose} />
+      <SearchInput
+        value={searchQuery}
+        onChange={({ currentTarget }) => setSearchQuery(currentTarget.value)}
+        exitSearch={exitSearch}
+        isActive={!!searchQuery}
+      />
+      <CallParticipantListContentHeader
+        userListType={userListType}
+        setUserListType={setUserListType}
+      />
+      <div className="str-video__participant-list__content">
+        {userListType === 'active' && (
+          <ActiveUsersSearchResults
+            searchQuery={searchQuery}
+            activeUsersSearchFn={activeUsersSearchFn}
+            debounceSearchInterval={debounceSearchInterval}
+          />
+        )}
+        {userListType === 'blocked' && (
+          <BlockedUsersSearchResults
+            searchQuery={searchQuery}
+            blockedUsersSearchFn={blockedUsersSearchFn}
+            debounceSearchInterval={debounceSearchInterval}
+          />
+        )}
+      </div>
+      <div className="str-video__participant-list__footer">
+        <CopyToClipboardButtonWithPopup
+          Button={InviteLinkButton}
+          copyValue={typeof window !== 'undefined' ? window.location.href : ''}
+        />
+      </div>
+    </div>
+  );
+};
+
+const CallParticipantListContentHeader = ({
+  userListType,
+  setUserListType,
+}: {
+  userListType: keyof typeof UserListTypes;
+  setUserListType: React.Dispatch<
+    React.SetStateAction<keyof typeof UserListTypes>
+  >;
+}) => {
+  const ownCapabilities = useOwnCapabilities();
+  const call = useCall();
+
+  const muteAll = () => {
+    call?.muteAllUsers('audio');
+  };
+
+  return (
+    <div className="str-video__participant-list__content-header">
+      <MenuToggle placement="bottom-end" ToggleButton={ToggleButton}>
+        <GenericMenu>
+          {(
+            Object.keys(UserListTypes) as Array<keyof typeof UserListTypes>
+          ).map((lt) => (
+            <GenericMenuButtonItem
+              key={lt}
+              aria-selected={lt === userListType}
+              onClick={() => setUserListType(lt)}
+            >
+              {UserListTypes[lt]}
+            </GenericMenuButtonItem>
+          ))}
+        </GenericMenu>
+      </MenuToggle>
+      <div className="str-video__participant-list__content-header-title">
+        <span>{UserListTypes[userListType]}</span>
+        {userListType === 'active' && (
+          <Restricted
+            availableGrants={ownCapabilities} // TODO: remove this line once Oliver's PR lands
+            requiredGrants={[OwnCapability.MUTE_USERS]}
+          >
+            <TextButton onClick={muteAll}>Mute all</TextButton>
+          </Restricted>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const ActiveUsersSearchResults = ({
+  searchQuery,
+  activeUsersSearchFn: activeUsersSearchFnFromProps,
+  debounceSearchInterval = 200,
+}: Pick<
+  CallParticipantListProps,
+  'activeUsersSearchFn' | 'debounceSearchInterval'
+> & { searchQuery: string }) => {
+  const participants = useParticipants({ sortBy: name });
+
+  const activeUsersSearchFn = useCallback(
+    (queryString: string) => {
+      const queryRegExp = new RegExp(queryString, 'i');
+      return Promise.resolve(
+        participants.filter((participant) => {
+          return participant.name.match(queryRegExp);
+        }),
+      );
+    },
+    [participants],
+  );
+
+  const { searchQueryInProgress, searchResults } =
+    useSearch<StreamVideoParticipant>({
+      searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
+      debounceInterval: debounceSearchInterval,
+      searchQuery,
+    });
+
+  return (
+    <SearchResults<StreamVideoParticipant>
+      EmptySearchResultComponent={EmptyParticipantSearchList}
+      LoadingIndicator={LoadingIndicator}
+      searchQueryInProgress={searchQueryInProgress}
+      searchResults={searchQuery ? searchResults : participants}
+      SearchResultList={CallParticipantListing}
+    />
+  );
+};
+
+const BlockedUsersSearchResults = ({
+  blockedUsersSearchFn: blockedUsersSearchFnFromProps,
+  debounceSearchInterval = 200,
+  searchQuery,
+}: Pick<
+  CallParticipantListProps,
+  'blockedUsersSearchFn' | 'debounceSearchInterval'
+> & { searchQuery: string }) => {
+  const { blocked_user_ids: blockedUsers = [] } = useCallMetadata()!;
+
+  const blockedUsersSearchFn = useCallback(
+    (queryString: string) => {
+      const queryRegExp = new RegExp(queryString, 'i');
+      return Promise.resolve(
+        blockedUsers.filter((blockedUser) => {
+          return blockedUser.match(queryRegExp);
+        }),
+      );
+    },
+    [blockedUsers],
+  );
+
+  const { searchQueryInProgress, searchResults } = useSearch<string>({
+    searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,
+    debounceInterval: debounceSearchInterval,
+    searchQuery,
+  });
+
+  return (
+    <SearchResults<string>
+      EmptySearchResultComponent={EmptyParticipantSearchList}
+      LoadingIndicator={LoadingIndicator}
+      searchQueryInProgress={searchQueryInProgress}
+      searchResults={searchQuery ? searchResults : blockedUsers}
+      SearchResultList={BlockedUserListing}
+    />
+  );
+};
+
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  (props, ref) => {
+    return <IconButton enabled={props.menuShown} icon="caret-down" ref={ref} />;
+  },
+);
+
+const InviteLinkButton = forwardRef(
+  (
+    { className, ...props }: ComponentProps<'button'>,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => (
+    <button
+      {...props}
+      className={clsx('str-video__invite-link-button', className)}
+      ref={ref}
+    >
+      <div className="str-video__invite-participant-icon" />
+      <div className="str-video__invite-link-button__text">Invite Link</div>
+    </button>
+  ),
+);

package/src/components/CallParticipantsList/EmptyParticipantSearchList.tsx

@@ -0,0 +1,7 @@
+export const EmptyParticipantSearchList = () => {
+  return (
+    <div className="str-video__participant-list--empty">
+      No participants found
+    </div>
+  );
+};

package/src/components/CallParticipantsList/index.ts

@@ -0,0 +1,3 @@
+export * from './CallParticipantsList';
+export * from './CallParticipantListing';
+export * from './CallParticipantListingItem';

package/src/components/CallRecordingList/CallRecordingList.tsx

@@ -0,0 +1,60 @@
+import { ComponentType } from 'react';
+import { CallRecording } from '@stream-io/video-client';
+
+import {
+  CallRecordingListHeader as DefaultCallRecordingListHeader,
+  CallRecordingListHeaderProps,
+} from './CallRecordingListHeader';
+import {
+  CallRecordingListItem as DefaultCallRecordingListItem,
+  CallRecordingListItemProps,
+} from './CallRecordingListItem';
+import { EmptyCallRecordingListing as DefaultEmptyCallRecordingList } from './EmptyCallRecordingListing';
+import {
+  LoadingCallRecordingListing as DefaultLoadingCallRecordingList,
+  LoadingCallRecordingListProps,
+} from './LoadingCallRecordingListing';
+
+export type CallRecordingListProps = {
+  /** Array of CallRecording objects */
+  callRecordings: CallRecording[];
+  /** Custom component to replace the default header implementation */
+  CallRecordingListHeader?: ComponentType<CallRecordingListHeaderProps>;
+  /** Custom component to replace the default list item implementation */
+  CallRecordingListItem?: ComponentType<CallRecordingListItemProps>;
+  /** Custom component to replace the default empty list component implementation */
+  EmptyCallRecordingList?: ComponentType;
+  /** Indicator that a request for new list of CallRecording object has been initiated */
+  loading?: boolean;
+  /** */
+  LoadingCallRecordingList?: ComponentType<LoadingCallRecordingListProps>;
+};
+
+export const CallRecordingList = ({
+  callRecordings,
+  CallRecordingListHeader = DefaultCallRecordingListHeader,
+  CallRecordingListItem = DefaultCallRecordingListItem,
+  EmptyCallRecordingList = DefaultEmptyCallRecordingList,
+  loading,
+  LoadingCallRecordingList = DefaultLoadingCallRecordingList,
+}: CallRecordingListProps) => {
+  return (
+    <div className="str-video__call-recording-list">
+      <CallRecordingListHeader callRecordings={callRecordings} />
+      <div className="str-video__call-recording-list__listing">
+        {loading ? (
+          <LoadingCallRecordingList callRecordings={callRecordings} />
+        ) : callRecordings.length ? (
+          callRecordings.map((recording) => (
+            <CallRecordingListItem
+              recording={recording}
+              key={recording.filename}
+            />
+          ))
+        ) : (
+          <EmptyCallRecordingList />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/CallRecordingList/CallRecordingListHeader.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CallRecording } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+import { IconButton } from '../Button';
+
+export type CallRecordingListHeaderProps = {
+  /** Array of CallRecording objects */
+  callRecordings: CallRecording[];
+};
+
+export const CallRecordingListHeader = ({
+  callRecordings,
+}: CallRecordingListHeaderProps) => {
+  const activeCall = useCall();
+
+  return (
+    <div className="str-video__call-recording-list__header">
+      <div className="str-video__call-recording-list__title">
+        <span>Call Recordings</span>
+        {callRecordings.length ? <span>({callRecordings.length})</span> : null}
+      </div>
+      <IconButton
+        icon="refresh"
+        title="Refresh"
+        onClick={() => activeCall?.queryRecordings()}
+      />
+    </div>
+  );
+};

package/src/components/CallRecordingList/CallRecordingListItem.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+import React, { ComponentProps, ForwardedRef, forwardRef } from 'react';
+import { CallRecording } from '@stream-io/video-client';
+import { CopyToClipboardButtonWithPopup } from '../Button';
+
+export type CallRecordingListItemProps = {
+  /** Array of CallRecording objects */
+  recording: CallRecording;
+};
+export const CallRecordingListItem = ({
+  recording,
+}: CallRecordingListItemProps) => {
+  return (
+    <div className="str-video__call-recording-list-item">
+      <div className="str-video__call-recording-list-item__info">
+        <div className="str-video__call-recording-list-item__created">
+          {new Date(recording.end_time).toLocaleString()}
+        </div>
+      </div>
+      <div className="str-video__call-recording-list-item__actions">
+        <a
+          className={clsx(
+            'str-video__call-recording-list-item__action-button',
+            'str-video__call-recording-list-item__action-button--download',
+          )}
+          role="button"
+          href={recording.url}
+          download={recording.filename}
+          title="Download the recording"
+        >
+          <span
+            className={clsx(
+              'str-video__call-recording-list-item__action-button-icon',
+              'str-video__download-button--icon',
+            )}
+          />
+        </a>
+        <CopyToClipboardButtonWithPopup
+          Button={CopyUrlButton}
+          copyValue={recording.url}
+        />
+      </div>
+    </div>
+  );
+};
+const CopyUrlButton = forwardRef(
+  (props: ComponentProps<'button'>, ref: ForwardedRef<HTMLButtonElement>) => {
+    return (
+      <button
+        {...props}
+        className={clsx(
+          'str-video__call-recording-list-item__action-button',
+          'str-video__call-recording-list-item__action-button--copy-link',
+        )}
+        ref={ref}
+        title="Copy the recording link"
+      >
+        <span
+          className={clsx(
+            'str-video__call-recording-list-item__action-button-icon',
+            'str-video__copy-button--icon',
+          )}
+        />
+      </button>
+    );
+  },
+);

package/src/components/CallRecordingList/EmptyCallRecordingListing.tsx

@@ -0,0 +1,11 @@
+export const EmptyCallRecordingListing = () => {
+  return (
+    <div className="str-video__call-recording-list__listing str-video__call-recording-list__listing--empty">
+      <div className="str-video__call-recording-list__listing--icon-empty" />
+      <p className="str-video__call-recording-list__listing--text-empty">
+        {/* todo: introduce i18n to enable text customization */}
+        No recordings available
+      </p>
+    </div>
+  );
+};

package/src/components/CallRecordingList/LoadingCallRecordingListing.tsx

@@ -0,0 +1,21 @@
+import { CallRecording } from '@stream-io/video-client';
+import { CallRecordingListItem } from './CallRecordingListItem';
+import { LoadingIndicator } from '../LoadingIndicator';
+
+export type LoadingCallRecordingListProps = {
+  /** Array of CallRecording objects */
+  callRecordings: CallRecording[];
+};
+
+export const LoadingCallRecordingListing = ({
+  callRecordings,
+}: LoadingCallRecordingListProps) => {
+  return (
+    <>
+      {callRecordings.map((recording) => (
+        <CallRecordingListItem recording={recording} key={recording.filename} />
+      ))}
+      <LoadingIndicator text="Recording getting ready" />
+    </>
+  );
+};

package/src/components/CallRecordingList/index.ts

@@ -0,0 +1,5 @@
+export * from './CallRecordingList';
+export * from './CallRecordingListHeader';
+export * from './CallRecordingListItem';
+export * from './EmptyCallRecordingListing';
+export * from './LoadingCallRecordingListing';

package/src/components/CallStats/CallStats.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  AggregatedStatsReport,
+  CallStatsReport,
+} from '@stream-io/video-client';
+import { useCallStatsReport } 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 = useCallStatsReport();
+
+  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>
+  );
+};
+
+export 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/CallStats/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/CallStats/index.ts

@@ -0,0 +1,2 @@
+export * from './CallStats';
+export * from './CallStatsLatencyChart';