@stream-io/video-react-sdk 0.4.26 → 0.5.0

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,14 +1,15 @@
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { DeviceSelector } from './DeviceSelector';
 
 export type DeviceSelectorAudioInputProps = {
   title?: string;
+  visualType?: 'list' | 'dropdown';
 };
 
 export const DeviceSelectorAudioInput = ({
   title,
+  visualType,
 }: DeviceSelectorAudioInputProps) => {
-  const { t } = useI18n();
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, selectedDevice, devices } = useMicrophoneState();
 
@@ -16,22 +17,26 @@ export const DeviceSelectorAudioInput = ({
     <DeviceSelector
       devices={devices || []}
       selectedDeviceId={selectedDevice}
+      type="audioinput"
       onChange={async (deviceId) => {
         await microphone.select(deviceId);
       }}
-      title={title || t('Select a Mic')}
+      title={title}
+      visualType={visualType}
+      icon="mic"
     />
   );
 };
 
 export type DeviceSelectorAudioOutputProps = {
   title?: string;
+  visualType?: 'list' | 'dropdown';
 };
 
 export const DeviceSelectorAudioOutput = ({
   title,
+  visualType,
 }: DeviceSelectorAudioOutputProps) => {
-  const { t } = useI18n();
   const { useSpeakerState } = useCallStateHooks();
   const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =
     useSpeakerState();
@@ -41,11 +46,14 @@ export const DeviceSelectorAudioOutput = ({
   return (
     <DeviceSelector
       devices={devices}
+      type="audiooutput"
       selectedDeviceId={selectedDevice}
       onChange={(deviceId) => {
         speaker.select(deviceId);
       }}
-      title={title || t('Select Speakers')}
+      title={title}
+      visualType={visualType}
+      icon="speaker"
     />
   );
 };

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -1,23 +1,29 @@
 import { DeviceSelector } from './DeviceSelector';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
+  visualType?: 'list' | 'dropdown';
 };
 
-export const DeviceSelectorVideo = ({ title }: DeviceSelectorVideoProps) => {
-  const { t } = useI18n();
+export const DeviceSelectorVideo = ({
+  title,
+  visualType,
+}: DeviceSelectorVideoProps) => {
   const { useCameraState } = useCallStateHooks();
   const { camera, devices, selectedDevice } = useCameraState();
 
   return (
     <DeviceSelector
       devices={devices || []}
+      type="videoinput"
       selectedDeviceId={selectedDevice}
       onChange={async (deviceId) => {
         await camera.select(deviceId);
       }}
-      title={title || t('Select a Camera')}
+      title={title}
+      visualType={visualType}
+      icon="camera"
     />
   );
 };

package/src/components/DeviceSettings/DeviceSettings.tsx

@@ -1,44 +1,56 @@
 import { forwardRef } from 'react';
 import { useI18n } from '@stream-io/video-react-bindings';
-import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import clsx from 'clsx';
+import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
 import {
   DeviceSelectorAudioInput,
   DeviceSelectorAudioOutput,
 } from './DeviceSelectorAudio';
 import { DeviceSelectorVideo } from './DeviceSelectorVideo';
 import { IconButton } from '../Button';
-import clsx from 'clsx';
 
-export const DeviceSettings = () => {
+export type DeviceSettingsProps = {
+  visualType?: MenuVisualType;
+};
+
+export const DeviceSettings = ({
+  visualType = MenuVisualType.MENU,
+}: DeviceSettingsProps) => {
   return (
-    <MenuToggle placement="bottom-end" ToggleButton={ToggleMenuButton}>
+    <MenuToggle
+      placement="bottom-end"
+      ToggleButton={ToggleDeviceSettingsMenuButton}
+      visualType={visualType}
+    >
       <Menu />
     </MenuToggle>
   );
 };
 
-const Menu = () => (
-  <div className="str-video__device-settings">
-    <DeviceSelectorVideo />
-    <DeviceSelectorAudioInput />
-    <DeviceSelectorAudioOutput />
-  </div>
-);
-
-const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => {
-    const { t } = useI18n();
+const Menu = () => {
+  const { t } = useI18n();
+  return (
+    <div className="str-video__device-settings">
+      <DeviceSelectorVideo title={t('Select a Camera')} />
+      <DeviceSelectorAudioInput title={t('Select a Mic')} />
+      <DeviceSelectorAudioOutput title={t('Select Speakers')} />
+    </div>
+  );
+};
 
-    return (
-      <IconButton
-        className={clsx('str-video__device-settings__button', {
-          'str-video__device-settings__button--active': menuShown,
-        })}
-        title={t('Toggle device menu')}
-        icon="device-settings"
-        ref={ref}
-        // tabindex={0}
-      />
-    );
-  },
-);
+const ToggleDeviceSettingsMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
+  const { t } = useI18n();
+  return (
+    <IconButton
+      className={clsx('str-video__device-settings__button', {
+        'str-video__device-settings__button--active': menuShown,
+      })}
+      title={t('Toggle device menu')}
+      icon="device-settings"
+      ref={ref}
+    />
+  );
+});

