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

package/src/components/Notification/PermissionNotification.tsx

@@ -0,0 +1,97 @@
+import { Notification } from './Notification';
+import { OwnCapability } from '@stream-io/video-client';
+import {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useHasPermissions } from '@stream-io/video-react-bindings';
+
+export type PermissionNotificationProps = PropsWithChildren<{
+  /**
+   * The permission to check for.
+   */
+  permission: OwnCapability;
+
+  /**
+   * Set this to true if there is ongoing request for the permission.
+   */
+  isAwaitingApproval: boolean;
+
+  /**
+   * The message to display in the notification once
+   * the requested permission is granted.
+   */
+  messageApproved: string;
+
+  /**
+   * The message to display in the notification once a permission
+   * is revoked.
+   */
+  messageRevoked: string;
+
+  /**
+   * The message to display in the notification while
+   * the requested permission is awaiting approval.
+   */
+  messageAwaitingApproval: string;
+
+  /**
+   * The time in milliseconds to display the notification.
+   * Defaults to 3500ms.
+   */
+  visibilityTimeout?: number;
+}>;
+
+export const PermissionNotification = (props: PermissionNotificationProps) => {
+  const {
+    permission,
+    isAwaitingApproval,
+    messageApproved,
+    messageAwaitingApproval,
+    messageRevoked,
+    visibilityTimeout = 3500,
+    children,
+  } = props;
+  const hasPermission = useHasPermissions(permission);
+  const prevHasPermission = useRef(hasPermission);
+  const [showNotification, setShowNotification] = useState<
+    'granted' | 'revoked'
+  >();
+  useEffect(() => {
+    if (hasPermission && !prevHasPermission.current) {
+      setShowNotification('granted');
+      prevHasPermission.current = true;
+    } else if (!hasPermission && prevHasPermission.current) {
+      setShowNotification('revoked');
+      prevHasPermission.current = false;
+    }
+  }, [hasPermission]);
+
+  const resetIsVisible = useCallback(() => setShowNotification(undefined), []);
+  if (isAwaitingApproval) {
+    return (
+      <Notification
+        isVisible={isAwaitingApproval && !hasPermission}
+        message={messageAwaitingApproval}
+      >
+        {children}
+      </Notification>
+    );
+  }
+
+  return (
+    <Notification
+      isVisible={!!showNotification}
+      visibilityTimeout={visibilityTimeout}
+      resetIsVisible={resetIsVisible}
+      message={
+        showNotification === 'granted' ? messageApproved : messageRevoked
+      }
+    >
+      {children}
+    </Notification>
+  );
+};

package/src/components/Notification/SpeakingWhileMutedNotification.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { createSoundDetector, SfuModels } from '@stream-io/video-client';
+import { useLocalParticipant } from '@stream-io/video-react-bindings';
+
+import { useMediaDevices } from '../../core';
+import { Notification } from './Notification';
+import { ChildrenOnly } from '../../types';
+
+export const SpeakingWhileMutedNotification = ({ children }: ChildrenOnly) => {
+  const localParticipant = useLocalParticipant();
+  const { getAudioStream } = useMediaDevices();
+
+  const isAudioMute = !localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
+  const audioDeviceId = localParticipant?.audioDeviceId;
+  const [isSpeakingWhileMuted, setIsSpeakingWhileMuted] = useState(false);
+  useEffect(() => {
+    // do nothing when not muted
+    if (!isAudioMute) return;
+    const disposeSoundDetector = getAudioStream({
+      deviceId: audioDeviceId,
+    }).then((audioStream) =>
+      createSoundDetector(audioStream, (isSpeechDetected) => {
+        setIsSpeakingWhileMuted((isNotified) =>
+          isNotified ? isNotified : isSpeechDetected,
+        );
+      }),
+    );
+    disposeSoundDetector.catch((err) => {
+      console.error('Error while creating sound detector', err);
+    });
+    return () => {
+      disposeSoundDetector
+        .then((dispose) => dispose())
+        .catch((err) => {
+          console.error('Error while disposing sound detector', err);
+        });
+      setIsSpeakingWhileMuted(false);
+    };
+  }, [audioDeviceId, getAudioStream, isAudioMute]);
+
+  useEffect(() => {
+    if (!isSpeakingWhileMuted) return;
+    const timeout = setTimeout(() => {
+      setIsSpeakingWhileMuted(false);
+    }, 3500);
+    return () => {
+      clearTimeout(timeout);
+      setIsSpeakingWhileMuted(false);
+    };
+  }, [isSpeakingWhileMuted]);
+  return (
+    <Notification
+      message="You are muted. Unmute to speak."
+      isVisible={isSpeakingWhileMuted}
+    >
+      {children}
+    </Notification>
+  );
+};

