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

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

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { createSoundDetector } from '@stream-io/video-client';
+import clsx from 'clsx';
+
+const LEVEL_BARS = 5;
+const DeviceLevelIndicator = ({ deviceId }) => {
+    const [audioLevel, setAudioLevel] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        let dispose;
+        navigator.mediaDevices
+            .getUserMedia({
+            audio: { deviceId: { exact: deviceId } },
+            video: false,
+        })
+            .then((mediaStream) => {
+            if (cancelled) {
+                mediaStream.getTracks().forEach((t) => t.stop());
+                return;
+            }
+            dispose = createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80 });
+        })
+            .catch(console.error);
+        return () => {
+            cancelled = true;
+            dispose?.().catch(console.error);
+        };
+    }, [deviceId]);
+    const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);
+    return (jsx("div", { className: "str-video__device-level-indicator", "aria-label": "Audio level", children: Array.from({ length: LEVEL_BARS }, (_, i) => (jsx("div", { className: clsx('str-video__device-level-indicator__bar', {
+                'str-video__device-level-indicator__bar--active': i < activeBars,
+            }) }, i))) }));
+};
+const DeviceAudioPreviewItem = ({ device, onSelect, }) => {
+    if (device.deviceId === 'default')
+        return null;
+    return (jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+};
+
+export { DeviceAudioPreviewItem };
+//# sourceMappingURL=DeviceAudioPreviewItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceAudioPreviewItem.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceAudioPreviewItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { createSoundDetector } from '@stream-io/video-client';\nimport clsx from 'clsx';\nimport { DeviceListItem } from '../../hooks';\n\nconst LEVEL_BARS = 5;\n\nconst DeviceLevelIndicator = ({ deviceId }: { deviceId: string }) => {\n  const [audioLevel, setAudioLevel] = useState(0);\n\n  useEffect(() => {\n    let cancelled = false;\n    let dispose: (() => Promise<void>) | undefined;\n\n    navigator.mediaDevices\n      .getUserMedia({\n        audio: { deviceId: { exact: deviceId } },\n        video: false,\n      })\n      .then((mediaStream) => {\n        if (cancelled) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n        dispose = createSoundDetector(\n          mediaStream,\n          ({ audioLevel: al }) => setAudioLevel(al),\n          { detectionFrequencyInMs: 80 },\n        );\n      })\n      .catch(console.error);\n\n    return () => {\n      cancelled = true;\n      dispose?.().catch(console.error);\n    };\n  }, [deviceId]);\n\n  const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);\n\n  return (\n    <div className=\"str-video__device-level-indicator\" aria-label=\"Audio level\">\n      {Array.from({ length: LEVEL_BARS }, (_, i) => (\n        <div\n          key={i}\n          className={clsx('str-video__device-level-indicator__bar', {\n            'str-video__device-level-indicator__bar--active': i < activeBars,\n          })}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type DeviceAudioPreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nexport const DeviceAudioPreviewItem = ({\n  device,\n  onSelect,\n}: DeviceAudioPreviewItemProps) => {\n  if (device.deviceId === 'default') return null;\n\n  return (\n    <label\n      className={`str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`}\n      htmlFor={`audioinput--${device.deviceId}`}\n    >\n      <input\n        type=\"radio\"\n        name=\"audioinput\"\n        value={device.deviceId}\n        id={`audioinput--${device.deviceId}`}\n        checked={device.isSelected}\n        onChange={(e) => onSelect(e.target.value)}\n      />\n      {device.label}\n      <DeviceLevelIndicator deviceId={device.deviceId} />\n    </label>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC;AAEpB,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,OAA0C;AAE9C,QAAA,SAAS,CAAC;AACP,aAAA,YAAY,CAAC;YACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;AACxC,YAAA,KAAK,EAAE,KAAK;SACb;AACA,aAAA,IAAI,CAAC,CAAC,WAAW,KAAI;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,WAAW,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChD;YACF;YACA,OAAO,GAAG,mBAAmB,CAC3B,WAAW,EACX,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,CAAC,EACzC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAC/B;AACH,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvB,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;YAChB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAClC,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,GAAG,IAAI,UAAU,CAAC;AAE9D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,YAAA,EAAY,aAAa,EAAA,QAAA,EACxE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MACvCA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,IAAI,CAAC,wCAAwC,EAAE;gBACxD,gDAAgD,EAAE,CAAC,GAAG,UAAU;AACjE,aAAA,CAAC,IAHG,CAAC,CAIN,CACH,CAAC,EAAA,CACE;AAEV,CAAC;AAOM,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,GACoB,KAAI;AAChC,IAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;AAE9C,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,kCAAA,EAAqC,MAAM,CAAC,UAAU,GAAG,+CAA+C,GAAG,EAAE,CAAA,CAAE,EAC1H,OAAO,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,aAEzCD,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,EAAE,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,EACpC,OAAO,EAAE,MAAM,CAAC,UAAU,EAC1B,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAA,CACzC,EACD,MAAM,CAAC,KAAK,EACbA,GAAA,CAAC,oBAAoB,EAAA,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC7C;AAEZ;;;;"}

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

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import '@floating-ui/react';
+import '@stream-io/video-react-bindings';
+import { useDeviceList } from '../../hooks/useDeviceList.js';
+import '@stream-io/video-client';
+import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect/DropdownSelect.js';
+import { useMenuContext } from '../Menu/MenuToggle.js';
+
+const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
+    return (jsxs("label", { className: clsx('str-video__device-settings__option', {
+            'str-video__device-settings__option--selected': selected,
+            'str-video__device-settings__option--disabled': disabled,
+        }), htmlFor: id, children: [jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+};
+const DeviceSelectorList = (props) => {
+    const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;
+    const { close } = useMenuContext();
+    const { deviceList } = useDeviceList(devices, selectedDeviceId);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => {
+                return (jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+                        const deviceId = e.target.value;
+                        if (deviceId !== 'default') {
+                            onChange?.(deviceId);
+                        }
+                        close?.();
+                    }, name: type, selected: device.isSelected }, device.deviceId));
+            }), children] }));
+};
+const DeviceSelectorPreview = (props) => {
+    const { devices = [], selectedDeviceId, title, onChange, children, PreviewItem, } = props;
+    const { close } = useMenuContext();
+    const { deviceList } = useDeviceList(devices, selectedDeviceId);
+    const onSelect = useCallback((deviceId) => {
+        if (deviceId === 'default')
+            return;
+        onChange?.(deviceId);
+        close?.();
+    }, [onChange, close]);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => (jsx(PreviewItem, { device: device, onSelect: onSelect }, device.deviceId))), children] }));
+};
+const DeviceSelectorDropdown = (props) => {
+    const { devices = [], selectedDeviceId, title, onChange, icon } = props;
+    const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(devices, selectedDeviceId);
+    const handleSelect = useCallback((index) => {
+        const deviceId = deviceList[index].deviceId;
+        if (deviceId !== 'default') {
+            onChange?.(deviceId);
+        }
+    }, [deviceList, onChange]);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: selectedDeviceInfo.label, handleSelect: handleSelect, children: deviceList.map((device) => (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.isSelected }, device.deviceId))) })] }));
+};
+const DeviceSelector = (props) => {
+    if (props.visualType === 'preview') {
+        const { PreviewItem, ...rest } = props;
+        return jsx(DeviceSelectorPreview, { ...rest, PreviewItem: PreviewItem });
+    }
+    const { visualType = 'list', icon, ...rest } = props;
+    if (visualType === 'list') {
+        return jsx(DeviceSelectorList, { ...rest });
+    }
+    return jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
+};
+
+export { DeviceSelector };
+//# sourceMappingURL=DeviceSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelector.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  PropsWithChildren,\n  useCallback,\n} from 'react';\n\nimport { DeviceListItem, useDeviceList } from '../../hooks';\nimport { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';\nimport { useMenuContext } from '../Menu';\n\ntype DeviceSelectorOptionProps = {\n  id: string;\n  label: string;\n  name?: string;\n  selected?: boolean;\n  value: string;\n  disabled?: boolean;\n  defaultChecked?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst DeviceSelectorOption = ({\n  disabled,\n  id,\n  label,\n  onChange,\n  name,\n  selected,\n  defaultChecked,\n  value,\n}: DeviceSelectorOptionProps) => {\n  return (\n    <label\n      className={clsx('str-video__device-settings__option', {\n        'str-video__device-settings__option--selected': selected,\n        'str-video__device-settings__option--disabled': disabled,\n      })}\n      htmlFor={id}\n    >\n      <input\n        type=\"radio\"\n        name={name}\n        onChange={onChange}\n        value={value}\n        id={id}\n        checked={selected}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n      />\n      {label}\n    </label>\n  );\n};\n\nexport type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';\n\nconst DeviceSelectorList = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    type,\n    onChange,\n    children,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => {\n        return (\n          <DeviceSelectorOption\n            id={`${type}--${device.deviceId}`}\n            value={device.deviceId}\n            label={device.label}\n            key={device.deviceId}\n            onChange={(e) => {\n              const deviceId = e.target.value;\n              if (deviceId !== 'default') {\n                onChange?.(deviceId);\n              }\n              close?.();\n            }}\n            name={type}\n            selected={device.isSelected}\n          />\n        );\n      })}\n      {children}\n    </div>\n  );\n};\n\nexport type PreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nconst DeviceSelectorPreview = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n    PreviewItem: ComponentType<PreviewItemProps>;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    onChange,\n    children,\n    PreviewItem,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  const onSelect = useCallback(\n    (deviceId: string) => {\n      if (deviceId === 'default') return;\n      onChange?.(deviceId);\n      close?.();\n    },\n    [onChange, close],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => (\n        <PreviewItem\n          key={device.deviceId}\n          device={device}\n          onSelect={onSelect}\n        />\n      ))}\n      {children}\n    </div>\n  );\n};\n\nconst DeviceSelectorDropdown = (props: {\n  devices: MediaDeviceInfo[];\n  selectedDeviceId?: string;\n  title?: string;\n  onChange?: (deviceId: string) => void;\n  icon: string;\n}) => {\n  const { devices = [], selectedDeviceId, title, onChange, icon } = props;\n  const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(\n    devices,\n    selectedDeviceId,\n  );\n\n  const handleSelect = useCallback(\n    (index: number) => {\n      const deviceId = deviceList[index].deviceId;\n      if (deviceId !== 'default') {\n        onChange?.(deviceId);\n      }\n    },\n    [deviceList, onChange],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      <div className=\"str-video__device-settings__device-selector-title\">\n        {title}\n      </div>\n      <DropDownSelect\n        icon={icon}\n        defaultSelectedIndex={selectedIndex}\n        defaultSelectedLabel={selectedDeviceInfo.label}\n        handleSelect={handleSelect}\n      >\n        {deviceList.map((device) => (\n          <DropDownSelectOption\n            key={device.deviceId}\n            icon={icon}\n            label={device.label}\n            selected={device.isSelected}\n          />\n        ))}\n      </DropDownSelect>\n    </div>\n  );\n};\n\nexport const DeviceSelector = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    icon: string;\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }> &\n    (\n      | { visualType?: 'list' | 'dropdown' }\n      | { visualType: 'preview'; PreviewItem: ComponentType<PreviewItemProps> }\n    ),\n) => {\n  if (props.visualType === 'preview') {\n    const { PreviewItem, ...rest } = props;\n    return <DeviceSelectorPreview {...rest} PreviewItem={PreviewItem} />;\n  }\n\n  const { visualType = 'list', icon, ...rest } = props;\n  if (visualType === 'list') {\n    return <DeviceSelectorList {...rest} />;\n  }\n  return <DeviceSelectorDropdown {...rest} icon={icon} />;\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem.js';
+import { DeviceSelector } from './DeviceSelector.js';
+import { AudioVolumeIndicator } from './AudioVolumeIndicator.js';
+import { SpeakerTest } from './SpeakerTest.js';
+
+const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { microphone, selectedDevice, devices } = useMicrophoneState();
+    return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
+            await microphone.select(deviceId);
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(AudioVolumeIndicator, {})] })) }));
+};
+const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
+    const { useSpeakerState } = useCallStateHooks();
+    const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
+    if (!isDeviceSelectionSupported)
+        return null;
+    return (jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
+            speaker.select(deviceId);
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
+};
+
+export { DeviceSelectorAudioInput, DeviceSelectorAudioOutput };
+//# sourceMappingURL=DeviceSelectorAudio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelectorAudio.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelectorAudio.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem';\nimport { DeviceSelector } from './DeviceSelector';\nimport { AudioVolumeIndicator } from './AudioVolumeIndicator';\nimport { SpeakerTest } from './SpeakerTest';\n\nexport type DeviceSelectorAudioInputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown' | 'preview';\n  volumeIndicatorVisible?: boolean;\n};\n\nexport const DeviceSelectorAudioInput = ({\n  title,\n  visualType,\n  volumeIndicatorVisible = true,\n}: DeviceSelectorAudioInputProps) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { microphone, selectedDevice, devices } = useMicrophoneState();\n\n  return (\n    <DeviceSelector\n      devices={devices || []}\n      selectedDeviceId={selectedDevice}\n      type=\"audioinput\"\n      onChange={async (deviceId) => {\n        await microphone.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"mic\"\n      PreviewItem={DeviceAudioPreviewItem}\n    >\n      {volumeIndicatorVisible && (\n        <>\n          <hr className=\"str-video__device-settings__separator\" />\n          <AudioVolumeIndicator />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n\nexport type DeviceSelectorAudioOutputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown';\n  speakerTestVisible?: boolean;\n  speakerTestAudioUrl?: string;\n};\n\nexport const DeviceSelectorAudioOutput = ({\n  title,\n  visualType,\n  speakerTestVisible = true,\n  speakerTestAudioUrl,\n}: DeviceSelectorAudioOutputProps) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =\n    useSpeakerState();\n\n  if (!isDeviceSelectionSupported) return null;\n\n  return (\n    <DeviceSelector\n      devices={devices}\n      type=\"audiooutput\"\n      selectedDeviceId={selectedDevice}\n      onChange={(deviceId) => {\n        speaker.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"speaker\"\n    >\n      {speakerTestVisible && (\n        <>\n          <hr className=\"str-video__device-settings__separator\" />\n          <SpeakerTest audioUrl={speakerTestAudioUrl} />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAYO,MAAM,wBAAwB,GAAG,CAAC,EACvC,KAAK,EACL,UAAU,EACV,sBAAsB,GAAG,IAAI,GACC,KAAI;AAClC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;IAEpE,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,gBAAgB,EAAE,cAAc,EAChC,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,OAAO,QAAQ,KAAI;AAC3B,YAAA,MAAM,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC;AACnC,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,sBAAsB,EAAA,QAAA,EAElC,sBAAsB,KACrBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,EACxDA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG,CAAA,EAAA,CACvB,CACJ,EAAA,CACc;AAErB;AASO,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,EACL,UAAU,EACV,kBAAkB,GAAG,IAAI,EACzB,mBAAmB,GACY,KAAI;AACnC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,0BAA0B,EAAE,GACpE,eAAe,EAAE;AAEnB,IAAA,IAAI,CAAC,0BAA0B;AAAE,QAAA,OAAO,IAAI;IAE5C,QACEA,IAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,CAAC,QAAQ,KAAI;AACrB,YAAA,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC1B,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,SAAS,EAAA,QAAA,EAEb,kBAAkB,KACjBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,EACxDA,IAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,mBAAmB,EAAA,CAAI,CAAA,EAAA,CAC7C,CACJ,EAAA,CACc;AAErB;;;;"}

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { DeviceSelector } from './DeviceSelector.js';
+import { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem.js';
+
+const DeviceSelectorVideo = ({ title, visualType, }) => {
+    const { useCameraState } = useCallStateHooks();
+    const { camera, devices, selectedDevice } = useCameraState();
+    return (jsx(DeviceSelector, { devices: devices || [], type: "videoinput", selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+            await camera.select(deviceId);
+        }, title: title, visualType: visualType, icon: "camera", PreviewItem: DeviceVideoPreviewItem }));
+};
+
+export { DeviceSelectorVideo };
+//# sourceMappingURL=DeviceSelectorVideo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelectorVideo.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelectorVideo.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { DeviceSelector } from './DeviceSelector';\nimport { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem';\n\nexport type DeviceSelectorVideoProps = {\n  title?: string;\n  /**\n   * The visual style used to render the device selector.\n   *\n   * Note: `'preview'` is not reliable on mobile browsers. Use `'list'` or\n   * `'dropdown'` on mobile devices.\n   */\n  visualType?: 'list' | 'dropdown' | 'preview';\n};\n\nexport const DeviceSelectorVideo = ({\n  title,\n  visualType,\n}: DeviceSelectorVideoProps) => {\n  const { useCameraState } = useCallStateHooks();\n  const { camera, devices, selectedDevice } = useCameraState();\n\n  return (\n    <DeviceSelector\n      devices={devices || []}\n      type=\"videoinput\"\n      selectedDeviceId={selectedDevice}\n      onChange={async (deviceId) => {\n        await camera.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"camera\"\n      PreviewItem={DeviceVideoPreviewItem}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAgBO,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,UAAU,GACe,KAAI;AAC7B,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;IAC9C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE;IAE5D,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,IAAI,EAAC,YAAY,EACjB,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,OAAO,QAAQ,KAAI;AAC3B,YAAA,MAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC/B,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,sBAAsB,EAAA,CACnC;AAEN;;;;"}

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { MenuToggle, MenuVisualType } from '../Menu/MenuToggle.js';
+import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from './DeviceSelectorAudio.js';
+import { DeviceSelectorVideo } from './DeviceSelectorVideo.js';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+
+const DeviceSettings = ({ visualType = MenuVisualType.MENU, }) => {
+    return (jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleDeviceSettingsMenuButton, visualType: visualType, children: jsx(Menu, {}) }));
+};
+const Menu = () => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, { title: t('Select a Camera') }), jsx(DeviceSelectorAudioInput, { title: t('Select a Mic') }), jsx(DeviceSelectorAudioOutput, { title: t('Select Speakers') })] }));
+};
+const ToggleDeviceSettingsMenuButton = forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
+    const { t } = useI18n();
+    return (jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+            'str-video__device-settings__button--active': menuShown,
+        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+});
+
+export { DeviceSettings };
+//# sourceMappingURL=DeviceSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSettings.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSettings.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n} from './DeviceSelectorAudio';\nimport { DeviceSelectorVideo } from './DeviceSelectorVideo';\nimport { IconButton } from '../Button';\n\nexport type DeviceSettingsProps = {\n  visualType?: MenuVisualType;\n};\n\nexport const DeviceSettings = ({\n  visualType = MenuVisualType.MENU,\n}: DeviceSettingsProps) => {\n  return (\n    <MenuToggle\n      placement=\"bottom-end\"\n      ToggleButton={ToggleDeviceSettingsMenuButton}\n      visualType={visualType}\n    >\n      <Menu />\n    </MenuToggle>\n  );\n};\n\nconst Menu = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__device-settings\">\n      <DeviceSelectorVideo title={t('Select a Camera')} />\n      <DeviceSelectorAudioInput title={t('Select a Mic')} />\n      <DeviceSelectorAudioOutput title={t('Select Speakers')} />\n    </div>\n  );\n};\n\nconst ToggleDeviceSettingsMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <IconButton\n      className={clsx('str-video__device-settings__button', {\n        'str-video__device-settings__button--active': menuShown,\n      })}\n      title={t('Toggle device menu')}\n      icon=\"device-settings\"\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAeO,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,GACZ,KAAI;IACxB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,YAAY,EACtB,YAAY,EAAE,8BAA8B,EAC5C,UAAU,EAAE,UAAU,EAAA,QAAA,EAEtBA,IAAC,IAAI,EAAA,EAAA,CAAG,EAAA,CACG;AAEjB;AAEA,MAAM,IAAI,GAAG,MAAK;AAChB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCD,IAAC,mBAAmB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAI,EACpDA,IAAC,wBAAwB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EAAA,CAAI,EACtDA,IAAC,yBAAyB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAI,CAAA,EAAA,CACtD;AAEV,CAAC;AAED,MAAM,8BAA8B,GAAG,UAAU,CAG/C,SAAS,oCAAoC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,SAAS;AACxD,SAAA,CAAC,EACF,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAC9B,IAAI,EAAC,iBAAiB,EACtB,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}

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

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+
+const DeviceVideoPreview = ({ deviceId }) => {
+    const videoRef = useRef(null);
+    useEffect(() => {
+        let cancelled = false;
+        let stream;
+        navigator.mediaDevices
+            .getUserMedia({
+            video: { deviceId: { exact: deviceId } },
+            audio: false,
+        })
+            .then((mediaStream) => {
+            if (cancelled) {
+                mediaStream.getTracks().forEach((t) => t.stop());
+                return;
+            }
+            stream = mediaStream;
+            if (videoRef.current) {
+                videoRef.current.srcObject = mediaStream;
+            }
+        })
+            .catch(console.error);
+        return () => {
+            cancelled = true;
+            stream?.getTracks().forEach((t) => t.stop());
+        };
+    }, [deviceId]);
+    return (jsx("div", { className: "str-video__device-video-preview", children: jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "str-video__device-video-preview__video" }) }));
+};
+const DeviceVideoPreviewItem = ({ device, onSelect, }) => {
+    if (device.deviceId === 'default')
+        return null;
+    return (jsxs("button", { type: "button", className: clsx('str-video__device-preview', {
+            'str-video__device-preview--selected': device.isSelected,
+        }), onClick: () => onSelect(device.deviceId), "aria-pressed": device.isSelected, children: [jsx(DeviceVideoPreview, { deviceId: device.deviceId }), jsx("span", { className: "str-video__device-preview__label", children: device.label })] }));
+};
+
+export { DeviceVideoPreviewItem };
+//# sourceMappingURL=DeviceVideoPreviewItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceVideoPreviewItem.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceVideoPreviewItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { DeviceListItem } from '../../hooks';\n\nconst DeviceVideoPreview = ({ deviceId }: { deviceId: string }) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    let stream: MediaStream | undefined;\n\n    navigator.mediaDevices\n      .getUserMedia({\n        video: { deviceId: { exact: deviceId } },\n        audio: false,\n      })\n      .then((mediaStream) => {\n        if (cancelled) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n\n        stream = mediaStream;\n        if (videoRef.current) {\n          videoRef.current.srcObject = mediaStream;\n        }\n      })\n      .catch(console.error);\n\n    return () => {\n      cancelled = true;\n      stream?.getTracks().forEach((t) => t.stop());\n    };\n  }, [deviceId]);\n\n  return (\n    <div className=\"str-video__device-video-preview\">\n      <video\n        ref={videoRef}\n        autoPlay\n        playsInline\n        muted\n        className=\"str-video__device-video-preview__video\"\n      />\n    </div>\n  );\n};\n\nexport type DeviceVideoPreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nexport const DeviceVideoPreviewItem = ({\n  device,\n  onSelect,\n}: DeviceVideoPreviewItemProps) => {\n  if (device.deviceId === 'default') return null;\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx('str-video__device-preview', {\n        'str-video__device-preview--selected': device.isSelected,\n      })}\n      onClick={() => onSelect(device.deviceId)}\n      aria-pressed={device.isSelected}\n    >\n      <DeviceVideoPreview deviceId={device.deviceId} />\n      <span className=\"str-video__device-preview__label\">{device.label}</span>\n    </button>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAIA,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AAChE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,MAA+B;AAEnC,QAAA,SAAS,CAAC;AACP,aAAA,YAAY,CAAC;YACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;AACxC,YAAA,KAAK,EAAE,KAAK;SACb;AACA,aAAA,IAAI,CAAC,CAAC,WAAW,KAAI;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,WAAW,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChD;YACF;YAEA,MAAM,GAAG,WAAW;AACpB,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;YAC1C;AACF,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvB,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;AAChB,YAAA,MAAM,EAAE,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AAC9C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,QACEA,aAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC9CA,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAA,IAAA,EACR,WAAW,EAAA,IAAA,EACX,KAAK,EAAA,IAAA,EACL,SAAS,EAAC,wCAAwC,EAAA,CAClD,EAAA,CACE;AAEV,CAAC;AAOM,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,GACoB,KAAI;AAChC,IAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;IAE9C,QACEC,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE;YAC3C,qCAAqC,EAAE,MAAM,CAAC,UAAU;AACzD,SAAA,CAAC,EACF,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAA,cAAA,EAC1B,MAAM,CAAC,UAAU,aAE/BD,GAAA,CAAC,kBAAkB,EAAA,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,EACjDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,YAAE,MAAM,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CACjE;AAEb;;;;"}

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"}@${"1.42.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,QAAuB,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