package/src/components/DropdownSelect/DropdownSelect.tsx

@@ -0,0 +1,214 @@
+import {
+  createContext,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingList,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListItem,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from '@floating-ui/react';
+
+import { Icon } from '../Icon';
+
+interface SelectContextValue {
+  activeIndex: number | null;
+  selectedIndex: number | null;
+  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
+  handleSelect: (index: number | null) => void;
+}
+
+const SelectContext = createContext<SelectContextValue>(
+  {} as SelectContextValue,
+);
+
+const Select = (props: {
+  children: ReactNode;
+  icon?: string;
+  defaultSelectedLabel: string;
+  defaultSelectedIndex: number;
+  handleSelect: (index: number) => void;
+}) => {
+  const {
+    children,
+    icon,
+    defaultSelectedLabel,
+    defaultSelectedIndex,
+    handleSelect: handleSelectProp,
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(
+    defaultSelectedIndex,
+  );
+  const [selectedLabel, setSelectedLabel] = useState<string | null>(
+    defaultSelectedLabel,
+  );
+
+  const { refs, context } = useFloating({
+    placement: 'bottom-start',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip()],
+  });
+
+  const elementsRef = useRef<Array<HTMLElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+
+  const handleSelect = useCallback(
+    (index: number | null) => {
+      setSelectedIndex(index);
+      handleSelectProp(index || 0);
+      setIsOpen(false);
+      if (index !== null) {
+        setSelectedLabel(labelsRef.current[index]);
+      }
+    },
+    [handleSelectProp],
+  );
+
+  const handleTypeaheadMatch = (index: number | null) => {
+    if (isOpen) {
+      setActiveIndex(index);
+    } else {
+      handleSelect(index);
+    }
+  };
+
+  const listNav = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex,
+    selectedIndex,
+    onMatch: handleTypeaheadMatch,
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'listbox' });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [listNav, typeahead, click, dismiss, role],
+  );
+
+  const selectContext = useMemo(
+    () => ({
+      activeIndex,
+      selectedIndex,
+      getItemProps,
+      handleSelect,
+    }),
+    [activeIndex, selectedIndex, getItemProps, handleSelect],
+  );
+
+  return (
+    <div className="str-video__dropdown">
+      <div
+        className="str-video__dropdown-selected"
+        ref={refs.setReference}
+        tabIndex={0}
+        {...getReferenceProps()}
+      >
+        <label className="str-video__dropdown-selected__label">
+          {icon && (
+            <Icon className="str-video__dropdown-selected__icon" icon={icon} />
+          )}
+          {selectedLabel}
+        </label>
+        <Icon
+          className="str-video__dropdown-selected__chevron"
+          icon={isOpen ? 'chevron-up' : 'chevron-down'}
+        />
+      </div>
+      <SelectContext.Provider value={selectContext}>
+        {isOpen && (
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              className="str-video__dropdown-list"
+              ref={refs.setFloating}
+              {...getFloatingProps()}
+            >
+              <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+                {children}
+              </FloatingList>
+            </div>
+          </FloatingFocusManager>
+        )}
+      </SelectContext.Provider>
+    </div>
+  );
+};
+
+export type DropDownSelectOptionProps = {
+  label: string;
+  selected?: boolean;
+  icon: string;
+};
+
+export const DropDownSelectOption = (props: DropDownSelectOptionProps) => {
+  const { selected, label, icon } = props;
+  const { getItemProps, handleSelect } = useContext(SelectContext);
+  const { ref, index } = useListItem();
+  return (
+    <div
+      className={clsx('str-video__dropdown-option', {
+        'str-video__dropdown-option--selected': selected,
+      })}
+      ref={ref}
+      {...getItemProps({
+        onClick: () => handleSelect(index),
+      })}
+    >
+      <Icon className="str-video__dropdown-icon" icon={icon} />
+      <span className="str-video__dropdown-label">{label}</span>
+    </div>
+  );
+};
+
+export const DropDownSelect = (props: {
+  icon?: string;
+  defaultSelectedLabel: string;
+  defaultSelectedIndex: number;
+  handleSelect: (index: number) => void;
+  children:
+    | ReactElement<DropDownSelectOptionProps>
+    | ReactElement<DropDownSelectOptionProps>[];
+}) => {
+  const {
+    children,
+    icon,
+    handleSelect,
+    defaultSelectedLabel,
+    defaultSelectedIndex,
+  } = props;
+  return (
+    <Select
+      icon={icon}
+      handleSelect={handleSelect}
+      defaultSelectedIndex={defaultSelectedIndex}
+      defaultSelectedLabel={defaultSelectedLabel}
+    >
+      {children}
+    </Select>
+  );
+};

