@stream-io/video-react-sdk 1.41.0 → 2.0.0-beta.0

package/dist/esm/src/components/DeviceSettings/SpeakerTest.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
+
+/**
+ * SpeakerTest component that plays a test audio through the selected speaker.
+ * This allows users to verify their audio output device is working correctly.
+ */
+const SpeakerTest = (props) => {
+    const { useSpeakerState } = useCallStateHooks();
+    const { selectedDevice } = useSpeakerState();
+    const audioElementRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const { t } = useI18n();
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"2.0.0-beta.0"}/assets/piano.mp3`, } = props;
+    // Update audio output device when selection changes
+    useEffect(() => {
+        const audio = audioElementRef.current;
+        if (!audio || !selectedDevice)
+            return;
+        // Set the sinkId to route audio to the selected speaker
+        if ('setSinkId' in audio) {
+            audio.setSinkId(selectedDevice).catch((err) => {
+                console.error('Failed to set audio output device:', err);
+            });
+        }
+    }, [selectedDevice]);
+    const handleStartTest = useCallback(async () => {
+        const audio = audioElementRef.current;
+        if (!audio)
+            return;
+        audio.src = audioUrl;
+        try {
+            if (isPlaying) {
+                audio.pause();
+                audio.currentTime = 0;
+                setIsPlaying(false);
+            }
+            else {
+                await audio.play();
+                setIsPlaying(true);
+            }
+        }
+        catch (err) {
+            console.error('Failed to play test audio:', err);
+            setIsPlaying(false);
+        }
+    }, [isPlaying, audioUrl]);
+    const handleAudioEnded = useCallback(() => setIsPlaying(false), []);
+    return (jsxs("div", { className: "str-video__speaker-test", children: [jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
+};
+
+export { SpeakerTest };
+//# sourceMappingURL=SpeakerTest.js.map

package/dist/esm/src/components/DeviceSettings/SpeakerTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeakerTest.js","sources":["../../../../../../../src/components/DeviceSettings/SpeakerTest.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { CompositeButton } from '../Button';\nimport { Icon } from '../Icon';\n\n/**\n * SpeakerTest component that plays a test audio through the selected speaker.\n * This allows users to verify their audio output device is working correctly.\n */\nexport const SpeakerTest = (props: { audioUrl?: string }) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { selectedDevice } = useSpeakerState();\n  const audioElementRef = useRef<HTMLAudioElement | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const { t } = useI18n();\n\n  const {\n    audioUrl = `https://unpkg.com/${process.env.PKG_NAME}@${process.env.PKG_VERSION}/assets/piano.mp3`,\n  } = props;\n\n  // Update audio output device when selection changes\n  useEffect(() => {\n    const audio = audioElementRef.current;\n    if (!audio || !selectedDevice) return;\n\n    // Set the sinkId to route audio to the selected speaker\n    if ('setSinkId' in audio) {\n      audio.setSinkId(selectedDevice).catch((err) => {\n        console.error('Failed to set audio output device:', err);\n      });\n    }\n  }, [selectedDevice]);\n\n  const handleStartTest = useCallback(async () => {\n    const audio = audioElementRef.current;\n    if (!audio) return;\n\n    audio.src = audioUrl;\n\n    try {\n      if (isPlaying) {\n        audio.pause();\n        audio.currentTime = 0;\n        setIsPlaying(false);\n      } else {\n        await audio.play();\n        setIsPlaying(true);\n      }\n    } catch (err) {\n      console.error('Failed to play test audio:', err);\n      setIsPlaying(false);\n    }\n  }, [isPlaying, audioUrl]);\n\n  const handleAudioEnded = useCallback(() => setIsPlaying(false), []);\n  return (\n    <div className=\"str-video__speaker-test\">\n      <audio\n        ref={audioElementRef}\n        onEnded={handleAudioEnded}\n        onPause={handleAudioEnded}\n      />\n      <CompositeButton\n        className=\"str-video__speaker-test__button\"\n        onClick={handleStartTest}\n        type=\"button\"\n      >\n        <div className=\"str-video__speaker-test__button-content\">\n          <Icon icon=\"speaker\" />\n          {isPlaying ? t('Stop test') : t('Test speaker')}\n        </div>\n      </CompositeButton>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAKA;;;AAGG;AACI,MAAM,WAAW,GAAG,CAAC,KAA4B,KAAI;AAC1D,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE;AAC5C,IAAA,MAAM,eAAe,GAAG,MAAM,CAA0B,IAAI,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,MAAM,EACJ,QAAQ,GAAG,qBAAqB,4BAAoB,IAAI,cAAuB,mBAAmB,GACnG,GAAG,KAAK;;IAGT,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO;AACrC,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc;YAAE;;AAG/B,QAAA,IAAI,WAAW,IAAI,KAAK,EAAE;YACxB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AAC5C,gBAAA,OAAO,CAAC,KAAK,CAAC,oCAAoC,EAAE,GAAG,CAAC;AAC1D,YAAA,CAAC,CAAC;QACJ;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,YAAW;AAC7C,QAAA,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO;AACrC,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,KAAK,CAAC,GAAG,GAAG,QAAQ;AAEpB,QAAA,IAAI;YACF,IAAI,SAAS,EAAE;gBACb,KAAK,CAAC,KAAK,EAAE;AACb,gBAAA,KAAK,CAAC,WAAW,GAAG,CAAC;gBACrB,YAAY,CAAC,KAAK,CAAC;YACrB;iBAAO;AACL,gBAAA,MAAM,KAAK,CAAC,IAAI,EAAE;gBAClB,YAAY,CAAC,IAAI,CAAC;YACpB;QACF;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,GAAG,CAAC;YAChD,YAAY,CAAC,KAAK,CAAC;QACrB;AACF,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzB,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;AACnE,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACtCC,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EAAA,CACzB,EACFA,GAAA,CAAC,eAAe,EAAA,EACd,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,eAAe,EACxB,IAAI,EAAC,QAAQ,EAAA,QAAA,EAEbD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,aACtDC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAA,CAAG,EACtB,SAAS,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,CAAA,EAAA,CAC3C,EAAA,CACU,CAAA,EAAA,CACd;AAEV;;;;"}

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

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useRef, useCallback, useMemo } from 'react';
+import clsx from 'clsx';
+import { useListItem, useFloating, autoUpdate, flip, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList } from '@floating-ui/react';
+import { Icon } from '../Icon/Icon.js';
+
+const SelectContext = createContext({});
+const Select = (props) => {
+    const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
+    const [selectedLabel, setSelectedLabel] = useState(defaultSelectedLabel);
+    const { refs, context } = useFloating({
+        placement: 'bottom-start',
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [flip()],
+    });
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const handleSelect = useCallback((index) => {
+        setSelectedIndex(index);
+        handleSelectProp(index || 0);
+        setIsOpen(false);
+        if (index !== null) {
+            setSelectedLabel(labelsRef.current[index]);
+        }
+    }, [handleSelectProp]);
+    const handleTypeaheadMatch = (index) => {
+        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 (jsxs("div", { className: "str-video__dropdown", children: [jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), selectedLabel] }), jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsx(FloatingFocusManager, { context: context, modal: false, children: jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
+};
+const DropDownSelectOption = (props) => {
+    const { selected, label, icon } = props;
+    const { getItemProps, handleSelect } = useContext(SelectContext);
+    const { ref, index } = useListItem();
+    return (jsxs("div", { className: clsx('str-video__dropdown-option', {
+            'str-video__dropdown-option--selected': selected,
+        }), ref: ref, ...getItemProps({
+            onClick: () => handleSelect(index),
+        }), children: [icon && jsx(Icon, { className: "str-video__dropdown-icon", icon: icon }), jsx("span", { className: "str-video__dropdown-label", children: label })] }));
+};
+const DropDownSelect = (props) => {
+    const { children, icon, handleSelect, defaultSelectedLabel, defaultSelectedIndex, } = props;
+    return (jsx(Select, { icon: icon, handleSelect: handleSelect, defaultSelectedIndex: defaultSelectedIndex, defaultSelectedLabel: defaultSelectedLabel, children: children }));
+};
+
+export { DropDownSelect, DropDownSelectOption };
+//# sourceMappingURL=DropdownSelect.js.map

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

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

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

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const Icon = ({ className, icon }) => (jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`, className) }));
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nexport type IconProps = {\n  icon: string;\n  className?: string;\n};\n\nexport const Icon = ({ className, icon }: IconProps) => (\n  <span\n    className={clsx(\n      'str-video__icon',\n      icon && `str-video__icon--${icon}`,\n      className,\n    )}\n  />\n);\n"],"names":["_jsx"],"mappings":";;;AAOO,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAa,MACjDA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,iBAAiB,EACjB,IAAI,IAAI,CAAA,iBAAA,EAAoB,IAAI,CAAA,CAAE,EAClC,SAAS,CACV,EAAA,CACD;;;;"}

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

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
+    return (jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
+};
+
+export { LoadingIndicator };
+//# sourceMappingURL=LoadingIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.js","sources":["../../../../../../../src/components/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nexport type LoadingIndicatorProps = {\n  className?: string;\n  /** String will be injected into class and later used to apply as a CSS mask-image to an element as data URL */\n  type?: string;\n  /** Text to be displayed under the loading indicator icon */\n  text?: string;\n  /** Tooltip to be displayed on hover */\n  tooltip?: string;\n};\n\nexport const LoadingIndicator = ({\n  className,\n  type = 'spinner',\n  text,\n  tooltip,\n}: LoadingIndicatorProps) => {\n  return (\n    <div\n      className={clsx('str-video__loading-indicator', className)}\n      title={tooltip}\n    >\n      <div className={clsx('str-video__loading-indicator__icon', type)}></div>\n      {text && <p className=\"str-video__loading-indicator-text\">{text}</p>}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAYO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,IAAI,EACJ,OAAO,GACe,KAAI;AAC1B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAC1D,KAAK,EAAE,OAAO,EAAA,QAAA,EAAA,CAEdC,aAAK,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE,IAAI,CAAC,EAAA,CAAQ,EACvE,IAAI,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAE,IAAI,EAAA,CAAK,CAAA,EAAA,CAChE;AAEV;;;;"}

package/dist/esm/src/components/Menu/GenericMenu.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+
+const GenericMenu = ({ children, onItemClick, }) => {
+    const ref = useRef(null);
+    return (jsx("ul", { className: "str-video__generic-menu", ref: ref, onClick: (e) => {
+            if (onItemClick &&
+                e.target !== ref.current &&
+                ref.current?.contains(e.target)) {
+                onItemClick(e);
+            }
+        }, children: children }));
+};
+const GenericMenuButtonItem = ({ children, ...rest }) => {
+    return (jsx("li", { className: "str-video__generic-menu--item", children: jsx("button", { ...rest, children: children }) }));
+};
+
+export { GenericMenu, GenericMenuButtonItem };
+//# sourceMappingURL=GenericMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GenericMenu.js","sources":["../../../../../../../src/components/Menu/GenericMenu.tsx"],"sourcesContent":["import { ComponentProps, MouseEvent, PropsWithChildren, useRef } from 'react';\n\nexport const GenericMenu = ({\n  children,\n  onItemClick,\n}: PropsWithChildren<{\n  onItemClick?: (e: MouseEvent) => void;\n}>) => {\n  const ref = useRef<HTMLUListElement>(null);\n  return (\n    <ul\n      className=\"str-video__generic-menu\"\n      ref={ref}\n      onClick={(e) => {\n        if (\n          onItemClick &&\n          e.target !== ref.current &&\n          ref.current?.contains(e.target as Node)\n        ) {\n          onItemClick(e);\n        }\n      }}\n    >\n      {children}\n    </ul>\n  );\n};\n\nexport const GenericMenuButtonItem = ({\n  children,\n  ...rest\n}: Omit<ComponentProps<'button'>, 'ref'>) => {\n  return (\n    <li className=\"str-video__generic-menu--item\">\n      <button {...rest}>{children}</button>\n    </li>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAEO,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,WAAW,GAGX,KAAI;AACJ,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC;AAC1C,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,YAAA,IACE,WAAW;AACX,gBAAA,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO;gBACxB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EACvC;gBACA,WAAW,CAAC,CAAC,CAAC;YAChB;AACF,QAAA,CAAC,EAAA,QAAA,EAEA,QAAQ,EAAA,CACN;AAET;AAEO,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,GAAG,IAAI,EAC+B,KAAI;AAC1C,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAC3CA,GAAA,CAAA,QAAA,EAAA,EAAA,GAAY,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAU,EAAA,CAClC;AAET;;;;"}

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

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { FloatingOverlay, FloatingPortal } from '@floating-ui/react';
+import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+
+var MenuVisualType;
+(function (MenuVisualType) {
+    MenuVisualType["PORTAL"] = "portal";
+    MenuVisualType["MENU"] = "menu";
+})(MenuVisualType || (MenuVisualType = {}));
+/**
+ * Used to provide utility APIs to the components rendered inside the portal.
+ */
+const MenuContext = createContext({});
+/**
+ * Access to the closes MenuContext.
+ */
+const useMenuContext = () => {
+    return useContext(MenuContext);
+};
+const MenuPortal = ({ children, refs, }) => {
+    const [portalRoot, setPortalRoot] = useState(null);
+    return (jsxs(Fragment, { children: [jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsx(FloatingOverlay, { children: jsx(FloatingPortal, { root: portalRoot, children: jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
+};
+const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = MenuVisualType.MENU, children, onToggle, }) => {
+    const [menuShown, setMenuShown] = useState(false);
+    const toggleHandler = useRef(onToggle);
+    toggleHandler.current = onToggle;
+    const { floating, domReference, refs, x, y } = useFloatingUIPreset({
+        placement,
+        strategy,
+        offset,
+    });
+    useEffect(() => {
+        const parentDocument = domReference?.ownerDocument;
+        const handleClick = (event) => {
+            if (!floating && domReference?.contains(event.target)) {
+                setMenuShown(true);
+                toggleHandler.current?.(true);
+            }
+            else if (floating && !floating?.contains(event.target)) {
+                setMenuShown(false);
+                toggleHandler.current?.(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key && // key can be undefined in some browsers
+                event.key.toLowerCase() === 'escape' &&
+                !event.altKey &&
+                !event.ctrlKey) {
+                setMenuShown(false);
+                toggleHandler.current?.(false);
+            }
+        };
+        parentDocument?.addEventListener('click', handleClick, { capture: true });
+        parentDocument?.addEventListener('keydown', handleKeyDown);
+        return () => {
+            parentDocument?.removeEventListener('click', handleClick, {
+                capture: true,
+            });
+            parentDocument?.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [floating, domReference]);
+    return (jsxs(Fragment, { children: [menuShown && (jsx(MenuContext.Provider, { value: { close: () => setMenuShown(false) }, children: visualType === MenuVisualType.PORTAL ? (jsx(MenuPortal, { refs: refs, children: children })) : visualType === MenuVisualType.MENU ? (jsx("div", { className: "str-video__menu-container", ref: refs.setFloating, style: {
+                        position: strategy,
+                        top: y ?? 0,
+                        left: x ?? 0,
+                        overflowY: 'auto',
+                    }, role: "menu", children: children })) : null })), jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
+};
+
+export { MenuToggle, MenuVisualType, useMenuContext };
+//# sourceMappingURL=MenuToggle.js.map

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;;;;"}