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

package/dist/esm/src/components/CallControls/ToggleAudioOutputButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleAudioOutputButton.js","sources":["../../../../../../../src/components/CallControls/ToggleAudioOutputButton.tsx"],"sourcesContent":["import { CompositeButton, IconButtonWithMenuProps } from '../Button';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../Icon';\nimport { DeviceSelectorAudioOutput } from '../DeviceSettings';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\n\nexport type ToggleAudioOutputButtonProps = Pick<\n  IconButtonWithMenuProps,\n  'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n>;\n\nexport const ToggleAudioOutputButton = (\n  props: ToggleAudioOutputButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = DeviceSelectorAudioOutput,\n    menuPlacement = 'top',\n    onMenuToggle,\n  } = props;\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n\n  return (\n    <WithTooltip\n      title={caption || t('Speakers')}\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        caption={caption}\n        data-testid=\"audio-output-button\"\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon=\"speaker\" />\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAYO,MAAM,uBAAuB,GAAG,CACrC,KAAmC,KACjC;AACF,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EACJ,OAAO,EACP,IAAI,GAAG,yBAAyB,EAChC,aAAa,GAAG,KAAK,EACrB,YAAY,GACb,GAAG,KAAK;IACT,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE7D,IAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,UAAU,CAAC,EAC/B,eAAe,EAAE,eAAe,YAEhCA,GAAA,CAAC,eAAe,EAAA,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,qBAAqB,EACjC,YAAY,EAAE,CAAC,KAAK,KAAI;gBACtB,kBAAkB,CAAC,KAAK,CAAC;AACzB,gBAAA,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAA,CAAG,EAAA,CACP,EAAA,CACN;AAElB;;;;"}

