@stream-io/video-react-sdk 1.41.0 → 1.42.0

package/dist/esm/src/components/Menu/MenuToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuToggle.js","sources":["../../../../../../../src/components/Menu/MenuToggle.tsx"],"sourcesContent":["import {\n  ComponentType,\n  createContext,\n  PropsWithChildren,\n  RefAttributes,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  FloatingOverlay,\n  FloatingPortal,\n  Placement,\n  Strategy,\n  UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { useFloatingUIPreset } from '../../hooks';\n\nexport type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {\n  menuShown: boolean;\n} & RefAttributes<E>;\n\nexport enum MenuVisualType {\n  PORTAL = 'portal',\n  MENU = 'menu',\n}\n\nexport type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{\n  ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;\n  placement?: Placement;\n  strategy?: Strategy;\n  offset?: number;\n  visualType?: MenuVisualType;\n  onToggle?: (menuShown: boolean) => void;\n}>;\n\nexport type MenuContextValue = {\n  close?: () => void;\n};\n\n/**\n * Used to provide utility APIs to the components rendered inside the portal.\n */\nconst MenuContext = createContext<MenuContextValue>({});\n\n/**\n * Access to the closes MenuContext.\n */\nexport const useMenuContext = (): MenuContextValue => {\n  return useContext(MenuContext);\n};\n\nconst MenuPortal = ({\n  children,\n  refs,\n}: PropsWithChildren<{\n  refs: UseFloatingReturn['refs'];\n}>) => {\n  const [portalRoot, setPortalRoot] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <>\n      <div ref={setPortalRoot} className=\"str-video__portal\" />\n      <FloatingOverlay>\n        <FloatingPortal root={portalRoot}>\n          <div className=\"str-video__portal-content\" ref={refs.setFloating}>\n            {children}\n          </div>\n        </FloatingPortal>\n      </FloatingOverlay>\n    </>\n  );\n};\n\nexport const MenuToggle = <E extends HTMLElement>({\n  ToggleButton,\n  placement = 'top-start',\n  strategy = 'absolute',\n  offset,\n  visualType = MenuVisualType.MENU,\n  children,\n  onToggle,\n}: MenuToggleProps<E>) => {\n  const [menuShown, setMenuShown] = useState(false);\n  const toggleHandler = useRef(onToggle);\n  toggleHandler.current = onToggle;\n\n  const { floating, domReference, refs, x, y } = useFloatingUIPreset({\n    placement,\n    strategy,\n    offset,\n  });\n\n  useEffect(() => {\n    const parentDocument = domReference?.ownerDocument;\n\n    const handleClick = (event: MouseEvent) => {\n      if (!floating && domReference?.contains(event.target as Node)) {\n        setMenuShown(true);\n        toggleHandler.current?.(true);\n      } else if (floating && !floating?.contains(event.target as Node)) {\n        setMenuShown(false);\n        toggleHandler.current?.(false);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key && // key can be undefined in some browsers\n        event.key.toLowerCase() === 'escape' &&\n        !event.altKey &&\n        !event.ctrlKey\n      ) {\n        setMenuShown(false);\n        toggleHandler.current?.(false);\n      }\n    };\n    parentDocument?.addEventListener('click', handleClick, { capture: true });\n    parentDocument?.addEventListener('keydown', handleKeyDown);\n    return () => {\n      parentDocument?.removeEventListener('click', handleClick, {\n        capture: true,\n      });\n      parentDocument?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [floating, domReference]);\n\n  return (\n    <>\n      {menuShown && (\n        <MenuContext.Provider value={{ close: () => setMenuShown(false) }}>\n          {visualType === MenuVisualType.PORTAL ? (\n            <MenuPortal refs={refs} children={children} />\n          ) : visualType === MenuVisualType.MENU ? (\n            <div\n              className=\"str-video__menu-container\"\n              ref={refs.setFloating}\n              style={{\n                position: strategy,\n                top: y ?? 0,\n                left: x ?? 0,\n                overflowY: 'auto',\n              }}\n              role=\"menu\"\n              children={children}\n            />\n          ) : null}\n        </MenuContext.Provider>\n      )}\n      <ToggleButton menuShown={menuShown} ref={refs.setReference} />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/src/components/NoiseCancellation/NoiseCancellationProvider.js

@@ -0,0 +1,96 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useRef, useMemo, useContext } from 'react';
+import { NoiseCancellationSettingsModeEnum, OwnCapability } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+const NoiseCancellationContext = createContext(null);
+/**
+ * Exposes the NoiseCancellation API.
+ * Throws an error if used outside <NoiseCancellationProvider />.
+ */
+const useNoiseCancellation = () => {
+    const context = useContext(NoiseCancellationContext);
+    if (!context) {
+        throw new Error('useNoiseCancellation must be used within a NoiseCancellationProvider');
+    }
+    return context;
+};
+const NoiseCancellationProvider = (props) => {
+    const { children, noiseCancellation } = props;
+    const call = useCall();
+    const { useCallSettings, useHasPermissions } = useCallStateHooks();
+    const settings = useCallSettings();
+    const noiseCancellationAllowed = !!(settings &&
+        settings.audio.noise_cancellation &&
+        settings.audio.noise_cancellation.mode !==
+            NoiseCancellationSettingsModeEnum.DISABLED);
+    const hasCapability = useHasPermissions(OwnCapability.ENABLE_NOISE_CANCELLATION);
+    const [isSupportedByBrowser, setIsSupportedByBrowser] = useState();
+    useEffect(() => {
+        const result = noiseCancellation.isSupported();
+        if (typeof result === 'boolean') {
+            setIsSupportedByBrowser(result);
+        }
+        else {
+            result
+                .then((s) => setIsSupportedByBrowser(s))
+                .catch((err) => console.error(`Can't determine if noise cancellation is supported`, err));
+        }
+    }, [noiseCancellation]);
+    const isSupported = isSupportedByBrowser && hasCapability && noiseCancellationAllowed;
+    const [isEnabled, setIsEnabled] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const deinit = useRef(undefined);
+    useEffect(() => {
+        if (!call || !isSupported)
+            return;
+        noiseCancellation.isEnabled().then((e) => setIsEnabled(e));
+        const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));
+        const init = (deinit.current || Promise.resolve())
+            .then(() => noiseCancellation.init({ tracer: call.tracer }))
+            .then(() => {
+            setIsReady(true);
+            return call.microphone.enableNoiseCancellation(noiseCancellation);
+        })
+            .catch((e) => console.error(`Can't initialize noise cancellation`, e));
+        return () => {
+            deinit.current = init
+                .then(() => call.microphone.disableNoiseCancellation())
+                .then(() => noiseCancellation.dispose())
+                .then(() => unsubscribe())
+                .catch((e) => console.error("Can't clean up noise cancellation", e))
+                .finally(() => setIsReady(false));
+        };
+    }, [call, isSupported, noiseCancellation]);
+    const contextValue = useMemo(() => ({
+        isSupported,
+        isReady,
+        isEnabled,
+        setSuppressionLevel: (level) => {
+            if (!noiseCancellation)
+                return;
+            noiseCancellation.setSuppressionLevel(level);
+        },
+        setEnabled: (enabledOrSetter) => {
+            if (!noiseCancellation)
+                return;
+            const enable = typeof enabledOrSetter === 'function'
+                ? enabledOrSetter(isEnabled)
+                : enabledOrSetter;
+            if (enable) {
+                noiseCancellation.enable().catch((err) => {
+                    console.error('Failed to enable noise cancellation', err);
+                });
+            }
+            else {
+                noiseCancellation.disable().catch((err) => {
+                    console.error('Failed to disable noise cancellation', err);
+                });
+            }
+        },
+    }), [isEnabled, isReady, isSupported, noiseCancellation]);
+    return (jsx(NoiseCancellationContext.Provider, { value: contextValue, children: children }));
+};
+
+export { NoiseCancellationProvider, useNoiseCancellation };
+//# sourceMappingURL=NoiseCancellationProvider.js.map

