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

package/src/components/Permissions/PermissionRequests.tsx

@@ -0,0 +1,182 @@
+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?.updateUserPermissions({
+          user_id: user.id,
+          grant_permissions: permissions,
+        });
+      } else {
+        await call?.updateUserPermissions({
+          user_id: user.id,
+          revoke_permissions: 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';

package/src/components/StreamCall/CallParticipantsScreenView.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react';
+import { Call, SfuModels } from '@stream-io/video-client';
+
+import {
+  useLocalParticipant,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+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}
+                call={call}
+                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) => (
+              <ParticipantBox
+                key={participant.sessionId}
+                participant={participant}
+                call={call}
+                sinkId={localParticipant?.audioOutputDeviceId}
+              />
+            ))}
+          </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,25 @@
+import { Call } from '@stream-io/video-client';
+import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+import {
+  useLocalParticipant,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+
+export const CallParticipantsView = (props: { call: Call }) => {
+  const { call } = props;
+  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) => (
+        <ParticipantBox
+          key={participant.sessionId}
+          participant={participant}
+          call={call}
+          sinkId={localParticipant?.audioOutputDeviceId}
+        />
+      ))}
+    </div>
+  );
+};