package/src/components/Notification/index.ts

@@ -0,0 +1,3 @@
+export * from './Notification';
+export * from './PermissionNotification';
+export * from './SpeakingWhileMutedNotification';

package/src/components/PendingCallPanel/PendingCallControls.tsx

@@ -0,0 +1,27 @@
+import { CallingState } from '@stream-io/video-client';
+import { AcceptCallButton, CancelCallButton } from '../CallControls';
+import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
+
+export const PendingCallControls = () => {
+  const call = useCall();
+  const callCallingState = useCallCallingState();
+
+  if (!call) return null;
+
+  const buttonsDisabled = callCallingState !== CallingState.RINGING;
+  return (
+    <div className="str-video__pending-call-controls">
+      {call.isCreatedByMe ? (
+        <CancelCallButton disabled={buttonsDisabled} />
+      ) : (
+        <>
+          <AcceptCallButton disabled={buttonsDisabled} />
+          <CancelCallButton
+            onClick={() => call.leave({ reject: true })}
+            disabled={buttonsDisabled}
+          />
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/PendingCallPanel/PendingCallPanel.tsx

@@ -0,0 +1,93 @@
+import { CallingState, UserResponse } from '@stream-io/video-client';
+import {
+  useCall,
+  useCallCallingState,
+  useCallMembers,
+  useConnectedUser,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { Avatar } from '../Avatar';
+import { PendingCallControls } from './PendingCallControls';
+
+const CALLING_STATE_TO_LABEL: Record<CallingState, string> = {
+  [CallingState.JOINING]: 'Joining',
+  [CallingState.RINGING]: 'Ringing',
+  [CallingState.RECONNECTING]: 'Re-connecting',
+  [CallingState.RECONNECTING_FAILED]: 'Failed',
+  [CallingState.OFFLINE]: 'No internet connection',
+  [CallingState.IDLE]: '',
+  [CallingState.UNKNOWN]: '',
+  [CallingState.JOINED]: 'Joined',
+  [CallingState.LEFT]: 'Left call',
+};
+
+export type PendingCallPanelProps = {
+  /**
+   * Whether to include the current user in the list of members to show.
+   * @default false.
+   */
+  includeSelf?: boolean;
+
+  /**
+   * The maximum number of members to show.
+   * @default 3.
+   */
+  totalMembersToShow?: number;
+};
+
+export const PendingCallPanel = (props: PendingCallPanelProps) => {
+  const { includeSelf = false, totalMembersToShow = 3 } = props;
+  const call = useCall();
+  const callingState = useCallCallingState();
+  const { t } = useI18n();
+  const members = useCallMembers();
+  const connectedUser = useConnectedUser();
+
+  if (!call) return null;
+
+  // take the first N members to show their avatars
+  const membersToShow: UserResponse[] = (members || [])
+    .slice(0, totalMembersToShow)
+    .map(({ user }) => user)
+    .filter((user) => user.id !== connectedUser?.id || includeSelf);
+  if (
+    includeSelf &&
+    !membersToShow.find((user) => user.id === connectedUser?.id)
+  ) {
+    // if the current user is not in the initial batch of members,
+    // add it to the beginning of the list
+    const self = members.find(({ user }) => user.id === connectedUser?.id);
+    if (self) {
+      membersToShow.splice(0, 1, self.user);
+    }
+  }
+
+  const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
+
+  return (
+    <div className="str-video__call-panel str-video__call-panel--pending">
+      <div className="str-video__call-panel__members-list">
+        {membersToShow.map((user) => (
+          <div key={user.id} className="str-video__call-panel__member-box">
+            <Avatar name={user.name} imageSrc={user.image} />
+            {user.name && (
+              <div className="str-video__member_details">
+                <span className="str-video__member_name">{user.name}</span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {callingStateLabel && (
+        <div className="str-video__call-panel__calling-state-label">
+          {t(callingStateLabel)}
+        </div>
+      )}
+
+      {[CallingState.RINGING, CallingState.JOINING].includes(callingState) && (
+        <PendingCallControls />
+      )}
+    </div>
+  );
+};

package/src/components/PendingCallPanel/index.ts

@@ -0,0 +1,2 @@
+export * from './PendingCallControls';
+export * from './PendingCallPanel';

package/src/components/Permissions/PermissionRequests.tsx

@@ -0,0 +1,176 @@
+import {
+  ButtonHTMLAttributes,
+  ComponentProps,
+  forwardRef,
+  Fragment,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  OwnCapability,
+  PermissionRequestEvent,
+  UserResponse,
+} from '@stream-io/video-client';
+import { useCall, useHasPermissions } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+
+import { useFloatingUIPreset } from '../../hooks';
+
+const byNameOrId = (a: UserResponse, b: UserResponse) => {
+  if (a.name && b.name && a.name < b.name) return -1;
+  if (a.name && b.name && a.name > b.name) return 1;
+  if (a.id < b.id) return -1;
+  if (a.id > b.id) return 1;
+  return 0;
+};
+
+export const PermissionRequests = () => {
+  const call = useCall();
+  const [expanded, setExpanded] = useState(false);
+  const [permissionRequests, setPermissionRequests] = useState<
+    PermissionRequestEvent[]
+  >([]);
+
+  const canUpdateCallPermissions = useHasPermissions(
+    OwnCapability.UPDATE_CALL_PERMISSIONS,
+  );
+
+  useEffect(() => {
+    if (!call || !canUpdateCallPermissions) return;
+    return call.on('call.permission_request', (event) => {
+      if (event.type !== 'call.permission_request') return;
+      setPermissionRequests((requests) =>
+        [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)),
+      );
+    });
+  }, [call, canUpdateCallPermissions]);
+
+  const handleUpdatePermission = (
+    request: PermissionRequestEvent,
+    allow: boolean,
+  ) => {
+    return async () => {
+      const { user, permissions } = request;
+      if (allow) {
+        await call?.grantPermissions(user.id, permissions);
+      } else {
+        await call?.revokePermissions(user.id, permissions);
+      }
+      setPermissionRequests((requests) =>
+        requests.filter((r) => r !== request),
+      );
+    };
+  };
+
+  const { refs, x, y, strategy } = useFloatingUIPreset({
+    placement: 'bottom',
+    strategy: 'absolute',
+  });
+
+  // don't render anything if there are no permission requests
+  if (permissionRequests.length === 0) return null;
+
+  return (
+    <div className="str-video__permission-requests" ref={refs.setReference}>
+      <div className="str-video__permission-requests__notification">
+        <span className="str-video__permission-requests__notification__message">
+          {permissionRequests.length} pending permission requests
+        </span>
+        <Button
+          type="button"
+          onClick={() => {
+            setExpanded((e) => !e);
+          }}
+        >
+          {expanded ? 'Hide requests' : 'Show requests'}
+        </Button>
+      </div>
+      {expanded && (
+        <PermissionRequestList
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+          permissionRequests={permissionRequests}
+          handleUpdatePermission={handleUpdatePermission}
+        />
+      )}
+    </div>
+  );
+};
+
+export type PermissionRequestListProps = ComponentProps<'div'> & {
+  permissionRequests: PermissionRequestEvent[];
+  handleUpdatePermission: (
+    request: PermissionRequestEvent,
+    allow: boolean,
+  ) => () => Promise<void>;
+};
+
+export const PermissionRequestList = forwardRef<
+  HTMLDivElement,
+  PermissionRequestListProps
+>((props, ref) => {
+  const { permissionRequests, handleUpdatePermission, ...rest } = props;
+  return (
+    <div className="str-video__permission-requests-list" ref={ref} {...rest}>
+      {permissionRequests.map((request, reqIndex) => {
+        const { user, permissions } = request;
+        return (
+          <Fragment key={`${user.id}/${reqIndex}`}>
+            {permissions.map((permission) => (
+              <div className="str-video__permission-request" key={permission}>
+                <div className="str-video__permission-request__message">
+                  {messageForPermission(user.name || user.id, permission)}
+                </div>
+                <Button
+                  className="str-video__permission-request__button--allow"
+                  type="button"
+                  onClick={handleUpdatePermission(request, true)}
+                >
+                  Allow
+                </Button>
+                <Button
+                  className="str-video__permission-request__button--reject"
+                  type="button"
+                  onClick={handleUpdatePermission(request, false)}
+                >
+                  Reject
+                </Button>
+              </div>
+            ))}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+});
+
+const Button = (
+  props: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
+) => {
+  const { className, ...rest } = props;
+  return (
+    <button
+      className={clsx('str-video__permission-request__button', className)}
+      {...rest}
+    />
+  );
+};
+
+const messageForPermission = (userName: string, permission: string) => {
+  switch (permission) {
+    case OwnCapability.SEND_AUDIO:
+      return `${userName} is requesting to speak`;
+    case OwnCapability.SEND_VIDEO:
+      return `${userName} is requesting to share their camera`;
+    case OwnCapability.SCREENSHARE:
+      return `${userName} is requesting to present their screen`;
+    default:
+      return `${userName} is requesting permission: ${permission}`;
+  }
+};

package/src/components/Permissions/index.ts

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

package/src/components/Reaction/Reaction.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { Call, StreamReaction } from '@stream-io/video-client';
+import clsx from 'clsx';
+
+export type ReactionProps = {
+  reaction: StreamReaction;
+  sessionId: string;
+  call: Call;
+  hideAfterTimeoutInMs?: number;
+};
+
+export const defaultEmojiReactions: Record<string, string> = {
+  ':like:': '👍',
+  ':raise-hand:': '✋',
+  ':fireworks:': '🎉',
+};
+
+export const Reaction = (props: ReactionProps) => {
+  const { reaction, sessionId, call, hideAfterTimeoutInMs = 5500 } = props;
+  const [isShowing, setIsShowing] = useState(false);
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    if (reaction) {
+      setIsShowing(true);
+      timeoutId = setTimeout(() => {
+        setIsShowing(false);
+        call.resetReaction(sessionId);
+      }, hideAfterTimeoutInMs);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [call, hideAfterTimeoutInMs, reaction, sessionId]);
+
+  const { emoji_code } = reaction;
+  return (
+    <div
+      className={clsx(
+        'str-video__reaction',
+        isShowing && 'str-video__reaction--visible',
+      )}
+    >
+      <span className="str-video__reaction__emoji">
+        {emoji_code && defaultEmojiReactions[emoji_code]}
+      </span>
+    </div>
+  );
+};

package/src/components/Reaction/index.ts

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

package/src/components/Search/SearchInput.tsx

@@ -0,0 +1,56 @@
+import { ComponentProps, useEffect, useState } from 'react';
+import clsx from 'clsx';
+
+type SearchInputProps = ComponentProps<'input'> & {
+  /**
+   * Resets the search to its initial state.
+   * The function is called when Esc key or inputs clear button are pressed
+   */
+  exitSearch: () => void;
+  /**
+   * Flag to signal, whether search input elements should be rendered as active
+   */
+  isActive: boolean;
+};
+export const SearchInput = ({
+  exitSearch,
+  isActive,
+  ...rest
+}: SearchInputProps) => {
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
+    null,
+  );
+  useEffect(() => {
+    if (!inputElement) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === 'escape') exitSearch();
+    };
+
+    inputElement.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      inputElement.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [exitSearch, inputElement]);
+
+  return (
+    <div
+      className={clsx('str-video__search-input__container', {
+        'str-video__search-input__container--active': isActive,
+      })}
+    >
+      <input placeholder="Search" {...rest} ref={setInputElement} />
+      {isActive ? (
+        <button
+          className="str-video__search-input__clear-btn"
+          onClick={exitSearch}
+        >
+          <span className="str-video__search-input__icon--active" />
+        </button>
+      ) : (
+        <span className="str-video__search-input__icon" />
+      )}
+    </div>
+  );
+};

package/src/components/Search/SearchResults.tsx

@@ -0,0 +1,40 @@
+import { ComponentType } from 'react';
+import { LoadingIndicator as DefaultLoadingIndicator } from '../LoadingIndicator';
+import { SearchController } from './hooks';
+
+export type SearchResultListProps<T> = {
+  data: T[];
+};
+
+export type SearchResultsProps<T> = Pick<
+  SearchController<T>,
+  'searchResults' | 'searchQueryInProgress'
+> & {
+  /** Component to be displayed, when empty array of search results is provided */
+  EmptySearchResultComponent: ComponentType;
+  /** Component will be used to render non-empty array of search results  */
+  SearchResultList: ComponentType<SearchResultListProps<T>>;
+  /** Component to be displayed while the search query request is in progress */
+  LoadingIndicator?: ComponentType;
+};
+
+export const SearchResults = <T extends unknown>({
+  EmptySearchResultComponent,
+  LoadingIndicator = DefaultLoadingIndicator,
+  searchQueryInProgress,
+  searchResults,
+  SearchResultList,
+}: SearchResultsProps<T>) => {
+  if (searchQueryInProgress) {
+    return (
+      <div className="str-video__search-results--loading">
+        <LoadingIndicator />
+      </div>
+    );
+  }
+  if (!searchResults.length) {
+    return <EmptySearchResultComponent />;
+  }
+
+  return <SearchResultList data={searchResults} />;
+};

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

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

package/src/components/Search/hooks/useSearch.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+
+export type SearchController<T> = {
+  /** Flag signals that the search request is flight await the response */
+  searchQueryInProgress: boolean;
+  /** Array of items returned by the search query */
+  searchResults: T[];
+};
+
+export type UseSearchParams<T> = {
+  /** Search function performing the search request */
+  searchFn: (searchQuery: string) => Promise<T[]>;
+  /** Debounce interval applied to the search function */
+  debounceInterval: number;
+  /** Search query string */
+  searchQuery?: string;
+};
+
+export const useSearch = <T>({
+  debounceInterval,
+  searchFn,
+  searchQuery = '',
+}: UseSearchParams<T>): SearchController<T> => {
+  const [searchResults, setSearchResults] = useState<T[]>([]);
+  const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
+
+  useEffect(() => {
+    if (!searchQuery.length) return setSearchResults([]);
+
+    setSearchQueryInProgress(true);
+
+    const timeout = setTimeout(async () => {
+      try {
+        const results = await searchFn(searchQuery);
+        setSearchResults(results);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setSearchQueryInProgress(false);
+      }
+    }, debounceInterval);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [debounceInterval, searchFn, searchQuery]);
+
+  return {
+    searchQueryInProgress,
+    searchResults,
+  };
+};

package/src/components/Search/index.ts

@@ -0,0 +1,2 @@
+export * from './SearchInput';
+export * from './SearchResults';