package/dist/esm/src/components/CallControls/ToggleVideoButton.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { SfuModels, RequestPermissionRequestPermissionsEnum, OwnCapability } from '@stream-io/video-client';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { useState } from 'react';
+import { Icon } from '../Icon/Icon.js';
+import '../DeviceSettings/DeviceSettings.js';
+import '@floating-ui/react';
+import { useRequestPermission } from '../../hooks/useRequestPermission.js';
+import '../DropdownSelect/DropdownSelect.js';
+import '../Menu/MenuToggle.js';
+import { DeviceSelectorVideo } from '../DeviceSettings/DeviceSelectorVideo.js';
+import { PermissionNotification } from '../Notification/PermissionNotification.js';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+import { createCallControlHandler } from '../../utilities/callControlHandler.js';
+
+const ToggleVideoPreviewButton = (props) => {
+    const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { t } = useI18n();
+    const { useCameraState, useLocalParticipant } = useCallStateHooks();
+    const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.VIDEO);
+    const [tooltipDisabled, setTooltipDisabled] = useState(false);
+    const handleClick = createCallControlHandler(props, () => camera.toggle());
+    return (jsx(WithTooltip, { title: !hasBrowserPermission
+            ? t('Check your browser video permissions')
+            : isSystemMuted
+                ? t('Camera is paused by your system')
+                : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+                ? 'preview-video-unmute-button'
+                : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                setTooltipDisabled(shown);
+                onMenuToggle?.(shown);
+            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
+};
+const ToggleVideoPublishingButton = (props) => {
+    const { t } = useI18n();
+    const { caption, Menu = jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_VIDEO);
+    const { useCameraState, useCallSettings, useLocalParticipant } = useCallStateHooks();
+    const { camera, optionsAwareIsMute, hasBrowserPermission, isPromptingPermission, isTogglePending, } = useCameraState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.VIDEO);
+    const callSettings = useCallSettings();
+    const isPublishingVideoAllowed = callSettings?.video.enabled;
+    const [tooltipDisabled, setTooltipDisabled] = useState(false);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await camera.toggle();
+        }
+    });
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(PermissionNotification, { permission: OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsx(WithTooltip, { title: !hasPermission
+                    ? t('You have no permission to share your video')
+                    : !hasBrowserPermission
+                        ? t('Check your browser video permissions')
+                        : !isPublishingVideoAllowed
+                            ? t('Video publishing is disabled by the system')
+                            : isSystemMuted
+                                ? t('Camera is paused by your system')
+                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        !hasPermission ||
+                        !isPublishingVideoAllowed ||
+                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                        setTooltipDisabled(shown);
+                        onMenuToggle?.(shown);
+                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                            !hasPermission ||
+                            !isPublishingVideoAllowed) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
+                            hasBrowserPermission &&
+                            hasPermission &&
+                            isPublishingVideoAllowed && (jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
+};
+
+export { ToggleVideoPreviewButton, ToggleVideoPublishingButton };
+//# sourceMappingURL=ToggleVideoButton.js.map

package/dist/esm/src/components/CallControls/ToggleVideoButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleVideoButton.js","sources":["../../../../../../../src/components/CallControls/ToggleVideoButton.tsx"],"sourcesContent":["import {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n  UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n  SfuModels,\n} from '@stream-io/video-client';\nimport { CompositeButton, IconButtonWithMenuProps } from '../Button/';\nimport { DeviceSelectorVideo } from '../DeviceSettings';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleVideoPreviewButton = (\n  props: ToggleVideoPreviewButtonProps,\n) => {\n  const {\n    caption,\n    Menu = DeviceSelectorVideo,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n  const { t } = useI18n();\n  const { useCameraState, useLocalParticipant } = useCallStateHooks();\n  const {\n    camera,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n    optionsAwareIsMute,\n  } = useCameraState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.VIDEO,\n  );\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, () => camera.toggle());\n\n  return (\n    <WithTooltip\n      title={\n        !hasBrowserPermission\n          ? t('Check your browser video permissions')\n          : isSystemMuted\n            ? t('Camera is paused by your system')\n            : (caption ?? t('Video'))\n      }\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        active={optionsAwareIsMute}\n        caption={caption}\n        className={clsx(\n          !hasBrowserPermission && 'str-video__device-unavailable',\n        )}\n        variant=\"secondary\"\n        data-testid={\n          optionsAwareIsMute\n            ? 'preview-video-unmute-button'\n            : 'preview-video-mute-button'\n        }\n        onClick={handleClick}\n        disabled={\n          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)\n        }\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        {...restCompositeButtonProps}\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />\n        {!hasBrowserPermission && (\n          <span\n            className=\"str-video__no-media-permission\"\n            title={t('Check your browser video permissions')}\n            children=\"!\"\n          />\n        )}\n        {isPromptingPermission && (\n          <span\n            className=\"str-video__pending-permission\"\n            title={t('Waiting for permission')}\n            children=\"?\"\n          />\n        )}\n        {isSystemMuted && hasBrowserPermission && (\n          <span\n            className=\"str-video__system-muted\"\n            title={t('Camera is paused by your system')}\n            children=\"!\"\n          />\n        )}\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n\ntype ToggleVideoPublishingButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleVideoPublishingButton = (\n  props: ToggleVideoPublishingButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = <DeviceSelectorVideo visualType=\"list\" />,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_VIDEO);\n\n  const { useCameraState, useCallSettings, useLocalParticipant } =\n    useCallStateHooks();\n  const {\n    camera,\n    optionsAwareIsMute,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n  } = useCameraState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.VIDEO,\n  );\n  const callSettings = useCallSettings();\n  const isPublishingVideoAllowed = callSettings?.video.enabled;\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await camera.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>\n      <PermissionNotification\n        permission={OwnCapability.SEND_VIDEO}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t('You can now share your video.')}\n        messageAwaitingApproval={t(\n          'Awaiting for an approval to share your video.',\n        )}\n        messageRevoked={t('You can no longer share your video.')}\n      >\n        <WithTooltip\n          title={\n            !hasPermission\n              ? t('You have no permission to share your video')\n              : !hasBrowserPermission\n                ? t('Check your browser video permissions')\n                : !isPublishingVideoAllowed\n                  ? t('Video publishing is disabled by the system')\n                  : isSystemMuted\n                    ? t('Camera is paused by your system')\n                    : caption || t('Video')\n          }\n          tooltipDisabled={tooltipDisabled}\n        >\n          <CompositeButton\n            active={optionsAwareIsMute}\n            caption={caption}\n            variant=\"secondary\"\n            disabled={\n              !hasBrowserPermission ||\n              !hasPermission ||\n              !isPublishingVideoAllowed ||\n              (!optimisticUpdates && isTogglePending)\n            }\n            data-testid={\n              optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button'\n            }\n            onClick={handleClick}\n            Menu={Menu}\n            menuPlacement={menuPlacement}\n            menuOffset={16}\n            {...restCompositeButtonProps}\n            onMenuToggle={(shown) => {\n              setTooltipDisabled(shown);\n              onMenuToggle?.(shown);\n            }}\n          >\n            <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />\n            {(!hasBrowserPermission ||\n              !hasPermission ||\n              !isPublishingVideoAllowed) && (\n              <span className=\"str-video__no-media-permission\">!</span>\n            )}\n            {isPromptingPermission && (\n              <span\n                className=\"str-video__pending-permission\"\n                title={t('Waiting for permission')}\n              >\n                ?\n              </span>\n            )}\n            {isSystemMuted &&\n              hasBrowserPermission &&\n              hasPermission &&\n              isPublishingVideoAllowed && (\n                <span\n                  className=\"str-video__system-muted\"\n                  title={t('Camera is paused by your system')}\n                >\n                  !\n                </span>\n              )}\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/components/CallParticipantsList/BlockedUserListing.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useCall, Restricted } from '@stream-io/video-react-bindings';
+import { OwnCapability } from '@stream-io/video-client';
+import '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { TextButton } from '../Button/TextButton.js';
+
+const BlockedUserListing = ({ data }) => {
+    if (!data.length)
+        return null;
+    return (jsx(Fragment, { children: jsx("div", { className: "str-video__participant-listing", children: data.map((userId) => (jsx(BlockedUserListingItem, { userId: userId }, userId))) }) }));
+};
+const BlockedUserListingItem = ({ userId }) => {
+    const call = useCall();
+    const unblockUserClickHandler = () => {
+        if (userId)
+            call?.unblockUser(userId);
+    };
+    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsx(TextButton, { onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
+};
+
+export { BlockedUserListing };
+//# sourceMappingURL=BlockedUserListing.js.map

package/dist/esm/src/components/CallParticipantsList/BlockedUserListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockedUserListing.js","sources":["../../../../../../../src/components/CallParticipantsList/BlockedUserListing.tsx"],"sourcesContent":["import { Restricted, useCall } from '@stream-io/video-react-bindings';\nimport { OwnCapability } from '@stream-io/video-client';\n\nimport { TextButton } from '../Button';\n\nexport const BlockedUserListing = ({ data }: { data: string[] }) => {\n  if (!data.length) return null;\n\n  return (\n    <>\n      <div className=\"str-video__participant-listing\">\n        {data.map((userId) => (\n          <BlockedUserListingItem key={userId} userId={userId} />\n        ))}\n      </div>\n    </>\n  );\n};\n\nconst BlockedUserListingItem = ({ userId }: { userId: string }) => {\n  const call = useCall();\n\n  const unblockUserClickHandler = () => {\n    if (userId) call?.unblockUser(userId);\n  };\n\n  return (\n    <div className=\"str-video__participant-listing-item\">\n      <div className=\"str-video__participant-listing-item__display-name\">\n        {userId}\n      </div>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <TextButton onClick={unblockUserClickHandler}>Unblock</TextButton>\n      </Restricted>\n    </div>\n  );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;;;;;;MAKa,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAsB,KAAI;IACjE,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,QACEA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACED,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAC5C,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,MACfA,GAAA,CAAC,sBAAsB,EAAA,EAAc,MAAM,EAAE,MAAM,EAAA,EAAtB,MAAM,CAAoB,CACxD,CAAC,EAAA,CACE,EAAA,CACL;AAEP;AAEA,MAAM,sBAAsB,GAAG,CAAC,EAAE,MAAM,EAAsB,KAAI;AAChE,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IAEtB,MAAM,uBAAuB,GAAG,MAAK;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC;AACvC,IAAA,CAAC;AAED,IAAA,QACEE,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAA,CAClDF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAC/D,MAAM,EAAA,CACH,EACNA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,YACrDA,GAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,uBAAuB,EAAA,QAAA,EAAA,SAAA,EAAA,CAAsB,EAAA,CACvD,CAAA,EAAA,CACT;AAEV,CAAC;;;;"}

package/dist/esm/src/components/CallParticipantsList/CallParticipantListHeader.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+
+const CallParticipantListHeader = ({ onClose, }) => {
+    const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();
+    const participants = useParticipants();
+    const anonymousParticipantCount = useAnonymousParticipantCount();
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
+};
+
+export { CallParticipantListHeader };
+//# sourceMappingURL=CallParticipantListHeader.js.map

package/dist/esm/src/components/CallParticipantsList/CallParticipantListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantListHeader.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListHeader.tsx"],"sourcesContent":["import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\n\nimport { IconButton } from '../Button';\n\nexport type CallParticipantListHeaderProps = {\n  /**\n   * Click event listener function to be invoked to dismiss / hide the CallParticipantsList from the UI.\n   */\n  onClose: () => void;\n};\n\nexport const CallParticipantListHeader = ({\n  onClose,\n}: CallParticipantListHeaderProps) => {\n  const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();\n  const participants = useParticipants();\n  const anonymousParticipantCount = useAnonymousParticipantCount();\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__participant-list-header\">\n      <div className=\"str-video__participant-list-header__title\">\n        {t('Participants')}{' '}\n        <span className=\"str-video__participant-list-header__title-count\">\n          [{participants.length}]\n        </span>\n        {anonymousParticipantCount > 0 && (\n          <span className=\"str-video__participant-list-header__title-anonymous\">\n            {t('Anonymous', { count: anonymousParticipantCount })}\n          </span>\n        )}\n      </div>\n      <IconButton\n        onClick={onClose}\n        className=\"str-video__participant-list-header__close-button\"\n        icon=\"close\"\n      />\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;MAWa,yBAAyB,GAAG,CAAC,EACxC,OAAO,GACwB,KAAI;IACnC,MAAM,EAAE,eAAe,EAAE,4BAA4B,EAAE,GAAG,iBAAiB,EAAE;AAC7E,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,yBAAyB,GAAG,4BAA4B,EAAE;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,CACjDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACvD,CAAC,CAAC,cAAc,CAAC,EAAE,GAAG,EACvBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iDAAiD,kBAC7D,YAAY,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAChB,EACN,yBAAyB,GAAG,CAAC,KAC5BC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,CAAC,EAAA,CAChD,CACR,CAAA,EAAA,CACG,EACNA,GAAA,CAAC,UAAU,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kDAAkD,EAC5D,IAAI,EAAC,OAAO,EAAA,CACZ,CAAA,EAAA,CACE;AAEV;;;;"}

package/dist/esm/src/components/CallParticipantsList/CallParticipantListing.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import { CallParticipantListingItem } from './CallParticipantListingItem.js';
+
+const CallParticipantListing = ({ data, }) => (jsx("div", { className: "str-video__participant-listing", children: data.map((participant) => (jsx(CallParticipantListingItem, { participant: participant }, participant.sessionId))) }));
+
+export { CallParticipantListing };
+//# sourceMappingURL=CallParticipantListing.js.map

package/dist/esm/src/components/CallParticipantsList/CallParticipantListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantListing.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListing.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport { StreamVideoParticipant } from '@stream-io/video-client';\nimport { CallParticipantListingItem } from './CallParticipantListingItem';\n\nexport type CallParticipantListingProps = {\n  /** Array of participant objects to be rendered */\n  data: StreamVideoParticipant[];\n  Header?: ComponentType;\n};\n\nexport const CallParticipantListing = ({\n  data,\n}: CallParticipantListingProps) => (\n  <div className=\"str-video__participant-listing\">\n    {data.map((participant) => (\n      <CallParticipantListingItem\n        key={participant.sessionId}\n        participant={participant}\n      />\n    ))}\n  </div>\n);\n"],"names":["_jsx"],"mappings":";;;AAUO,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,GACwB,MAC5BA,aAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAC5C,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,MACpBA,GAAA,CAAC,0BAA0B,IAEzB,WAAW,EAAE,WAAW,EAAA,EADnB,WAAW,CAAC,SAAS,CAE1B,CACH,CAAC,EAAA,CACE;;;;"}

package/dist/esm/src/components/CallParticipantsList/CallParticipantListingItem.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { memo, forwardRef } from 'react';
+import { useI18n, useConnectedUser } from '@stream-io/video-react-bindings';
+import { hasAudio, hasVideo, isPinned } from '@stream-io/video-client';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+import { MenuToggle } from '../Menu/MenuToggle.js';
+import '@floating-ui/react';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { ParticipantActionsContextMenu } from '../../core/components/ParticipantView/ParticipantActionsContextMenu.js';
+import { ParticipantViewContext } from '../../core/components/ParticipantView/ParticipantViewContext.js';
+
+const CallParticipantListingItem = memo(function CallParticipantListingItemRender({ participant, DisplayName = DefaultDisplayName, }) {
+    const isAudioOn = hasAudio(participant);
+    const isVideoOn = hasVideo(participant);
+    const isPinnedOn = isPinned(participant);
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsx(DisplayName, { participant: participant }), jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton, children: jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+});
+CallParticipantListingItem.displayName = 'CallParticipantListingItem';
+const MediaIndicator = (props) => (jsx(WithTooltip, { ...props }));
+const DefaultDisplayName = ({ participant }) => {
+    const connectedUser = useConnectedUser();
+    const { t } = useI18n();
+    const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
+    const nameOrId = participant.name || participant.userId || t('Unknown');
+    let displayName;
+    if (!participant.name) {
+        displayName = meFlag || nameOrId || t('Unknown');
+    }
+    else if (meFlag) {
+        displayName = `${nameOrId} (${meFlag})`;
+    }
+    else {
+        displayName = nameOrId;
+    }
+    return (jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
+};
+const ToggleButton = forwardRef(function ToggleButtonRender(props, ref) {
+    return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+
+export { CallParticipantListingItem };
+//# sourceMappingURL=CallParticipantListingItem.js.map

package/dist/esm/src/components/CallParticipantsList/CallParticipantListingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantListingItem.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { ComponentProps, ComponentType, forwardRef, memo } from 'react';\nimport { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  hasAudio,\n  hasVideo,\n  isPinned,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { IconButton } from '../Button';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport { WithTooltip } from '../Tooltip';\nimport { Avatar } from '../Avatar';\nimport { ParticipantActionsContextMenu } from '../../core/components/ParticipantView/ParticipantActionsContextMenu';\nimport { ParticipantViewContext } from '../../core/components/ParticipantView/ParticipantViewContext';\n\ntype CallParticipantListingItemProps = {\n  /** Participant object be rendered */\n  participant: StreamVideoParticipant;\n  /** Custom component used to display participant's name */\n  DisplayName?: ComponentType<{ participant: StreamVideoParticipant }>;\n};\nexport const CallParticipantListingItem = memo(\n  function CallParticipantListingItemRender({\n    participant,\n    DisplayName = DefaultDisplayName,\n  }: CallParticipantListingItemProps) {\n    const isAudioOn = hasAudio(participant);\n    const isVideoOn = hasVideo(participant);\n    const isPinnedOn = isPinned(participant);\n\n    const { t } = useI18n();\n\n    return (\n      <div className=\"str-video__participant-listing-item\">\n        <Avatar name={participant.name} imageSrc={participant.image} />\n        <DisplayName participant={participant} />\n        <div className=\"str-video__participant-listing-item__media-indicator-group\">\n          <MediaIndicator\n            title={isAudioOn ? t('Microphone on') : t('Microphone off')}\n            className={clsx(\n              'str-video__participant-listing-item__icon',\n              `str-video__participant-listing-item__icon-${\n                isAudioOn ? 'mic' : 'mic-off'\n              }`,\n            )}\n          />\n          <MediaIndicator\n            title={isVideoOn ? t('Camera on') : t('Camera off')}\n            className={clsx(\n              'str-video__participant-listing-item__icon',\n              `str-video__participant-listing-item__icon-${\n                isVideoOn ? 'camera' : 'camera-off'\n              }`,\n            )}\n          />\n          {isPinnedOn && (\n            <MediaIndicator\n              title={t('Pinned')}\n              className={clsx(\n                'str-video__participant-listing-item__icon',\n                'str-video__participant-listing-item__icon-pinned',\n              )}\n            />\n          )}\n\n          <MenuToggle placement=\"bottom-end\" ToggleButton={ToggleButton}>\n            <ParticipantViewContext.Provider\n              value={{ participant, trackType: 'none' }}\n            >\n              <ParticipantActionsContextMenu />\n            </ParticipantViewContext.Provider>\n          </MenuToggle>\n        </div>\n      </div>\n    );\n  },\n);\n\nCallParticipantListingItem.displayName = 'CallParticipantListingItem';\n\nconst MediaIndicator = (props: ComponentProps<'div'>) => (\n  <WithTooltip {...props} />\n);\n\ntype DisplayNameProps = {\n  /** Participant object that provides the data from which display name can be generated */\n  participant: StreamVideoParticipant;\n};\n\nconst DefaultDisplayName = ({ participant }: DisplayNameProps) => {\n  const connectedUser = useConnectedUser();\n  const { t } = useI18n();\n\n  const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';\n  const nameOrId = participant.name || participant.userId || t('Unknown');\n  let displayName;\n  if (!participant.name) {\n    displayName = meFlag || nameOrId || t('Unknown');\n  } else if (meFlag) {\n    displayName = `${nameOrId} (${meFlag})`;\n  } else {\n    displayName = nameOrId;\n  }\n\n  return (\n    <WithTooltip\n      className=\"str-video__participant-listing-item__display-name\"\n      title={displayName}\n    >\n      {displayName}\n    </WithTooltip>\n  );\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return <IconButton enabled={props.menuShown} icon=\"ellipsis\" ref={ref} />;\n  },\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useRef } from 'react';
+import { useCall, useI18n, Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { OwnCapability, name } from '@stream-io/video-client';
+import { BlockedUserListing } from './BlockedUserListing.js';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+import { TextButton } from '../Button/TextButton.js';
+import { CallParticipantListHeader } from './CallParticipantListHeader.js';
+import { CallParticipantListing } from './CallParticipantListing.js';
+import { EmptyParticipantSearchList } from './EmptyParticipantSearchList.js';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+import { SearchInput } from '../Search/SearchInput.js';
+import { SearchResults } from '../Search/SearchResults.js';
+import { useSearch } from '../Search/hooks/useSearch.js';
+import { MenuToggle } from '../Menu/MenuToggle.js';
+import { GenericMenu, GenericMenuButtonItem } from '../Menu/GenericMenu.js';
+import { normalizeString } from '../../utilities/normalizeString.js';
+
+const UserListTypes = {
+    active: 'Active users',
+    blocked: 'Blocked users',
+};
+const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearchFn, debounceSearchInterval, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [userListType, setUserListType] = useState('active');
+    const exitSearch = useCallback(() => setSearchQuery(''), []);
+    return (jsxs("div", { className: "str-video__participant-list", children: [jsx(CallParticipantListHeader, { onClose: onClose }), jsx(SearchInput, { value: searchQuery, onChange: ({ currentTarget }) => setSearchQuery(currentTarget.value), exitSearch: exitSearch, isActive: !!searchQuery }), jsx(CallParticipantListContentHeader, { userListType: userListType, setUserListType: setUserListType }), jsxs("div", { className: "str-video__participant-list__content", children: [userListType === 'active' && (jsx(ActiveUsersSearchResults, { searchQuery: searchQuery, activeUsersSearchFn: activeUsersSearchFn, debounceSearchInterval: debounceSearchInterval })), userListType === 'blocked' && (jsx(BlockedUsersSearchResults, { searchQuery: searchQuery, blockedUsersSearchFn: blockedUsersSearchFn, debounceSearchInterval: debounceSearchInterval }))] })] }));
+};
+const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
+    const call = useCall();
+    const { t } = useI18n();
+    const muteAll = useCallback(() => {
+        call?.muteAllUsers('audio');
+    }, [call]);
+    return (jsxs("div", { className: "str-video__participant-list__content-header", children: [jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsx(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsx(TextButton, { onClick: muteAll, children: t('Mute all') }) })) }), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton, children: jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+};
+const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
+    const { useParticipants } = useCallStateHooks();
+    const participants = useParticipants({ sortBy: name });
+    // cache: each distinct name is normalized once
+    const normalizedNameCache = useRef(null);
+    const activeUsersSearchFn = useCallback(async (queryString) => {
+        const normalizedQuery = normalizeString(queryString);
+        const cache = (normalizedNameCache.current ??= new Map());
+        return participants.filter((p) => {
+            let normalizedName = cache.get(p.name);
+            if (normalizedName === undefined) {
+                normalizedName = normalizeString(p.name);
+                cache.set(p.name, normalizedName);
+            }
+            return normalizedName.includes(normalizedQuery);
+        });
+    }, [participants]);
+    const { searchQueryInProgress, searchResults } = useSearch({
+        searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
+        debounceInterval: debounceSearchInterval,
+        searchQuery,
+    });
+    return (jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : participants, SearchResultList: CallParticipantListing }));
+};
+const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnFromProps, debounceSearchInterval, searchQuery, }) => {
+    const { useCallBlockedUserIds } = useCallStateHooks();
+    const blockedUsers = useCallBlockedUserIds();
+    const blockedUsersSearchFn = useCallback(async (queryString) => {
+        const normalizedQuery = queryString.toLowerCase();
+        return blockedUsers.filter((userId) => userId.toLowerCase().includes(normalizedQuery));
+    }, [blockedUsers]);
+    const { searchQueryInProgress, searchResults } = useSearch({
+        searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,
+        debounceInterval: debounceSearchInterval,
+        searchQuery,
+    });
+    return (jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
+};
+const ToggleButton = forwardRef(function ToggleButtonRender(props, ref) {
+    return jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
+});
+
+export { CallParticipantsList };
+//# sourceMappingURL=CallParticipantsList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsList.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantsList.tsx"],"sourcesContent":["import {\n  Dispatch,\n  forwardRef,\n  SetStateAction,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Restricted,\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport {\n  name,\n  OwnCapability,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\n\nimport { BlockedUserListing } from './BlockedUserListing';\nimport { IconButton, TextButton } from '../Button';\nimport { CallParticipantListHeader } from './CallParticipantListHeader';\nimport { CallParticipantListing } from './CallParticipantListing';\nimport { EmptyParticipantSearchList } from './EmptyParticipantSearchList';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { SearchInput, SearchResults } from '../Search';\nimport { useSearch, UseSearchParams } from '../Search/hooks';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  MenuToggle,\n  ToggleMenuButtonProps,\n} from '../Menu';\nimport { normalizeString } from '../../utilities';\n\ntype CallParticipantListProps = {\n  /** Click event listener function to be invoked in order to dismiss/hide the CallParticipantsList from the UI */\n  onClose: () => void;\n  /** Custom function to override the searching logic of active participants */\n  activeUsersSearchFn?: UseSearchParams<StreamVideoParticipant>['searchFn'];\n  /** Custom function to override the searching logic of blocked users */\n  blockedUsersSearchFn?: UseSearchParams<string>['searchFn'];\n  /** Interval in ms, during which the participant search calls will be debounced. The default value is 200ms. */\n  debounceSearchInterval?: number;\n};\n\nconst UserListTypes = {\n  active: 'Active users',\n  blocked: 'Blocked users',\n} as const;\n\nexport const CallParticipantsList = ({\n  onClose,\n  activeUsersSearchFn,\n  blockedUsersSearchFn,\n  debounceSearchInterval,\n}: CallParticipantListProps) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [userListType, setUserListType] =\n    useState<keyof typeof UserListTypes>('active');\n\n  const exitSearch = useCallback(() => setSearchQuery(''), []);\n\n  return (\n    <div className=\"str-video__participant-list\">\n      <CallParticipantListHeader onClose={onClose} />\n      <SearchInput\n        value={searchQuery}\n        onChange={({ currentTarget }) => setSearchQuery(currentTarget.value)}\n        exitSearch={exitSearch}\n        isActive={!!searchQuery}\n      />\n      <CallParticipantListContentHeader\n        userListType={userListType}\n        setUserListType={setUserListType}\n      />\n      <div className=\"str-video__participant-list__content\">\n        {userListType === 'active' && (\n          <ActiveUsersSearchResults\n            searchQuery={searchQuery}\n            activeUsersSearchFn={activeUsersSearchFn}\n            debounceSearchInterval={debounceSearchInterval}\n          />\n        )}\n        {userListType === 'blocked' && (\n          <BlockedUsersSearchResults\n            searchQuery={searchQuery}\n            blockedUsersSearchFn={blockedUsersSearchFn}\n            debounceSearchInterval={debounceSearchInterval}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst CallParticipantListContentHeader = ({\n  userListType,\n  setUserListType,\n}: {\n  userListType: keyof typeof UserListTypes;\n  setUserListType: Dispatch<SetStateAction<keyof typeof UserListTypes>>;\n}) => {\n  const call = useCall();\n  const { t } = useI18n();\n\n  const muteAll = useCallback(() => {\n    call?.muteAllUsers('audio');\n  }, [call]);\n\n  return (\n    <div className=\"str-video__participant-list__content-header\">\n      <div className=\"str-video__participant-list__content-header-title\">\n        {userListType === 'active' && (\n          <Restricted\n            requiredGrants={[OwnCapability.MUTE_USERS]}\n            hasPermissionsOnly\n          >\n            <TextButton onClick={muteAll}>{t('Mute all')}</TextButton>\n          </Restricted>\n        )}\n      </div>\n      <MenuToggle placement=\"bottom-end\" ToggleButton={ToggleButton}>\n        <GenericMenu>\n          {(\n            Object.keys(UserListTypes) as Array<keyof typeof UserListTypes>\n          ).map((lt) => (\n            <GenericMenuButtonItem\n              key={lt}\n              aria-selected={lt === userListType}\n              onClick={() => setUserListType(lt)}\n            >\n              {UserListTypes[lt]}\n            </GenericMenuButtonItem>\n          ))}\n        </GenericMenu>\n      </MenuToggle>\n    </div>\n  );\n};\n\nconst ActiveUsersSearchResults = ({\n  searchQuery,\n  activeUsersSearchFn: activeUsersSearchFnFromProps,\n  debounceSearchInterval,\n}: Pick<\n  CallParticipantListProps,\n  'activeUsersSearchFn' | 'debounceSearchInterval'\n> & { searchQuery: string }) => {\n  const { useParticipants } = useCallStateHooks();\n  const participants = useParticipants({ sortBy: name });\n\n  // cache: each distinct name is normalized once\n  const normalizedNameCache = useRef<Map<string, string> | null>(null);\n\n  const activeUsersSearchFn = useCallback(\n    async (queryString: string) => {\n      const normalizedQuery = normalizeString(queryString);\n      const cache = (normalizedNameCache.current ??= new Map<string, string>());\n      return participants.filter((p) => {\n        let normalizedName = cache.get(p.name);\n        if (normalizedName === undefined) {\n          normalizedName = normalizeString(p.name);\n          cache.set(p.name, normalizedName);\n        }\n        return normalizedName.includes(normalizedQuery);\n      });\n    },\n    [participants],\n  );\n\n  const { searchQueryInProgress, searchResults } = useSearch({\n    searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,\n    debounceInterval: debounceSearchInterval,\n    searchQuery,\n  });\n\n  return (\n    <SearchResults<StreamVideoParticipant>\n      EmptySearchResultComponent={EmptyParticipantSearchList}\n      LoadingIndicator={LoadingIndicator}\n      searchQueryInProgress={searchQueryInProgress}\n      searchResults={searchQuery ? searchResults : participants}\n      SearchResultList={CallParticipantListing}\n    />\n  );\n};\n\nconst BlockedUsersSearchResults = ({\n  blockedUsersSearchFn: blockedUsersSearchFnFromProps,\n  debounceSearchInterval,\n  searchQuery,\n}: Pick<\n  CallParticipantListProps,\n  'blockedUsersSearchFn' | 'debounceSearchInterval'\n> & { searchQuery: string }) => {\n  const { useCallBlockedUserIds } = useCallStateHooks();\n  const blockedUsers = useCallBlockedUserIds();\n\n  const blockedUsersSearchFn = useCallback(\n    async (queryString: string) => {\n      const normalizedQuery = queryString.toLowerCase();\n      return blockedUsers.filter((userId) =>\n        userId.toLowerCase().includes(normalizedQuery),\n      );\n    },\n    [blockedUsers],\n  );\n\n  const { searchQueryInProgress, searchResults } = useSearch({\n    searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,\n    debounceInterval: debounceSearchInterval,\n    searchQuery,\n  });\n\n  return (\n    <SearchResults<string>\n      EmptySearchResultComponent={EmptyParticipantSearchList}\n      LoadingIndicator={LoadingIndicator}\n      searchQueryInProgress={searchQueryInProgress}\n      searchResults={searchQuery ? searchResults : blockedUsers}\n      SearchResultList={BlockedUserListing}\n    />\n  );\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return <IconButton enabled={props.menuShown} icon=\"filter\" ref={ref} />;\n  },\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/CallParticipantsList/EmptyParticipantSearchList.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { useI18n } from '@stream-io/video-react-bindings';
+
+const EmptyParticipantSearchList = () => {
+    const { t } = useI18n();
+    return (jsx("div", { className: "str-video__participant-list--empty", children: t('No participants found') }));
+};
+
+export { EmptyParticipantSearchList };
+//# sourceMappingURL=EmptyParticipantSearchList.js.map

package/dist/esm/src/components/CallParticipantsList/EmptyParticipantSearchList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyParticipantSearchList.js","sources":["../../../../../../../src/components/CallParticipantsList/EmptyParticipantSearchList.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\n\nexport const EmptyParticipantSearchList = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__participant-list--empty\">\n      {t('No participants found')}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAEO,MAAM,0BAA0B,GAAG,MAAK;AAC7C,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAChD,CAAC,CAAC,uBAAuB,CAAC,EAAA,CACvB;AAEV;;;;"}

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useState, useEffect } from 'react';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+const CallPreview = (props) => {
+    const { className, style } = props;
+    const call = useCall();
+    const { useCallThumbnail } = useCallStateHooks();
+    const thumbnail = useCallThumbnail();
+    const [imageRef, setImageRef] = useState(null);
+    useEffect(() => {
+        if (!imageRef || !call)
+            return;
+        const cleanup = call.bindCallThumbnailElement(imageRef);
+        return () => cleanup();
+    }, [imageRef, call]);
+    if (!thumbnail)
+        return null;
+    return (jsx("img", { className: clsx('str-video__call-preview', className), style: style, alt: "Call Preview Thumbnail", ref: setImageRef }));
+};
+
+export { CallPreview };
+//# sourceMappingURL=CallPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallPreview.js","sources":["../../../../../../../src/components/CallPreview/CallPreview.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { CSSProperties, useEffect, useState } from 'react';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport type CallPreviewProps = {\n  /**\n   * Additional CSS class name to apply to the CallPreview element.\n   */\n  className?: string;\n\n  /**\n   * Additional CSS properties to apply to the CallPreview element.\n   */\n  style?: CSSProperties;\n};\n\nexport const CallPreview = (props: CallPreviewProps) => {\n  const { className, style } = props;\n  const call = useCall();\n  const { useCallThumbnail } = useCallStateHooks();\n  const thumbnail = useCallThumbnail();\n\n  const [imageRef, setImageRef] = useState<HTMLImageElement | null>(null);\n  useEffect(() => {\n    if (!imageRef || !call) return;\n    const cleanup = call.bindCallThumbnailElement(imageRef);\n    return () => cleanup();\n  }, [imageRef, call]);\n\n  if (!thumbnail) return null;\n\n  return (\n    <img\n      className={clsx('str-video__call-preview', className)}\n      style={style}\n      alt=\"Call Preview Thumbnail\"\n      ref={setImageRef}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAgBO,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;AACrD,IAAA,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK;AAClC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,EAAE;AAChD,IAAA,MAAM,SAAS,GAAG,gBAAgB,EAAE;IAEpC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC;IACvE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI;YAAE;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC;AACvD,QAAA,OAAO,MAAM,OAAO,EAAE;AACxB,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAEpB,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,IAAI;IAE3B,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACrD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAC,wBAAwB,EAC5B,GAAG,EAAE,WAAW,EAAA,CAChB;AAEN;;;;"}

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CallRecordingListHeader } from './CallRecordingListHeader.js';
+import { CallRecordingListItem } from './CallRecordingListItem.js';
+import { EmptyCallRecordingListing } from './EmptyCallRecordingListing.js';
+import { LoadingCallRecordingListing } from './LoadingCallRecordingListing.js';
+
+const CallRecordingList = ({ callRecordings, CallRecordingListHeader: CallRecordingListHeader$1 = CallRecordingListHeader, CallRecordingListItem: CallRecordingListItem$1 = CallRecordingListItem, EmptyCallRecordingList = EmptyCallRecordingListing, loading, LoadingCallRecordingList = LoadingCallRecordingListing, onRefresh, }) => {
+    return (jsxs("div", { className: "str-video__call-recording-list", children: [jsx(CallRecordingListHeader$1, { callRecordings: callRecordings, onRefresh: onRefresh }), jsx("div", { className: "str-video__call-recording-list__listing", children: loading ? (jsx(LoadingCallRecordingList, { callRecordings: callRecordings })) : callRecordings.length ? (jsxs(Fragment, { children: [jsx("ul", { className: "str-video__call-recording-list__list", children: jsxs("li", { className: "str-video__call-recording-list__item", children: [jsx("div", { className: "str-video__call-recording-list__filename", children: "Name" }), jsx("div", { className: "str-video__call-recording-list__time", children: "Start time" }), jsx("div", { className: "str-video__call-recording-list__time", children: "End time" }), jsx("div", { className: "str-video__call-recording-list__download" })] }) }), jsx("ul", { className: "str-video__call-recording-list__list", children: callRecordings.map((recording) => (jsx(CallRecordingListItem$1, { recording: recording }, recording.filename))) })] })) : (jsx(EmptyCallRecordingList, {})) })] }));
+};
+
+export { CallRecordingList };
+//# sourceMappingURL=CallRecordingList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallRecordingList.js","sources":["../../../../../../../src/components/CallRecordingList/CallRecordingList.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport { CallRecording } from '@stream-io/video-client';\n\nimport {\n  CallRecordingListHeader as DefaultCallRecordingListHeader,\n  CallRecordingListHeaderProps,\n} from './CallRecordingListHeader';\nimport {\n  CallRecordingListItem as DefaultCallRecordingListItem,\n  CallRecordingListItemProps,\n} from './CallRecordingListItem';\nimport { EmptyCallRecordingListing as DefaultEmptyCallRecordingList } from './EmptyCallRecordingListing';\nimport {\n  LoadingCallRecordingListing as DefaultLoadingCallRecordingList,\n  LoadingCallRecordingListProps,\n} from './LoadingCallRecordingListing';\n\nexport type CallRecordingListProps = {\n  /** Array of CallRecording objects to be displayed */\n  callRecordings: CallRecording[];\n  /** Custom component to replace the default header implementation */\n  CallRecordingListHeader?: ComponentType<CallRecordingListHeaderProps>;\n  /** Custom component to replace the default list item implementation */\n  CallRecordingListItem?: ComponentType<CallRecordingListItemProps>;\n  /** Custom component to replace the default empty list component implementation */\n  EmptyCallRecordingList?: ComponentType;\n  /** Signals that a request for new list of CallRecording object has been initiated */\n  loading?: boolean;\n  /** Custom component to be rendered when loading is true */\n  LoadingCallRecordingList?: ComponentType<LoadingCallRecordingListProps>;\n  /** Callback to be invoked when the refresh button is clicked */\n  onRefresh?: () => void;\n};\n\nexport const CallRecordingList = ({\n  callRecordings,\n  CallRecordingListHeader = DefaultCallRecordingListHeader,\n  CallRecordingListItem = DefaultCallRecordingListItem,\n  EmptyCallRecordingList = DefaultEmptyCallRecordingList,\n  loading,\n  LoadingCallRecordingList = DefaultLoadingCallRecordingList,\n  onRefresh,\n}: CallRecordingListProps) => {\n  return (\n    <div className=\"str-video__call-recording-list\">\n      <CallRecordingListHeader\n        callRecordings={callRecordings}\n        onRefresh={onRefresh}\n      />\n      <div className=\"str-video__call-recording-list__listing\">\n        {loading ? (\n          <LoadingCallRecordingList callRecordings={callRecordings} />\n        ) : callRecordings.length ? (\n          <>\n            <ul className=\"str-video__call-recording-list__list\">\n              <li className=\"str-video__call-recording-list__item\">\n                <div className=\"str-video__call-recording-list__filename\">\n                  Name\n                </div>\n                <div className=\"str-video__call-recording-list__time\">\n                  Start time\n                </div>\n                <div className=\"str-video__call-recording-list__time\">\n                  End time\n                </div>\n                <div className=\"str-video__call-recording-list__download\"></div>\n              </li>\n            </ul>\n            <ul className=\"str-video__call-recording-list__list\">\n              {callRecordings.map((recording) => (\n                <CallRecordingListItem\n                  recording={recording}\n                  key={recording.filename}\n                />\n              ))}\n            </ul>\n          </>\n        ) : (\n          <EmptyCallRecordingList />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CallRecordingListHeader","DefaultCallRecordingListHeader","CallRecordingListItem","DefaultCallRecordingListItem","DefaultEmptyCallRecordingList","DefaultLoadingCallRecordingList","_jsxs","_jsx","_Fragment"],"mappings":";;;;;;AAkCO,MAAM,iBAAiB,GAAG,CAAC,EAChC,cAAc,2BACdA,yBAAuB,GAAGC,uBAA8B,yBACxDC,uBAAqB,GAAGC,qBAA4B,EACpD,sBAAsB,GAAGC,yBAA6B,EACtD,OAAO,EACP,wBAAwB,GAAGC,2BAA+B,EAC1D,SAAS,GACc,KAAI;AAC3B,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAACP,yBAAuB,EAAA,EACtB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EAAA,CACpB,EACFO,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACrD,OAAO,IACNA,GAAA,CAAC,wBAAwB,EAAA,EAAC,cAAc,EAAE,cAAc,EAAA,CAAI,IAC1D,cAAc,CAAC,MAAM,IACvBD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAClDD,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,MAAA,EAAA,CAEnD,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,YAAA,EAAA,CAE/C,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,UAAA,EAAA,CAE/C,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,CAAO,CAAA,EAAA,CAC7D,EAAA,CACF,EACLA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EACjD,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,MAC5BA,GAAA,CAACL,uBAAqB,EAAA,EACpB,SAAS,EAAE,SAAS,EAAA,EACf,SAAS,CAAC,QAAQ,CACvB,CACH,CAAC,EAAA,CACC,CAAA,EAAA,CACJ,KAEHK,GAAA,CAAC,sBAAsB,EAAA,EAAA,CAAG,CAC3B,EAAA,CACG,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/components/CallRecordingList/CallRecordingListHeader.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n } from '@stream-io/video-react-bindings';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+
+const CallRecordingListHeader = ({ callRecordings, onRefresh, }) => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxs("div", { className: "str-video__call-recording-list__title", children: [jsx("span", { children: t('Call Recordings') }), callRecordings.length ? jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), onRefresh && (jsx(IconButton, { icon: "refresh", title: t('Refresh'), onClick: onRefresh }))] }));
+};
+
+export { CallRecordingListHeader };
+//# sourceMappingURL=CallRecordingListHeader.js.map

package/dist/esm/src/components/CallRecordingList/CallRecordingListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallRecordingListHeader.js","sources":["../../../../../../../src/components/CallRecordingList/CallRecordingListHeader.tsx"],"sourcesContent":["import { CallRecording } from '@stream-io/video-client';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { IconButton } from '../Button';\n\nexport type CallRecordingListHeaderProps = {\n  /** Array of CallRecording objects */\n  callRecordings: CallRecording[];\n  /** Callback to be invoked when the refresh button is clicked */\n  onRefresh?: () => void;\n};\n\nexport const CallRecordingListHeader = ({\n  callRecordings,\n  onRefresh,\n}: CallRecordingListHeaderProps) => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__call-recording-list__header\">\n      <div className=\"str-video__call-recording-list__title\">\n        <span>{t('Call Recordings')}</span>\n        {callRecordings.length ? <span>({callRecordings.length})</span> : null}\n      </div>\n      {onRefresh && (\n        <IconButton icon=\"refresh\" title={t('Refresh')} onClick={onRefresh} />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAWO,MAAM,uBAAuB,GAAG,CAAC,EACtC,cAAc,EACd,SAAS,GACoB,KAAI;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAQ,EAClC,cAAc,CAAC,MAAM,GAAGD,IAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAQ,cAAc,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAAS,GAAG,IAAI,CAAA,EAAA,CAClE,EACL,SAAS,KACRC,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAA,CAAI,CACvE,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/components/CallRecordingList/CallRecordingListItem.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Icon } from '../Icon/Icon.js';
+
+const dateFormat = (date) => {
+    const format = new Date(date);
+    return format.toTimeString().split(' ')[0];
+};
+const CallRecordingListItem = ({ recording, }) => {
+    return (jsxs("li", { className: "str-video__call-recording-list__item", children: [jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__filename", children: recording.filename }), jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__time", children: dateFormat(recording.start_time) }), jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__time", children: dateFormat(recording.end_time) }), jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__download", children: jsx("a", { className: clsx('str-video__call-recording-list-item__action-button', 'str-video__call-recording-list-item__action-button--download'), role: "button", href: recording.url, download: recording.filename, title: "Download the recording", children: jsx(Icon, { icon: "download" }) }) })] }));
+};
+
+export { CallRecordingListItem };
+//# sourceMappingURL=CallRecordingListItem.js.map