package/dist/esm/src/components/NoiseCancellation/NoiseCancellationProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoiseCancellationProvider.js","sources":["../../../../../../../src/components/NoiseCancellation/NoiseCancellationProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  NoiseCancellationSettingsModeEnum,\n  OwnCapability,\n} from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport type { INoiseCancellation } from '@stream-io/audio-filters-web';\n\nexport type NoiseCancellationProviderProps = {\n  /**\n   * The noise cancellation instance to use.\n   */\n  noiseCancellation: INoiseCancellation;\n};\n\n/**\n * The Noise Cancellation API.\n */\nexport type NoiseCancellationAPI = {\n  /**\n   * A boolean providing information whether Noise Cancelling functionalities\n   * are supported on this platform and for the current user.\n   */\n  isSupported: boolean | undefined;\n  /**\n   * Provides information whether Noise Cancellation is initialized and ready.\n   */\n  isReady: boolean;\n  /**\n   * Provides information whether Noise Cancellation is active or not.\n   */\n  isEnabled: boolean;\n  /**\n   * Allows you to temporarily enable or disable the Noise Cancellation filters.\n   *\n   * @param enabled a boolean or a setter.\n   */\n  setEnabled: (enabled: boolean | ((value: boolean) => boolean)) => void;\n\n  /**\n   * Sets the noise suppression level (0-100).\n   *\n   * @param level 0 for no suppression, 100 for maximum suppression.\n   */\n  setSuppressionLevel: (level: number) => void;\n};\n\nconst NoiseCancellationContext = createContext<NoiseCancellationAPI | null>(\n  null,\n);\n\n/**\n * Exposes the NoiseCancellation API.\n * Throws an error if used outside <NoiseCancellationProvider />.\n */\nexport const useNoiseCancellation = (): NoiseCancellationAPI => {\n  const context = useContext(NoiseCancellationContext);\n  if (!context) {\n    throw new Error(\n      'useNoiseCancellation must be used within a NoiseCancellationProvider',\n    );\n  }\n  return context;\n};\n\nexport const NoiseCancellationProvider = (\n  props: PropsWithChildren<NoiseCancellationProviderProps>,\n) => {\n  const { children, noiseCancellation } = props;\n  const call = useCall();\n  const { useCallSettings, useHasPermissions } = useCallStateHooks();\n  const settings = useCallSettings();\n  const noiseCancellationAllowed = !!(\n    settings &&\n    settings.audio.noise_cancellation &&\n    settings.audio.noise_cancellation.mode !==\n      NoiseCancellationSettingsModeEnum.DISABLED\n  );\n\n  const hasCapability = useHasPermissions(\n    OwnCapability.ENABLE_NOISE_CANCELLATION,\n  );\n  const [isSupportedByBrowser, setIsSupportedByBrowser] = useState<boolean>();\n  useEffect(() => {\n    const result = noiseCancellation.isSupported();\n    if (typeof result === 'boolean') {\n      setIsSupportedByBrowser(result);\n    } else {\n      result\n        .then((s) => setIsSupportedByBrowser(s))\n        .catch((err) =>\n          console.error(\n            `Can't determine if noise cancellation is supported`,\n            err,\n          ),\n        );\n    }\n  }, [noiseCancellation]);\n\n  const isSupported =\n    isSupportedByBrowser && hasCapability && noiseCancellationAllowed;\n\n  const [isEnabled, setIsEnabled] = useState(false);\n  const [isReady, setIsReady] = useState(false);\n\n  const deinit = useRef<Promise<void>>(undefined);\n  useEffect(() => {\n    if (!call || !isSupported) return;\n    noiseCancellation.isEnabled().then((e) => setIsEnabled(e));\n    const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));\n    const init = (deinit.current || Promise.resolve())\n      .then(() => noiseCancellation.init({ tracer: call.tracer }))\n      .then(() => {\n        setIsReady(true);\n        return call.microphone.enableNoiseCancellation(noiseCancellation);\n      })\n      .catch((e) => console.error(`Can't initialize noise cancellation`, e));\n\n    return () => {\n      deinit.current = init\n        .then(() => call.microphone.disableNoiseCancellation())\n        .then(() => noiseCancellation.dispose())\n        .then(() => unsubscribe())\n        .catch((e) => console.error(\"Can't clean up noise cancellation\", e))\n        .finally(() => setIsReady(false));\n    };\n  }, [call, isSupported, noiseCancellation]);\n\n  const contextValue = useMemo<NoiseCancellationAPI>(\n    () => ({\n      isSupported,\n      isReady,\n      isEnabled,\n      setSuppressionLevel: (level) => {\n        if (!noiseCancellation) return;\n        noiseCancellation.setSuppressionLevel(level);\n      },\n      setEnabled: (enabledOrSetter) => {\n        if (!noiseCancellation) return;\n        const enable =\n          typeof enabledOrSetter === 'function'\n            ? enabledOrSetter(isEnabled)\n            : enabledOrSetter;\n        if (enable) {\n          noiseCancellation.enable().catch((err) => {\n            console.error('Failed to enable noise cancellation', err);\n          });\n        } else {\n          noiseCancellation.disable().catch((err) => {\n            console.error('Failed to disable noise cancellation', err);\n          });\n        }\n      },\n    }),\n    [isEnabled, isReady, isSupported, noiseCancellation],\n  );\n  return (\n    <NoiseCancellationContext.Provider value={contextValue}>\n      {children}\n    </NoiseCancellationContext.Provider>\n  );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/src/components/Notification/MicCaptureErrorNotification.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { Notification } from './Notification.js';
+
+const MicCaptureErrorNotification = ({ children, text, placement, }) => {
+    const call = useCall();
+    const { t } = useI18n();
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        if (!call)
+            return;
+        return call.on('mic.capture_report', (event) => {
+            setIsVisible(!event.capturesAudio);
+        });
+    }, [call]);
+    const message = text ??
+        t('Your microphone is not capturing audio. Please check your setup.');
+    return (jsx(Notification, { message: message, isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
+};
+
+export { MicCaptureErrorNotification };
+//# sourceMappingURL=MicCaptureErrorNotification.js.map

package/dist/esm/src/components/Notification/MicCaptureErrorNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MicCaptureErrorNotification.js","sources":["../../../../../../../src/components/Notification/MicCaptureErrorNotification.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport { Placement } from '@floating-ui/react';\nimport { useCall, useI18n } from '@stream-io/video-react-bindings';\nimport { Notification } from './Notification';\n\nexport type MicCaptureErrorNotificationProps = {\n  /**\n   * Text message displayed by the notification.\n   */\n  text?: string;\n  placement?: Placement;\n};\n\nexport const MicCaptureErrorNotification = ({\n  children,\n  text,\n  placement,\n}: PropsWithChildren<MicCaptureErrorNotificationProps>) => {\n  const call = useCall();\n  const { t } = useI18n();\n  const [isVisible, setIsVisible] = useState(false);\n  useEffect(() => {\n    if (!call) return;\n    return call.on('mic.capture_report', (event) => {\n      setIsVisible(!event.capturesAudio);\n    });\n  }, [call]);\n\n  const message =\n    text ??\n    t('Your microphone is not capturing audio. Please check your setup.');\n\n  return (\n    <Notification\n      message={message}\n      isVisible={isVisible}\n      placement={placement}\n      close={() => setIsVisible(false)}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAaO,MAAM,2BAA2B,GAAG,CAAC,EAC1C,QAAQ,EACR,IAAI,EACJ,SAAS,GAC2C,KAAI;AACxD,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,OAAO,IAAI,CAAC,EAAE,CAAC,oBAAoB,EAAE,CAAC,KAAK,KAAI;AAC7C,YAAA,YAAY,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC;AACpC,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,MAAM,OAAO,GACX,IAAI;QACJ,CAAC,CAAC,kEAAkE,CAAC;AAEvE,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAA,QAAA,EAE/B,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Notification/Notification.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import clsx from 'clsx';
+import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+
+const Notification = (props) => {
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, iconClassName = 'str-video__notification__icon', close, } = 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 (jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y ?? 0,
+                    left: x ?? 0,
+                    overflowY: 'auto',
+                }, children: [iconClassName && jsx("i", { className: iconClassName }), jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
+};
+
+export { Notification };
+//# sourceMappingURL=Notification.js.map

package/dist/esm/src/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { PropsWithChildren, ReactNode, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { Placement } from '@floating-ui/react';\nimport { useFloatingUIPreset } from '../../hooks';\n\nexport type NotificationProps = {\n  message?: ReactNode;\n  isVisible?: boolean;\n  visibilityTimeout?: number;\n  resetIsVisible?: () => void;\n  placement?: Placement;\n  className?: string;\n  iconClassName?: string | null;\n  close?: () => void;\n};\n\nexport const Notification = (props: PropsWithChildren<NotificationProps>) => {\n  const {\n    isVisible,\n    message,\n    children,\n    visibilityTimeout,\n    resetIsVisible,\n    placement = 'top',\n    className,\n    iconClassName = 'str-video__notification__icon',\n    close,\n  } = props;\n\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement,\n    strategy: 'absolute',\n  });\n\n  useEffect(() => {\n    if (!isVisible || !visibilityTimeout || !resetIsVisible) return;\n\n    const timeout = setTimeout(() => {\n      resetIsVisible();\n    }, visibilityTimeout);\n\n    return () => clearTimeout(timeout);\n  }, [isVisible, resetIsVisible, visibilityTimeout]);\n\n  return (\n    <div className=\"str-video__notification-wrapper\" ref={refs.setReference}>\n      {isVisible && (\n        <div\n          className={clsx('str-video__notification', className)}\n          ref={refs.setFloating}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            overflowY: 'auto',\n          }}\n        >\n          {iconClassName && <i className={iconClassName} />}\n          <span className=\"str-video__notification__message\">{message}</span>\n          {close ? (\n            <i\n              className=\"str-video__icon str-video__icon--close str-video__notification__close\"\n              onClick={close}\n            />\n          ) : null}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAgBO,MAAM,YAAY,GAAG,CAAC,KAA2C,KAAI;IAC1E,MAAM,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,aAAa,GAAG,+BAA+B,EAC/C,KAAK,GACN,GAAG,KAAK;IAET,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC;QACnD,SAAS;AACT,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,iBAAiB,IAAI,CAAC,cAAc;YAAE;AAEzD,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;AAC9B,YAAA,cAAc,EAAE;QAClB,CAAC,EAAE,iBAAiB,CAAC;AAErB,QAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAElD,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,IAAI,CAAC,YAAY,EAAA,QAAA,EAAA,CACpE,SAAS,KACRA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACrD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,QAAQ;oBAClB,GAAG,EAAE,CAAC,IAAI,CAAC;oBACX,IAAI,EAAE,CAAC,IAAI,CAAC;AACZ,oBAAA,SAAS,EAAE,MAAM;AAClB,iBAAA,EAAA,QAAA,EAAA,CAEA,aAAa,IAAIC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,aAAa,GAAI,EACjDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAE,OAAO,GAAQ,EAClE,KAAK,IACJA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAC,uEAAuE,EACjF,OAAO,EAAE,KAAK,EAAA,CACd,IACA,IAAI,CAAA,EAAA,CACJ,CACP,EACA,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/components/Notification/PermissionNotification.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { Notification } from './Notification.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+
+const PermissionNotification = (props) => {
+    const { permission, isAwaitingApproval, messageApproved, messageAwaitingApproval, messageRevoked, visibilityTimeout = 3500, children, } = props;
+    const { useHasPermissions } = useCallStateHooks();
+    const hasPermission = useHasPermissions(permission);
+    const prevHasPermission = useRef(hasPermission);
+    const [showNotification, setShowNotification] = useState();
+    useEffect(() => {
+        if (prevHasPermission.current === hasPermission)
+            return;
+        if (hasPermission) {
+            setShowNotification('granted');
+            prevHasPermission.current = true;
+        }
+        else {
+            setShowNotification('revoked');
+            prevHasPermission.current = false;
+        }
+    }, [hasPermission]);
+    const resetIsVisible = useCallback(() => setShowNotification(undefined), []);
+    if (isAwaitingApproval) {
+        return (jsx(Notification, { isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
+    }
+    return (jsx(Notification, { isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
+};
+
+export { PermissionNotification };
+//# sourceMappingURL=PermissionNotification.js.map

package/dist/esm/src/components/Notification/PermissionNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionNotification.js","sources":["../../../../../../../src/components/Notification/PermissionNotification.tsx"],"sourcesContent":["import { Notification } from './Notification';\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport type PermissionNotificationProps = PropsWithChildren<{\n  /**\n   * Set this to true if there is ongoing request for the permission.\n   */\n  isAwaitingApproval: boolean;\n\n  /**\n   * The message to display in the notification once\n   * the requested permission is granted.\n   */\n  messageApproved: string;\n\n  /**\n   * The message to display in the notification once a permission\n   * is revoked.\n   */\n  messageRevoked: string;\n\n  /**\n   * The message to display in the notification while\n   * the requested permission is awaiting approval.\n   */\n  messageAwaitingApproval: string;\n\n  /**\n   * The permission to check for.\n   */\n  permission: OwnCapability;\n\n  /**\n   * The time in milliseconds to display the notification.\n   * Defaults to 3500ms.\n   */\n  visibilityTimeout?: number;\n}>;\n\nexport const PermissionNotification = (props: PermissionNotificationProps) => {\n  const {\n    permission,\n    isAwaitingApproval,\n    messageApproved,\n    messageAwaitingApproval,\n    messageRevoked,\n    visibilityTimeout = 3500,\n    children,\n  } = props;\n  const { useHasPermissions } = useCallStateHooks();\n  const hasPermission = useHasPermissions(permission);\n  const prevHasPermission = useRef(hasPermission);\n  const [showNotification, setShowNotification] = useState<\n    'granted' | 'revoked'\n  >();\n  useEffect(() => {\n    if (prevHasPermission.current === hasPermission) return;\n\n    if (hasPermission) {\n      setShowNotification('granted');\n      prevHasPermission.current = true;\n    } else {\n      setShowNotification('revoked');\n      prevHasPermission.current = false;\n    }\n  }, [hasPermission]);\n\n  const resetIsVisible = useCallback(() => setShowNotification(undefined), []);\n  if (isAwaitingApproval) {\n    return (\n      <Notification\n        isVisible={isAwaitingApproval && !hasPermission}\n        message={messageAwaitingApproval}\n      >\n        {children}\n      </Notification>\n    );\n  }\n\n  return (\n    <Notification\n      isVisible={!!showNotification}\n      visibilityTimeout={visibilityTimeout}\n      resetIsVisible={resetIsVisible}\n      message={\n        showNotification === 'granted' ? messageApproved : messageRevoked\n      }\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AA+CO,MAAM,sBAAsB,GAAG,CAAC,KAAkC,KAAI;AAC3E,IAAA,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK;AACT,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE;AACjD,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,CAAC;AACnD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,aAAa,CAAC;IAC/C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAErD;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,aAAa;YAAE;QAEjD,IAAI,aAAa,EAAE;YACjB,mBAAmB,CAAC,SAAS,CAAC;AAC9B,YAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;QAClC;aAAO;YACL,mBAAmB,CAAC,SAAS,CAAC;AAC9B,YAAA,iBAAiB,CAAC,OAAO,GAAG,KAAK;QACnC;AACF,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,mBAAmB,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;IAC5E,IAAI,kBAAkB,EAAE;AACtB,QAAA,QACEA,GAAA,CAAC,YAAY,IACX,SAAS,EAAE,kBAAkB,IAAI,CAAC,aAAa,EAC/C,OAAO,EAAE,uBAAuB,YAE/B,QAAQ,EAAA,CACI;IAEnB;AAEA,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,OAAO,EACL,gBAAgB,KAAK,SAAS,GAAG,eAAe,GAAG,cAAc,EAAA,QAAA,EAGlE,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Notification/RecordingInProgressNotification.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useI18n, useToggleCallRecording } from '@stream-io/video-react-bindings';
+import { Notification } from './Notification.js';
+
+const RecordingInProgressNotification = ({ children, text, }) => {
+    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 (jsx(Notification, { message: message, iconClassName: "str-video__icon str-video__icon--recording-on", isVisible: isVisible, placement: "top-start", close: () => setVisible(false), children: children }));
+};
+
+export { RecordingInProgressNotification };
+//# sourceMappingURL=RecordingInProgressNotification.js.map

package/dist/esm/src/components/Notification/RecordingInProgressNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordingInProgressNotification.js","sources":["../../../../../../../src/components/Notification/RecordingInProgressNotification.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport {\n  useI18n,\n  useToggleCallRecording,\n} from '@stream-io/video-react-bindings';\nimport { Notification } from './Notification';\n\nexport type RecordingInProgressNotificationProps = {\n  text?: string;\n};\n\nexport const RecordingInProgressNotification = ({\n  children,\n  text,\n}: PropsWithChildren<RecordingInProgressNotificationProps>) => {\n  const { t } = useI18n();\n  const { isCallRecordingInProgress } = useToggleCallRecording();\n\n  const [isVisible, setVisible] = useState(false);\n\n  const message = text ?? t('Recording in progress...');\n\n  useEffect(() => {\n    if (isCallRecordingInProgress) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, [isCallRecordingInProgress]);\n\n  return (\n    <Notification\n      message={message}\n      iconClassName=\"str-video__icon str-video__icon--recording-on\"\n      isVisible={isVisible}\n      placement=\"top-start\"\n      close={() => setVisible(false)}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAWO,MAAM,+BAA+B,GAAG,CAAC,EAC9C,QAAQ,EACR,IAAI,GACoD,KAAI;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,yBAAyB,EAAE,GAAG,sBAAsB,EAAE;IAE9D,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,0BAA0B,CAAC;IAErD,SAAS,CAAC,MAAK;QACb,IAAI,yBAAyB,EAAE;YAC7B,UAAU,CAAC,IAAI,CAAC;QAClB;aAAO;YACL,UAAU,CAAC,KAAK,CAAC;QACnB;AACF,IAAA,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;AAE/B,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,+CAA+C,EAC7D,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,MAAM,UAAU,CAAC,KAAK,CAAC,EAAA,QAAA,EAE7B,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Notification/SpeakingWhileMutedNotification.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { Notification } from './Notification.js';
+
+const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { isSpeakingWhileMuted } = useMicrophoneState();
+    const { t } = useI18n();
+    const message = text ?? t('You are muted. Unmute to speak.');
+    return (jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, placement: placement || 'top-start', children: children }));
+};
+
+export { SpeakingWhileMutedNotification };
+//# sourceMappingURL=SpeakingWhileMutedNotification.js.map

package/dist/esm/src/components/Notification/SpeakingWhileMutedNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeakingWhileMutedNotification.js","sources":["../../../../../../../src/components/Notification/SpeakingWhileMutedNotification.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\nimport { Placement } from '@floating-ui/react';\n\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { Notification } from './Notification';\n\nexport type SpeakingWhileMutedNotificationProps = {\n  /**\n   * Text message displayed by the notification.\n   */\n  text?: string;\n  placement?: Placement;\n};\n\nexport const SpeakingWhileMutedNotification = ({\n  children,\n  text,\n  placement,\n}: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { isSpeakingWhileMuted } = useMicrophoneState();\n  const { t } = useI18n();\n\n  const message = text ?? t('You are muted. Unmute to speak.');\n  return (\n    <Notification\n      message={message}\n      isVisible={isSpeakingWhileMuted}\n      placement={placement || 'top-start'}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;AAcO,MAAM,8BAA8B,GAAG,CAAC,EAC7C,QAAQ,EACR,IAAI,EACJ,SAAS,GAC8C,KAAI;AAC3D,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,EAAE;AACrD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,iCAAiC,CAAC;IAC5D,QACEA,IAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,SAAS,EAAE,SAAS,IAAI,WAAW,EAAA,QAAA,EAElC,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Permissions/PermissionRequests.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, Fragment, useState, useEffect } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
+
+const byNameOrId = (a, b) => {
+    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;
+};
+const PermissionRequests = () => {
+    const call = useCall();
+    const { useLocalParticipant, useHasPermissions } = useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const [expanded, setExpanded] = useState(false);
+    const [permissionRequests, setPermissionRequests] = useState([]);
+    const canUpdateCallPermissions = useHasPermissions(OwnCapability.UPDATE_CALL_PERMISSIONS);
+    const localUserId = localParticipant?.userId;
+    useEffect(() => {
+        if (!call || !canUpdateCallPermissions)
+            return;
+        return call.on('call.permission_request', (event) => {
+            if (event.user.id !== localUserId) {
+                setPermissionRequests((requests) => [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)));
+            }
+        });
+    }, [call, canUpdateCallPermissions, localUserId]);
+    const handleUpdatePermission = (request, type) => {
+        return async () => {
+            const { user, permissions } = request;
+            switch (type) {
+                case 'grant':
+                    await call?.grantPermissions(user.id, permissions);
+                    break;
+                case 'revoke':
+                    await call?.revokePermissions(user.id, permissions);
+                    break;
+            }
+            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 (jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsx(Button, { type: "button", onClick: () => {
+                            setExpanded((e) => !e);
+                        }, children: expanded ? 'Hide requests' : 'Show requests' })] }), expanded && (jsx(PermissionRequestList, { ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y ?? 0,
+                    left: x ?? 0,
+                    overflowY: 'auto',
+                }, permissionRequests: permissionRequests, handleUpdatePermission: handleUpdatePermission }))] }));
+};
+const PermissionRequestList = forwardRef(function PermissionRequestListRender(props, ref) {
+    const { permissionRequests, handleUpdatePermission, ...rest } = props;
+    const { t } = useI18n();
+    return (jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
+            const { user, permissions } = request;
+            return (jsx(Fragment, { children: permissions.map((permission) => (jsxs("div", { className: "str-video__permission-request", children: [jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsx(Button, { className: "str-video__permission-request__button--allow", type: "button", onClick: handleUpdatePermission(request, 'grant'), children: t('Allow') }), jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'revoke'), children: t('Revoke') }), jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'dismiss'), children: t('Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
+        }) }));
+});
+const Button = (props) => {
+    const { className, ...rest } = props;
+    return (jsx("button", { className: clsx('str-video__permission-request__button', className), ...rest }));
+};
+const messageForPermission = (userName, permission, t) => {
+    switch (permission) {
+        case OwnCapability.SEND_AUDIO:
+            return t('{{ userName }} is requesting to speak', { userName });
+        case OwnCapability.SEND_VIDEO:
+            return t('{{ userName }} is requesting to share their camera', {
+                userName,
+            });
+        case OwnCapability.SCREENSHARE:
+            return t('{{ userName }} is requesting to present their screen', {
+                userName,
+            });
+        default:
+            return t('{{ userName }} is requesting permission: {{ permission }}', {
+                userName,
+                permission,
+            });
+    }
+};
+
+export { PermissionRequestList, PermissionRequests };
+//# sourceMappingURL=PermissionRequests.js.map

package/dist/esm/src/components/Permissions/PermissionRequests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionRequests.js","sources":["../../../../../../../src/components/Permissions/PermissionRequests.tsx"],"sourcesContent":["import {\n  ButtonHTMLAttributes,\n  ComponentProps,\n  forwardRef,\n  Fragment,\n  PropsWithChildren,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  OwnCapability,\n  PermissionRequestEvent,\n  UserResponse,\n} from '@stream-io/video-client';\nimport {\n  TranslatorFunction,\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\nimport { useFloatingUIPreset } from '../../hooks';\n\nconst byNameOrId = (a: UserResponse, b: UserResponse) => {\n  if (a.name && b.name && a.name < b.name) return -1;\n  if (a.name && b.name && a.name > b.name) return 1;\n  if (a.id < b.id) return -1;\n  if (a.id > b.id) return 1;\n  return 0;\n};\n\ntype HandleUpdatePermission = (\n  request: PermissionRequestEvent,\n  type: 'grant' | 'revoke' | 'dismiss',\n) => () => Promise<void>;\n\nexport const PermissionRequests = () => {\n  const call = useCall();\n  const { useLocalParticipant, useHasPermissions } = useCallStateHooks();\n  const localParticipant = useLocalParticipant();\n  const [expanded, setExpanded] = useState(false);\n  const [permissionRequests, setPermissionRequests] = useState<\n    PermissionRequestEvent[]\n  >([]);\n  const canUpdateCallPermissions = useHasPermissions(\n    OwnCapability.UPDATE_CALL_PERMISSIONS,\n  );\n\n  const localUserId = localParticipant?.userId;\n  useEffect(() => {\n    if (!call || !canUpdateCallPermissions) return;\n    return call.on('call.permission_request', (event) => {\n      if (event.user.id !== localUserId) {\n        setPermissionRequests((requests) =>\n          [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)),\n        );\n      }\n    });\n  }, [call, canUpdateCallPermissions, localUserId]);\n\n  const handleUpdatePermission: HandleUpdatePermission = (request, type) => {\n    return async () => {\n      const { user, permissions } = request;\n      switch (type) {\n        case 'grant':\n          await call?.grantPermissions(user.id, permissions);\n          break;\n        case 'revoke':\n          await call?.revokePermissions(user.id, permissions);\n          break;\n        default:\n          break;\n      }\n      setPermissionRequests((requests) =>\n        requests.filter((r) => r !== request),\n      );\n    };\n  };\n\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement: 'bottom',\n    strategy: 'absolute',\n  });\n\n  // don't render anything if there are no permission requests\n  if (permissionRequests.length === 0) return null;\n\n  return (\n    <div className=\"str-video__permission-requests\" ref={refs.setReference}>\n      <div className=\"str-video__permission-requests__notification\">\n        <span className=\"str-video__permission-requests__notification__message\">\n          {permissionRequests.length} pending permission requests\n        </span>\n        <Button\n          type=\"button\"\n          onClick={() => {\n            setExpanded((e) => !e);\n          }}\n        >\n          {expanded ? 'Hide requests' : 'Show requests'}\n        </Button>\n      </div>\n      {expanded && (\n        <PermissionRequestList\n          ref={refs.setFloating}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            overflowY: 'auto',\n          }}\n          permissionRequests={permissionRequests}\n          handleUpdatePermission={handleUpdatePermission}\n        />\n      )}\n    </div>\n  );\n};\n\nexport type PermissionRequestListProps = ComponentProps<'div'> & {\n  permissionRequests: PermissionRequestEvent[];\n  handleUpdatePermission: HandleUpdatePermission;\n};\n\nexport const PermissionRequestList = forwardRef<\n  HTMLDivElement,\n  PermissionRequestListProps\n>(function PermissionRequestListRender(props, ref) {\n  const { permissionRequests, handleUpdatePermission, ...rest } = props;\n\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__permission-requests-list\" ref={ref} {...rest}>\n      {permissionRequests.map((request, reqIndex) => {\n        const { user, permissions } = request;\n        return (\n          <Fragment key={`${user.id}/${reqIndex}`}>\n            {permissions.map((permission) => (\n              <div className=\"str-video__permission-request\" key={permission}>\n                <div className=\"str-video__permission-request__message\">\n                  {messageForPermission(user.name || user.id, permission, t)}\n                </div>\n                <Button\n                  className=\"str-video__permission-request__button--allow\"\n                  type=\"button\"\n                  onClick={handleUpdatePermission(request, 'grant')}\n                >\n                  {t('Allow')}\n                </Button>\n                <Button\n                  className=\"str-video__permission-request__button--reject\"\n                  type=\"button\"\n                  onClick={handleUpdatePermission(request, 'revoke')}\n                >\n                  {t('Revoke')}\n                </Button>\n                <Button\n                  className=\"str-video__permission-request__button--reject\"\n                  type=\"button\"\n                  onClick={handleUpdatePermission(request, 'dismiss')}\n                >\n                  {t('Dismiss')}\n                </Button>\n              </div>\n            ))}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n});\n\nconst Button = (\n  props: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n) => {\n  const { className, ...rest } = props;\n  return (\n    <button\n      className={clsx('str-video__permission-request__button', className)}\n      {...rest}\n    />\n  );\n};\n\nconst messageForPermission = (\n  userName: string,\n  permission: string,\n  t: TranslatorFunction,\n) => {\n  switch (permission) {\n    case OwnCapability.SEND_AUDIO:\n      return t('{{ userName }} is requesting to speak', { userName });\n    case OwnCapability.SEND_VIDEO:\n      return t('{{ userName }} is requesting to share their camera', {\n        userName,\n      });\n    case OwnCapability.SCREENSHARE:\n      return t('{{ userName }} is requesting to present their screen', {\n        userName,\n      });\n    default:\n      return t('{{ userName }} is requesting permission: {{ permission }}', {\n        userName,\n        permission,\n      });\n  }\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/Reaction/Reaction.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const defaultEmojiReactionMap = {
+    ':like:': '👍',
+    ':raise-hand:': '✋',
+    ':fireworks:': '🎉',
+    ':dislike:': '👎',
+    ':heart:': '❤️',
+    ':smile:': '😀',
+};
+const Reaction = ({ participant: { reaction, sessionId }, hideAfterTimeoutInMs = 5500, emojiReactionMap = defaultEmojiReactionMap, }) => {
+    const call = useCall();
+    useEffect(() => {
+        if (!call || !reaction)
+            return;
+        const timeoutId = setTimeout(() => {
+            call.resetReaction(sessionId);
+        }, hideAfterTimeoutInMs);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [call, hideAfterTimeoutInMs, reaction, sessionId]);
+    if (!reaction)
+        return null;
+    const { emoji_code: emojiCode } = reaction;
+    return (jsx("div", { className: "str-video__reaction", children: jsx("span", { className: "str-video__reaction__emoji", children: emojiCode && emojiReactionMap[emojiCode] }) }));
+};
+
+export { Reaction, defaultEmojiReactionMap };
+//# sourceMappingURL=Reaction.js.map

package/dist/esm/src/components/Reaction/Reaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reaction.js","sources":["../../../../../../../src/components/Reaction/Reaction.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { StreamVideoParticipant } from '@stream-io/video-client';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport type ReactionProps = {\n  participant: StreamVideoParticipant;\n  hideAfterTimeoutInMs?: number;\n  emojiReactionMap?: Record<string, string>;\n};\n\nexport const defaultEmojiReactionMap: Record<string, string> = {\n  ':like:': '👍',\n  ':raise-hand:': '✋',\n  ':fireworks:': '🎉',\n  ':dislike:': '👎',\n  ':heart:': '❤️',\n  ':smile:': '😀',\n};\n\nexport const Reaction = ({\n  participant: { reaction, sessionId },\n  hideAfterTimeoutInMs = 5500,\n  emojiReactionMap = defaultEmojiReactionMap,\n}: ReactionProps) => {\n  const call = useCall();\n\n  useEffect(() => {\n    if (!call || !reaction) return;\n\n    const timeoutId = setTimeout(() => {\n      call.resetReaction(sessionId);\n    }, hideAfterTimeoutInMs);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [call, hideAfterTimeoutInMs, reaction, sessionId]);\n\n  if (!reaction) return null;\n\n  const { emoji_code: emojiCode } = reaction;\n\n  return (\n    <div className=\"str-video__reaction\">\n      <span className=\"str-video__reaction__emoji\">\n        {emojiCode && emojiReactionMap[emojiCode]}\n      </span>\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;AAUO,MAAM,uBAAuB,GAA2B;AAC7D,IAAA,QAAQ,EAAE,IAAI;AACd,IAAA,cAAc,EAAE,GAAG;AACnB,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,SAAS,EAAE,IAAI;AACf,IAAA,SAAS,EAAE,IAAI;;MAGJ,QAAQ,GAAG,CAAC,EACvB,WAAW,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,EACpC,oBAAoB,GAAG,IAAI,EAC3B,gBAAgB,GAAG,uBAAuB,GAC5B,KAAI;AAClB,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IAEtB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ;YAAE;AAExB,QAAA,MAAM,SAAS,GAAG,UAAU,CAAC,MAAK;AAChC,YAAA,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;QAC/B,CAAC,EAAE,oBAAoB,CAAC;AAExB,QAAA,OAAO,MAAK;YACV,YAAY,CAAC,SAAS,CAAC;AACzB,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAErD,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,IAAI;AAE1B,IAAA,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ;IAE1C,QACEA,aAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAClCA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,YACzC,SAAS,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAA,CACpC,EAAA,CACH;AAEV;;;;"}

package/dist/esm/src/components/RingingCall/RingingCall.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CallingState } from '@stream-io/video-client';
+import { useCall, useI18n, useCallStateHooks, useConnectedUser } from '@stream-io/video-react-bindings';
+import { Avatar } from '../Avatar/Avatar.js';
+import { RingingCallControls } from './RingingCallControls.js';
+
+const CALLING_STATE_TO_LABEL = {
+    [CallingState.JOINING]: 'Joining',
+    [CallingState.RINGING]: 'Ringing',
+    [CallingState.MIGRATING]: 'Migrating',
+    [CallingState.RECONNECTING]: 'Re-connecting',
+    [CallingState.RECONNECTING_FAILED]: 'Failed',
+    [CallingState.OFFLINE]: 'No internet connection',
+    [CallingState.IDLE]: '',
+    [CallingState.UNKNOWN]: '',
+    [CallingState.JOINED]: 'Joined',
+    [CallingState.LEFT]: 'Left call',
+};
+const RingingCall = (props) => {
+    const { includeSelf = false, totalMembersToShow = 3 } = props;
+    const call = useCall();
+    const { t } = useI18n();
+    const { useCallCallingState, useCallMembers } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const members = useCallMembers();
+    const connectedUser = useConnectedUser();
+    if (!call)
+        return null;
+    // take the first N members to show their avatars
+    const membersToShow = (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,
+        // replace the first item in membersToShow array with the current user
+        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 (jsxs("div", { className: "str-video__call-panel str-video__call-panel--ringing", children: [jsx("div", { className: "str-video__call-panel__members-list", children: membersToShow.map((user) => (jsxs("div", { className: "str-video__call-panel__member-box", children: [jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (jsx("div", { className: "str-video__member_details", children: jsx("span", { className: "str-video__member_name", children: user.name }) }))] }, user.id))) }), callingStateLabel && (jsx("div", { className: "str-video__call-panel__calling-state-label", children: t(callingStateLabel) })), [CallingState.RINGING, CallingState.JOINING].includes(callingState) && (jsx(RingingCallControls, {}))] }));
+};
+
+export { RingingCall };
+//# sourceMappingURL=RingingCall.js.map

package/dist/esm/src/components/RingingCall/RingingCall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RingingCall.js","sources":["../../../../../../../src/components/RingingCall/RingingCall.tsx"],"sourcesContent":["import { CallingState, UserResponse } from '@stream-io/video-client';\nimport {\n  useCall,\n  useCallStateHooks,\n  useConnectedUser,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { Avatar } from '../Avatar';\nimport { RingingCallControls } from './RingingCallControls';\n\nconst CALLING_STATE_TO_LABEL: Record<CallingState, string> = {\n  [CallingState.JOINING]: 'Joining',\n  [CallingState.RINGING]: 'Ringing',\n  [CallingState.MIGRATING]: 'Migrating',\n  [CallingState.RECONNECTING]: 'Re-connecting',\n  [CallingState.RECONNECTING_FAILED]: 'Failed',\n  [CallingState.OFFLINE]: 'No internet connection',\n  [CallingState.IDLE]: '',\n  [CallingState.UNKNOWN]: '',\n  [CallingState.JOINED]: 'Joined',\n  [CallingState.LEFT]: 'Left call',\n};\n\nexport type RingingCallProps = {\n  /**\n   * Whether to include the current user in the list of members to show.\n   * @default false.\n   */\n  includeSelf?: boolean;\n\n  /**\n   * The maximum number of members to show.\n   * @default 3.\n   */\n  totalMembersToShow?: number;\n};\n\nexport const RingingCall = (props: RingingCallProps) => {\n  const { includeSelf = false, totalMembersToShow = 3 } = props;\n  const call = useCall();\n  const { t } = useI18n();\n  const { useCallCallingState, useCallMembers } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const members = useCallMembers();\n  const connectedUser = useConnectedUser();\n\n  if (!call) return null;\n\n  // take the first N members to show their avatars\n  const membersToShow: UserResponse[] = (members || [])\n    .slice(0, totalMembersToShow)\n    .map(({ user }) => user)\n    .filter((user) => user.id !== connectedUser?.id || includeSelf);\n  if (\n    includeSelf &&\n    !membersToShow.find((user) => user.id === connectedUser?.id)\n  ) {\n    // if the current user is not in the initial batch of members,\n    // replace the first item in membersToShow array with the current user\n    const self = members.find(({ user }) => user.id === connectedUser?.id);\n    if (self) {\n      membersToShow.splice(0, 1, self.user);\n    }\n  }\n\n  const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];\n\n  return (\n    <div className=\"str-video__call-panel str-video__call-panel--ringing\">\n      <div className=\"str-video__call-panel__members-list\">\n        {membersToShow.map((user) => (\n          <div key={user.id} className=\"str-video__call-panel__member-box\">\n            <Avatar name={user.name} imageSrc={user.image} />\n            {user.name && (\n              <div className=\"str-video__member_details\">\n                <span className=\"str-video__member_name\">{user.name}</span>\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {callingStateLabel && (\n        <div className=\"str-video__call-panel__calling-state-label\">\n          {t(callingStateLabel)}\n        </div>\n      )}\n\n      {[CallingState.RINGING, CallingState.JOINING].includes(callingState) && (\n        <RingingCallControls />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/RingingCall/RingingCallControls.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CallingState } from '@stream-io/video-client';
+import { AcceptCallButton } from '../CallControls/AcceptCallButton.js';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '@floating-ui/react';
+import '../CallControls/RecordCallButton.js';
+import '../CallControls/ReactionsButton.js';
+import '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import '../DeviceSettings/DeviceSettings.js';
+import '../DropdownSelect/DropdownSelect.js';
+import '../Menu/MenuToggle.js';
+import { CancelCallButton } from '../CallControls/CancelCallButton.js';
+import '../CallControls/CallStatsButton.js';
+
+const RingingCallControls = () => {
+    const call = useCall();
+    const { useCallCallingState } = useCallStateHooks();
+    const callCallingState = useCallCallingState();
+    if (!call)
+        return null;
+    const buttonsDisabled = callCallingState !== CallingState.RINGING;
+    return (jsx("div", { className: "str-video__pending-call-controls", children: call.isCreatedByMe ? (jsx(CancelCallButton, { disabled: buttonsDisabled })) : (jsxs(Fragment, { children: [jsx(AcceptCallButton, { disabled: buttonsDisabled }), jsx(CancelCallButton, { onClick: () => {
+                        const reason = call.isCreatedByMe ? 'cancel' : 'decline';
+                        call.leave({ reject: true, reason }).catch((err) => {
+                            console.error(`Failed to reject`, err);
+                        });
+                    }, disabled: buttonsDisabled })] })) }));
+};
+
+export { RingingCallControls };
+//# sourceMappingURL=RingingCallControls.js.map

package/dist/esm/src/components/RingingCall/RingingCallControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RingingCallControls.js","sources":["../../../../../../../src/components/RingingCall/RingingCallControls.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { AcceptCallButton, CancelCallButton } from '../CallControls';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport const RingingCallControls = () => {\n  const call = useCall();\n  const { useCallCallingState } = useCallStateHooks();\n  const callCallingState = useCallCallingState();\n\n  if (!call) return null;\n\n  const buttonsDisabled = callCallingState !== CallingState.RINGING;\n  return (\n    <div className=\"str-video__pending-call-controls\">\n      {call.isCreatedByMe ? (\n        <CancelCallButton disabled={buttonsDisabled} />\n      ) : (\n        <>\n          <AcceptCallButton disabled={buttonsDisabled} />\n          <CancelCallButton\n            onClick={() => {\n              const reason = call.isCreatedByMe ? 'cancel' : 'decline';\n              call.leave({ reject: true, reason }).catch((err) => {\n                console.error(`Failed to reject`, err);\n              });\n            }}\n            disabled={buttonsDisabled}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;AAIO,MAAM,mBAAmB,GAAG,MAAK;AACtC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,MAAM,eAAe,GAAG,gBAAgB,KAAK,YAAY,CAAC,OAAO;AACjE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAC9C,IAAI,CAAC,aAAa,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAC,QAAQ,EAAE,eAAe,EAAA,CAAI,KAE/CC,4BACED,GAAA,CAAC,gBAAgB,IAAC,QAAQ,EAAE,eAAe,EAAA,CAAI,EAC/CA,GAAA,CAAC,gBAAgB,IACf,OAAO,EAAE,MAAK;AACZ,wBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,SAAS;AACxD,wBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AACjD,4BAAA,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE,GAAG,CAAC;AACxC,wBAAA,CAAC,CAAC;oBACJ,CAAC,EACD,QAAQ,EAAE,eAAe,GACzB,CAAA,EAAA,CACD,CACJ,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/components/Search/SearchInput.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+
+const SearchInput = ({ exitSearch, isActive, ...rest }) => {
+    const [inputElement, setInputElement] = useState(null);
+    const onExitSearch = useEffectEvent(exitSearch);
+    useEffect(() => {
+        if (!inputElement)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key.toLowerCase() === 'escape')
+                onExitSearch();
+        };
+        inputElement.addEventListener('keydown', handleKeyDown);
+        return () => {
+            inputElement.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [inputElement]);
+    return (jsxs("div", { className: clsx('str-video__search-input__container', {
+            'str-video__search-input__container--active': isActive,
+        }), children: [jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsx("span", { className: "str-video__search-input__icon" }))] }));
+};
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map