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

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -0,0 +1,106 @@
+import clsx from 'clsx';
+import { ChangeEventHandler } from 'react';
+
+type DeviceSelectorOptionProps = {
+  id: string;
+  label: string;
+  name: string;
+  selected?: boolean;
+  value: string;
+  disabled?: boolean;
+  defaultChecked?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+
+const DeviceSelectorOption = ({
+  disabled,
+  id,
+  label,
+  onChange,
+  name,
+  selected,
+  defaultChecked,
+  value,
+}: DeviceSelectorOptionProps) => {
+  return (
+    <label
+      className={clsx('str-video__device-settings__option', {
+        'str-video__device-settings__option--selected': selected,
+        'str-video__device-settings__option--disabled': disabled,
+      })}
+      htmlFor={id}
+    >
+      <input
+        type="radio"
+        name={name}
+        onChange={onChange}
+        value={value}
+        id={id}
+        checked={selected}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+      />
+      {label}
+    </label>
+  );
+};
+export const DeviceSelector = (props: {
+  devices: MediaDeviceInfo[];
+  selectedDeviceId?: string;
+  title: string;
+  onChange?: (deviceId: string) => void;
+}) => {
+  const {
+    devices = [],
+    selectedDeviceId: selectedDeviceFromProps,
+    title,
+    onChange,
+  } = props;
+  const inputGroupName = title.replace(' ', '-').toLowerCase();
+
+  // sometimes the browser (Chrome) will report the system-default device
+  // with an id of 'default'. In case when it doesn't, we'll select the first
+  // available device.
+  let selectedDeviceId = selectedDeviceFromProps;
+  if (
+    devices.length > 0 &&
+    !devices.find((d) => d.deviceId === selectedDeviceId)
+  ) {
+    selectedDeviceId = devices[0].deviceId;
+  }
+
+  return (
+    <div className="str-video__device-settings__device-kind">
+      <div className="str-video__device-settings__device-selector-title">
+        {title}
+      </div>
+      {!devices.length ? (
+        <DeviceSelectorOption
+          id={`${inputGroupName}--default`}
+          label="Default"
+          name={inputGroupName}
+          defaultChecked
+          value="default"
+        />
+      ) : (
+        devices.map((device) => {
+          return (
+            <DeviceSelectorOption
+              id={`${inputGroupName}--${device.deviceId}`}
+              value={device.deviceId}
+              label={device.label}
+              key={device.deviceId}
+              onChange={(e) => {
+                onChange?.(e.target.value);
+              }}
+              name={inputGroupName}
+              selected={
+                device.deviceId === selectedDeviceId || devices.length === 1
+              }
+            />
+          );
+        })
+      )}
+    </div>
+  );
+};

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -0,0 +1,52 @@
+import { DeviceSelector } from './DeviceSelector';
+import { useMediaDevices } from '../../core/contexts';
+
+export type DeviceSelectorAudioInputProps = {
+  title?: string;
+};
+
+export const DeviceSelectorAudioInput = ({
+  title = 'Select a Mic',
+}: DeviceSelectorAudioInputProps) => {
+  const { audioInputDevices, selectedAudioInputDeviceId, switchDevice } =
+    useMediaDevices();
+
+  return (
+    <DeviceSelector
+      devices={audioInputDevices}
+      selectedDeviceId={selectedAudioInputDeviceId}
+      onChange={(deviceId) => {
+        switchDevice('audioinput', deviceId);
+      }}
+      title={title}
+    />
+  );
+};
+
+export type DeviceSelectorAudioOutputProps = {
+  title?: string;
+};
+
+export const DeviceSelectorAudioOutput = ({
+  title = 'Select speakers',
+}: DeviceSelectorAudioOutputProps) => {
+  const {
+    audioOutputDevices,
+    isAudioOutputChangeSupported,
+    selectedAudioOutputDeviceId,
+    switchDevice,
+  } = useMediaDevices();
+
+  if (!isAudioOutputChangeSupported) return null;
+
+  return (
+    <DeviceSelector
+      devices={audioOutputDevices}
+      selectedDeviceId={selectedAudioOutputDeviceId}
+      onChange={(deviceId) => {
+        switchDevice('audiooutput', deviceId);
+      }}
+      title={title}
+    />
+  );
+};

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -0,0 +1,22 @@
+import { DeviceSelector } from './DeviceSelector';
+import { useMediaDevices } from '../../core/contexts';
+
+export type DeviceSelectorVideoProps = {
+  title?: string;
+};
+
+export const DeviceSelectorVideo = ({ title }: DeviceSelectorVideoProps) => {
+  const { videoDevices, selectedVideoDeviceId, switchDevice } =
+    useMediaDevices();
+
+  return (
+    <DeviceSelector
+      devices={videoDevices}
+      selectedDeviceId={selectedVideoDeviceId}
+      onChange={(deviceId) => {
+        switchDevice('videoinput', deviceId);
+      }}
+      title={title || 'Select a Camera'}
+    />
+  );
+};

package/src/components/DeviceSettings/DeviceSettings.tsx

@@ -0,0 +1,39 @@
+import { forwardRef } from 'react';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import {
+  DeviceSelectorAudioInput,
+  DeviceSelectorAudioOutput,
+} from './DeviceSelectorAudio';
+import { DeviceSelectorVideo } from './DeviceSelectorVideo';
+import { IconButton } from '../Button';
+import clsx from 'clsx';
+
+export const DeviceSettings = () => {
+  return (
+    <MenuToggle placement="bottom-end" ToggleButton={ToggleMenuButton}>
+      <Menu />
+    </MenuToggle>
+  );
+};
+
+const Menu = () => (
+  <div className="str-video__device-settings">
+    <DeviceSelectorVideo />
+    <DeviceSelectorAudioInput />
+    <DeviceSelectorAudioOutput />
+  </div>
+);
+
+const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  ({ menuShown }, ref) => (
+    <IconButton
+      className={clsx('str-video__device-settings__button', {
+        'str-video__device-settings__button--active': menuShown,
+      })}
+      title="Toggle device menu"
+      icon="device-settings"
+      ref={ref}
+      // tabindex={0}
+    />
+  ),
+);

