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

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -0,0 +1,255 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useState,
+  ComponentProps,
+} from 'react';
+import {
+  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 { Restricted } from '../Moderation';
+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/Debug/DebugParticipantPublishQuality.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { Call, StreamVideoParticipant } from '@stream-io/video-client';
+
+export const DebugParticipantPublishQuality = (props: {
+  participant: StreamVideoParticipant;
+  call: Call;
+}) => {
+  const { call, participant } = props;
+  const [quality, setQuality] = useState<string>();
+  const [publishStats, setPublishStats] = useState(() => ({
+    f: true,
+    h: true,
+    q: true,
+  }));
+
+  useEffect(() => {
+    return call.on('changePublishQuality', (event) => {
+      if (event.eventPayload.oneofKind !== 'changePublishQuality') return;
+      const { videoSenders } = event.eventPayload.changePublishQuality;
+      // FIXME OL: support additional layers (like screenshare)
+      const [videoLayer] = videoSenders.map(({ layers }) => {
+        return layers.map((l) => ({ [l.name]: l.active }));
+      });
+      setPublishStats((s) => ({
+        ...s,
+        ...videoLayer,
+      }));
+    });
+  }, [call]);
+
+  return (
+    <select
+      title={`Published tracks: ${JSON.stringify(publishStats)}`}
+      value={quality}
+      onChange={(e) => {
+        const value = e.target.value;
+        setQuality(value);
+        let w = 960;
+        let h = 540;
+        if (value === 'h') {
+          w = w / 2; // 480
+          h = h / 2; // 270
+        } else if (value === 'q') {
+          w = w / 4; // 240
+          h = h / 4; // 135
+        }
+        call.updateSubscriptionsPartial('video', {
+          [participant.sessionId]: {
+            dimension: {
+              width: w,
+              height: h,
+            },
+          },
+        });
+      }}
+    >
+      <option value="f">High (f)</option>
+      <option value="h">Medium (h)</option>
+      <option value="q">Low (q)</option>
+    </select>
+  );
+};

package/src/components/Debug/DebugStatsView.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Call } from '@stream-io/video-client';
+import { useRtcStats } from '../../hooks/useRtcStats';
+import { useFloatingUIPreset } from '../../hooks';
+
+export const DebugStatsView = (props: {
+  call: Call;
+  kind: 'subscriber' | 'publisher';
+  mediaStream?: MediaStream;
+}) => {
+  const { call, kind, mediaStream } = props;
+  const stats = useRtcStats(call, kind, mediaStream);
+
+  const { refs, strategy, y, x } = useFloatingUIPreset({
+    placement: 'top',
+    strategy: 'absolute',
+  });
+
+  const [isPopperOpen, setIsPopperOpen] = useState(false);
+
+  const [videoTrack] = mediaStream?.getVideoTracks() ?? [];
+  const settings = videoTrack?.getSettings();
+  return (
+    <>
+      <span
+        className="str-video__debug__track-stats-icon"
+        tabIndex={0}
+        ref={refs.setReference}
+        title={
+          settings &&
+          `${settings.width}x${settings.height}@${Math.round(
+            settings.frameRate || 0,
+          )}`
+        }
+        onClick={() => {
+          setIsPopperOpen((v) => !v);
+        }}
+      />
+      {isPopperOpen && (
+        <div
+          className="str-video__debug__track-stats"
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          <pre>{JSON.stringify(stats, null, 2)}</pre>
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/Debug/useIsDebugMode.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+const useQueryParams = () => {
+  return useMemo(
+    () =>
+      typeof window === 'undefined'
+        ? null
+        : new URLSearchParams(window.location.search),
+    [],
+  );
+};
+
+/**
+ * Internal purpose hook. Enables certain development mode tools.
+ */
+export const useIsDebugMode = () => {
+  const params = useQueryParams();
+  return !!params?.get('debug');
+};
+
+export const useDebugPreferredVideoCodec = () => {
+  const params = useQueryParams();
+  return params?.get('video_codec');
+};