package/dist/esm/src/components/CallRecordingList/CallRecordingListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallRecordingListItem.js","sources":["../../../../../../../src/components/CallRecordingList/CallRecordingListItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { CallRecording } from '@stream-io/video-client';\nimport { Icon } from '../Icon';\n\nexport type CallRecordingListItemProps = {\n  /** CallRecording object to represent */\n  recording: CallRecording;\n};\n\nconst dateFormat = (date: string) => {\n  const format = new Date(date);\n  return format.toTimeString().split(' ')[0];\n};\nexport const CallRecordingListItem = ({\n  recording,\n}: CallRecordingListItemProps) => {\n  return (\n    <li className=\"str-video__call-recording-list__item\">\n      <div className=\"str-video__call-recording-list__table-cell str-video__call-recording-list__filename\">\n        {recording.filename}\n      </div>\n      <div className=\"str-video__call-recording-list__table-cell str-video__call-recording-list__time\">\n        {dateFormat(recording.start_time)}\n      </div>\n      <div className=\"str-video__call-recording-list__table-cell str-video__call-recording-list__time\">\n        {dateFormat(recording.end_time)}\n      </div>\n      <div className=\"str-video__call-recording-list__table-cell str-video__call-recording-list__download\">\n        <a\n          className={clsx(\n            'str-video__call-recording-list-item__action-button',\n            'str-video__call-recording-list-item__action-button--download',\n          )}\n          role=\"button\"\n          href={recording.url}\n          download={recording.filename}\n          title=\"Download the recording\"\n        >\n          <Icon icon=\"download\" />\n        </a>\n      </div>\n    </li>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AASA,MAAM,UAAU,GAAG,CAAC,IAAY,KAAI;AAClC,IAAA,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC;AAC7B,IAAA,OAAO,MAAM,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC5C,CAAC;MACY,qBAAqB,GAAG,CAAC,EACpC,SAAS,GACkB,KAAI;AAC/B,IAAA,QACEA,IAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CAClDC,aAAK,SAAS,EAAC,qFAAqF,EAAA,QAAA,EACjG,SAAS,CAAC,QAAQ,EAAA,CACf,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iFAAiF,EAAA,QAAA,EAC7F,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC,EAAA,CAC7B,EACNA,aAAK,SAAS,EAAC,iFAAiF,EAAA,QAAA,EAC7F,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAA,CAC3B,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qFAAqF,YAClGA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,oDAAoD,EACpD,8DAA8D,CAC/D,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,SAAS,CAAC,GAAG,EACnB,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,KAAK,EAAC,wBAAwB,EAAA,QAAA,EAE9BA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,UAAU,EAAA,CAAG,GACtB,EAAA,CACA,CAAA,EAAA,CACH;AAET;;;;"}

package/dist/esm/src/components/CallRecordingList/EmptyCallRecordingListing.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const EmptyCallRecordingListing = () => {
+    return (jsxs("div", { className: "str-video__call-recording-list__listing str-video__call-recording-list__listing--empty", children: [jsx("div", { className: "str-video__call-recording-list__listing--icon-empty" }), jsx("p", { className: "str-video__call-recording-list__listing--text-empty", children: "No recordings available" })] }));
+};
+
+export { EmptyCallRecordingListing };
+//# sourceMappingURL=EmptyCallRecordingListing.js.map

package/dist/esm/src/components/CallRecordingList/EmptyCallRecordingListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyCallRecordingListing.js","sources":["../../../../../../../src/components/CallRecordingList/EmptyCallRecordingListing.tsx"],"sourcesContent":["export const EmptyCallRecordingListing = () => {\n  return (\n    <div className=\"str-video__call-recording-list__listing str-video__call-recording-list__listing--empty\">\n      <div className=\"str-video__call-recording-list__listing--icon-empty\" />\n      <p className=\"str-video__call-recording-list__listing--text-empty\">\n        {/* todo: introduce i18n to enable text customization */}\n        No recordings available\n      </p>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;AAAO,MAAM,yBAAyB,GAAG,MAAK;AAC5C,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wFAAwF,EAAA,QAAA,EAAA,CACrGC,aAAK,SAAS,EAAC,qDAAqD,EAAA,CAAG,EACvEA,WAAG,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAAA,yBAAA,EAAA,CAG9D,CAAA,EAAA,CACA;AAEV;;;;"}

package/dist/esm/src/components/CallRecordingList/LoadingCallRecordingListing.js

@@ -0,0 +1,10 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CallRecordingListItem } from './CallRecordingListItem.js';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+
+const LoadingCallRecordingListing = ({ callRecordings, }) => {
+    return (jsxs(Fragment, { children: [callRecordings.map((recording) => (jsx(CallRecordingListItem, { recording: recording }, recording.filename))), jsx(LoadingIndicator, { text: "Recording getting ready" })] }));
+};
+
+export { LoadingCallRecordingListing };
+//# sourceMappingURL=LoadingCallRecordingListing.js.map

package/dist/esm/src/components/CallRecordingList/LoadingCallRecordingListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingCallRecordingListing.js","sources":["../../../../../../../src/components/CallRecordingList/LoadingCallRecordingListing.tsx"],"sourcesContent":["import { CallRecording } from '@stream-io/video-client';\nimport { CallRecordingListItem } from './CallRecordingListItem';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nexport type LoadingCallRecordingListProps = {\n  /** Array of CallRecording objects */\n  callRecordings: CallRecording[];\n};\n\nexport const LoadingCallRecordingListing = ({\n  callRecordings,\n}: LoadingCallRecordingListProps) => {\n  return (\n    <>\n      {callRecordings.map((recording) => (\n        <CallRecordingListItem recording={recording} key={recording.filename} />\n      ))}\n      <LoadingIndicator text=\"Recording getting ready\" />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;MASa,2BAA2B,GAAG,CAAC,EAC1C,cAAc,GACgB,KAAI;AAClC,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,MAC5BC,GAAA,CAAC,qBAAqB,IAAC,SAAS,EAAE,SAAS,EAAA,EAAO,SAAS,CAAC,QAAQ,CAAI,CACzE,CAAC,EACFA,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAC,yBAAyB,EAAA,CAAG,CAAA,EAAA,CAClD;AAEP;;;;"}