package/src/components/DeviceSettings/index.ts

@@ -0,0 +1,4 @@
+export * from './DeviceSettings';
+export * from './DeviceSelector';
+export * from './DeviceSelectorAudio';
+export * from './DeviceSelectorVideo';

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+
+export type IconProps = {
+  icon: string;
+};
+
+export const Icon = ({ icon }: IconProps) => (
+  <span
+    className={clsx('str-video__icon', icon && `str-video__icon--${icon}`)}
+  />
+);

package/src/components/Icon/index.ts

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

package/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+
+export type LoadingIndicatorProps = {
+  className?: string;
+  /** String will be injected into class and later used to apply as a CSS mask-image to an element as data URL */
+  type?: string;
+  /** Text to be displayed under the loading indicator icon */
+  text?: string;
+  /** Tooltip to be displayed on hover */
+  tooltip?: string;
+};
+
+export const LoadingIndicator = ({
+  className,
+  type = 'spinner',
+  text,
+  tooltip,
+}: LoadingIndicatorProps) => {
+  return (
+    <div
+      className={clsx('str-video__loading-indicator', className)}
+      title={tooltip}
+    >
+      <div className={clsx('str-video__loading-indicator__icon', type)}></div>
+      {text && <p className="str-video__loading-indicator-text">{text}</p>}
+    </div>
+  );
+};

package/src/components/LoadingIndicator/index.ts

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

package/src/components/Menu/GenericMenu.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+
+export const GenericMenu = ({ children }: PropsWithChildren) => {
+  return <ul className="str-video__generic-menu">{children}</ul>;
+};
+
+export const GenericMenuButtonItem = ({
+  children,
+  ...rest
+}: Omit<ComponentProps<'button'>, 'ref'>) => {
+  return (
+    <li className="str-video__generic-menu--item">
+      <button {...rest}>{children}</button>
+    </li>
+  );
+};

package/src/components/Menu/MenuToggle.tsx