package/src/components/DropdownSelect/index.ts

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

package/src/components/Icon/Icon.tsx

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

package/src/components/Menu/GenericMenu.tsx

@@ -1,7 +1,29 @@
-import { ComponentProps, PropsWithChildren } from 'react';
+import { ComponentProps, MouseEvent, PropsWithChildren, useRef } from 'react';
 
-export const GenericMenu = ({ children }: PropsWithChildren) => {
-  return <ul className="str-video__generic-menu">{children}</ul>;
+export const GenericMenu = ({
+  children,
+  onItemClick,
+}: PropsWithChildren<{
+  onItemClick?: (e: MouseEvent) => void;
+}>) => {
+  const ref = useRef<HTMLUListElement>(null);
+  return (
+    <ul
+      className="str-video__generic-menu"
+      ref={ref}
+      onClick={(e) => {
+        if (
+          onItemClick &&
+          e.target !== ref.current &&
+          ref.current?.contains(e.target as Node)
+        ) {
+          onItemClick(e);
+        }
+      }}
+    >
+      {children}
+    </ul>
+  );
 };
 
 export const GenericMenuButtonItem = ({

package/src/components/Menu/MenuToggle.tsx

@@ -1,11 +1,20 @@
 import {
   ComponentType,
+  createContext,
+  ForwardedRef,
   PropsWithChildren,
+  useContext,
   useEffect,
+  useMemo,
   useState,
-  ForwardedRef,
 } from 'react';
-import { Placement, Strategy } from '@floating-ui/react';
+import {
+  FloatingOverlay,
+  FloatingPortal,
+  Placement,
+  Strategy,
+  UseFloatingReturn,
+} from '@floating-ui/react';
 
 import { useFloatingUIPreset } from '../../hooks';
 
@@ -14,16 +23,66 @@ export type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {
   ref: ForwardedRef<E>;
 };
 
+export enum MenuVisualType {
+  PORTAL = 'portal',
+  MENU = 'menu',
+}
+
 export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
   ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;
   placement?: Placement;
   strategy?: Strategy;
+  offset?: number;
+  visualType?: MenuVisualType;
 }>;
 
+export type MenuContextValue = {
+  close?: () => void;
+};
+
+/**
+ * Used to provide utility APIs to the components rendered inside the portal.
+ */
+const MenuContext = createContext<MenuContextValue>({});
+
+/**
+ * Access to the closes MenuContext.
+ */
+export const useMenuContext = (): MenuContextValue => {
+  return useContext(MenuContext);
+};
+
+const MenuPortal = ({
+  children,
+  refs,
+}: PropsWithChildren<{
+  refs: UseFloatingReturn['refs'];
+}>) => {
+  const portalId = useMemo(
+    () => `str-video-portal-${Math.random().toString(36).substring(2, 9)}`,
+    [],
+  );
+
+  return (
+    <>
+      <div id={portalId} className="str-video__portal" />
+      <FloatingOverlay>
+        <FloatingPortal id={portalId}>
+          <div className="str-video__portal-content" ref={refs.setFloating}>
+            {children}
+          </div>
+        </FloatingPortal>
+      </FloatingOverlay>
+    </>
+  );
+};
+
 export const MenuToggle = <E extends HTMLElement>({
   ToggleButton,
   placement = 'top-start',
   strategy = 'absolute',
+  offset,
+  visualType = MenuVisualType.MENU,
   children,
 }: MenuToggleProps<E>) => {
   const [menuShown, setMenuShown] = useState(false);
@@ -31,6 +90,7 @@ export const MenuToggle = <E extends HTMLElement>({
   const { floating, domReference, refs, x, y } = useFloatingUIPreset({
     placement,
     strategy,
+    offset,
   });
 
   useEffect(() => {
@@ -62,18 +122,23 @@ export const MenuToggle = <E extends HTMLElement>({
   return (
     <>
       {menuShown && (
-        <div
-          className="str-video__menu-container"
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-            overflowY: 'auto',
-          }}
-        >
-          {children}
-        </div>
+        <MenuContext.Provider value={{ close: () => setMenuShown(false) }}>
+          {visualType === MenuVisualType.PORTAL ? (
+            <MenuPortal refs={refs} children={children} />
+          ) : visualType === MenuVisualType.MENU ? (
+            <div
+              className="str-video__menu-container"
+              ref={refs.setFloating}
+              style={{
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                overflowY: 'auto',
+              }}
+              children={children}
+            />
+          ) : null}
+        </MenuContext.Provider>
       )}
       <ToggleButton menuShown={menuShown} ref={refs.setReference} />
     </>

package/src/components/Notification/Notification.tsx

@@ -10,6 +10,7 @@ export type NotificationProps = {
   resetIsVisible?: () => void;
   placement?: Placement;
   iconClassName?: string | null;
+  close?: () => void;
 };
 
 export const Notification = (props: PropsWithChildren<NotificationProps>) => {
@@ -21,6 +22,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     resetIsVisible,
     placement = 'top',
     iconClassName = 'str-video__notification__icon',
+    close,
   } = props;
 
   const { refs, x, y, strategy } = useFloatingUIPreset({
@@ -53,6 +55,12 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
         >
           {iconClassName && <i className={iconClassName} />}
           <span className="str-video__notification__message">{message}</span>
+          {close ? (
+            <i
+              className="str-video__icon str-video__icon--close str-video__notification__close"
+              onClick={close}
+            />
+          ) : null}
         </div>
       )}
       {children}

package/src/components/Notification/PermissionNotification.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useHasPermissions } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export type PermissionNotificationProps = PropsWithChildren<{
   /**
@@ -55,6 +55,7 @@ export const PermissionNotification = (props: PermissionNotificationProps) => {
     visibilityTimeout = 3500,
     children,
   } = props;
+  const { useHasPermissions } = useCallStateHooks();
   const hasPermission = useHasPermissions(permission);
   const prevHasPermission = useRef(hasPermission);
   const [showNotification, setShowNotification] = useState<

package/src/components/Notification/RecordingInProgressNotification.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { useToggleCallRecording } from '../../hooks';
+import { Notification } from './Notification';
+
+export type RecordingInProgressNotificationProps = {
+  text?: string;
+};
+
+export const RecordingInProgressNotification = ({
+  children,
+  text,
+}: PropsWithChildren<RecordingInProgressNotificationProps>) => {
+  const { t } = useI18n();
+  const { isCallRecordingInProgress } = useToggleCallRecording();
+
+  const [isVisible, setVisible] = useState(false);
+
+  const message = text ?? t('Recording in progress...');
+
+  useEffect(() => {
+    if (isCallRecordingInProgress) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [isCallRecordingInProgress]);
+
+  return (
+    <Notification
+      message={message}
+      iconClassName="str-video__icon str-video__icon--recording-on"
+      isVisible={isVisible}
+      placement="top-start"
+      close={() => setVisible(false)}
+    >
+      {children}
+    </Notification>
+  );
+};