@@ -0,0 +1,81 @@
+import {
+  ComponentType,
+  PropsWithChildren,
+  useEffect,
+  useState,
+  ForwardedRef,
+} from 'react';
+import { Placement, Strategy } from '@floating-ui/react';
+
+import { useFloatingUIPreset } from '../../hooks';
+
+export type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {
+  menuShown: boolean;
+  ref: ForwardedRef<E>;
+};
+
+export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
+  ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;
+  placement?: Placement;
+  strategy?: Strategy;
+}>;
+
+export const MenuToggle = <E extends HTMLElement>({
+  ToggleButton,
+  placement = 'top-start',
+  strategy = 'absolute',
+  children,
+}: MenuToggleProps<E>) => {
+  const [menuShown, setMenuShown] = useState(false);
+
+  const { floating, domReference, refs, x, y } = useFloatingUIPreset({
+    placement,
+    strategy,
+  });
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (!floating && domReference?.contains(event.target as Node)) {
+        setMenuShown(true);
+      } else if (floating && !floating?.contains(event.target as Node)) {
+        setMenuShown(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key.toLowerCase() === 'escape' &&
+        !event.altKey &&
+        !event.ctrlKey
+      ) {
+        setMenuShown(false);
+      }
+    };
+    document?.addEventListener('click', handleClick, { capture: true });
+    document?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document?.removeEventListener('click', handleClick, { capture: true });
+      document?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [floating, domReference]);
+
+  return (
+    <>
+      {menuShown && (
+        <div
+          className="str-video__menu-container"
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          {children}
+        </div>
+      )}
+      <ToggleButton menuShown={menuShown} ref={refs.setReference} />
+    </>
+  );
+};

package/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export * from './MenuToggle';
+export * from './GenericMenu';

package/src/components/Moderation/Restricted.tsx

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { useCall, useOwnCapabilities } from '@stream-io/video-react-bindings';
+
+type RestrictedProps = PropsWithChildren<{
+  /**
+   * OwnCapabilities of the participant - grants they have available
+   */
+  availableGrants?: OwnCapability[];
+  /**
+   * Required grants for the component to be able to render supplied children elements
+   */
+  requiredGrants: OwnCapability[];
+  /**
+   * Require all grants specified in `requiredGrants` to be available in the `availableGrants`,
+   * component by default requires only one grant to appear in both arrays to render its children
+   */
+  requireAll?: boolean;
+}>;
+
+export const Restricted = ({
+  availableGrants: availableGrantsFromProps,
+  requiredGrants,
+  requireAll = true,
+  children,
+}: RestrictedProps) => {
+  const call = useCall();
+  const ownCapabilities = useOwnCapabilities();
+  const availableGrants = availableGrantsFromProps || ownCapabilities;
+  const hasPermissions = requiredGrants[requireAll ? 'every' : 'some'](
+    (capability) => availableGrants.includes(capability),
+  );
+  const canRequest = requiredGrants.some(
+    (capability) => !!call && call.permissionsContext.canRequest(capability),
+  );
+  if (hasPermissions || canRequest) return <>{children}</>;
+  return null;
+};

package/src/components/Moderation/index.ts

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

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,61 @@
+import { PropsWithChildren, ReactNode, useEffect } from 'react';
+import { Placement } from '@floating-ui/react';
+
+import { useFloatingUIPreset } from '../../hooks';
+
+export type NotificationProps = {
+  message?: ReactNode;
+  isVisible?: boolean;
+  visibilityTimeout?: number;
+  resetIsVisible?: () => void;
+  placement?: Placement;
+  iconClassName?: string | null;
+};
+
+export const Notification = (props: PropsWithChildren<NotificationProps>) => {
+  const {
+    isVisible,
+    message,
+    children,
+    visibilityTimeout,
+    resetIsVisible,
+    placement = 'top',
+    iconClassName = 'str-video__notification__icon',
+  } = props;
+
+  const { refs, x, y, strategy } = useFloatingUIPreset({
+    placement,
+    strategy: 'absolute',
+  });
+
+  useEffect(() => {
+    if (!isVisible || !visibilityTimeout || !resetIsVisible) return;
+
+    const timeout = setTimeout(() => {
+      resetIsVisible();
+    }, visibilityTimeout);
+
+    return () => clearTimeout(timeout);
+  }, [isVisible, resetIsVisible, visibilityTimeout]);
+
+  return (
+    <div ref={refs.setReference}>
+      {isVisible && (
+        <div
+          className="str-video__notification"
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          {iconClassName && <i className={iconClassName} />}
+          <span className="str-video__notification__message">{message}</span>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};

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,60 @@
+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/contexts';
+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(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';