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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react';\nimport { useEffectEvent } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\ntype SearchInputProps = ComponentProps<'input'> & {\n  /**\n   * Resets the search to its initial state.\n   * The function is called when Esc key or inputs clear button are pressed\n   */\n  exitSearch: () => void;\n  /**\n   * Flag to signal, whether search input elements should be rendered as active\n   */\n  isActive: boolean;\n};\nexport const SearchInput = ({\n  exitSearch,\n  isActive,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(\n    null,\n  );\n  const onExitSearch = useEffectEvent(exitSearch);\n  useEffect(() => {\n    if (!inputElement) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key.toLowerCase() === 'escape') onExitSearch();\n    };\n\n    inputElement.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      inputElement.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [inputElement]);\n\n  return (\n    <div\n      className={clsx('str-video__search-input__container', {\n        'str-video__search-input__container--active': isActive,\n      })}\n    >\n      <input placeholder=\"Search\" {...rest} ref={setInputElement} />\n      {isActive ? (\n        <button\n          className=\"str-video__search-input__clear-btn\"\n          onClick={exitSearch}\n        >\n          <span className=\"str-video__search-input__icon--active\" />\n        </button>\n      ) : (\n        <span className=\"str-video__search-input__icon\" />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAeO,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACU,KAAI;IACrB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;AACD,IAAA,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC;IAC/C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;AAEnB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ;AAAE,gBAAA,YAAY,EAAE;AACtD,QAAA,CAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEvD,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,QAAQ;SACvD,CAAC,EAAA,QAAA,EAAA,CAEFC,eAAO,WAAW,EAAC,QAAQ,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,eAAe,EAAA,CAAI,EAC7D,QAAQ,IACPA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAE,UAAU,YAEnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uCAAuC,EAAA,CAAG,GACnD,KAETA,cAAM,SAAS,EAAC,+BAA+B,EAAA,CAAG,CACnD,CAAA,EAAA,CACG;AAEV;;;;"}

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+
+function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) {
+    if (searchQueryInProgress) {
+        return (jsx("div", { className: "str-video__search-results--loading", children: jsx(LoadingIndicator$1, {}) }));
+    }
+    if (!searchResults.length) {
+        return jsx(EmptySearchResultComponent, {});
+    }
+    return jsx(SearchResultList, { data: searchResults });
+}
+
+export { SearchResults };
+//# sourceMappingURL=SearchResults.js.map

package/dist/esm/src/components/Search/SearchResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.js","sources":["../../../../../../../src/components/Search/SearchResults.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../LoadingIndicator';\nimport { SearchController } from './hooks';\n\nexport type SearchResultListProps<T> = {\n  data: T[];\n};\n\nexport type SearchResultsProps<T> = Pick<\n  SearchController<T>,\n  'searchResults' | 'searchQueryInProgress'\n> & {\n  /** Component to be displayed, when empty array of search results is provided */\n  EmptySearchResultComponent: ComponentType;\n  /** Component will be used to render non-empty array of search results  */\n  SearchResultList: ComponentType<SearchResultListProps<T>>;\n  /** Component to be displayed while the search query request is in progress */\n  LoadingIndicator?: ComponentType;\n};\n\nexport function SearchResults<T>({\n  EmptySearchResultComponent,\n  LoadingIndicator = DefaultLoadingIndicator,\n  searchQueryInProgress,\n  searchResults,\n  SearchResultList,\n}: SearchResultsProps<T>) {\n  if (searchQueryInProgress) {\n    return (\n      <div className=\"str-video__search-results--loading\">\n        <LoadingIndicator />\n      </div>\n    );\n  }\n  if (!searchResults.length) {\n    return <EmptySearchResultComponent />;\n  }\n\n  return <SearchResultList data={searchResults} />;\n}\n"],"names":["LoadingIndicator","DefaultLoadingIndicator","_jsx"],"mappings":";;;AAoBM,SAAU,aAAa,CAAI,EAC/B,0BAA0B,oBAC1BA,kBAAgB,GAAGC,gBAAuB,EAC1C,qBAAqB,EACrB,aAAa,EACb,gBAAgB,GACM,EAAA;IACtB,IAAI,qBAAqB,EAAE;QACzB,QACEC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EACjDA,GAAA,CAACF,kBAAgB,EAAA,EAAA,CAAG,EAAA,CAChB;IAEV;AACA,IAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;QACzB,OAAOE,GAAA,CAAC,0BAA0B,EAAA,EAAA,CAAG;IACvC;AAEA,IAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,aAAa,GAAI;AAClD;;;;"}

package/dist/esm/src/components/Search/hooks/useSearch.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useSearch = ({ debounceInterval = 200, searchFn, searchQuery = '', }) => {
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
+    const searchFnRef = useRef(searchFn);
+    searchFnRef.current = searchFn;
+    useEffect(() => {
+        if (!searchQuery.length) {
+            setSearchQueryInProgress(false);
+            setSearchResults([]);
+            return;
+        }
+        setSearchQueryInProgress(true);
+        const timeout = setTimeout(async () => {
+            try {
+                const results = await searchFnRef.current(searchQuery);
+                setSearchResults(results);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            finally {
+                setSearchQueryInProgress(false);
+            }
+        }, debounceInterval);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [debounceInterval, searchQuery]);
+    return {
+        searchQueryInProgress,
+        searchResults,
+    };
+};
+
+export { useSearch };
+//# sourceMappingURL=useSearch.js.map

package/dist/esm/src/components/Search/hooks/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sources":["../../../../../../../../src/components/Search/hooks/useSearch.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type SearchController<T> = {\n  /** Flag signals that the search request is flight await the response */\n  searchQueryInProgress: boolean;\n  /** Array of items returned by the search query */\n  searchResults: T[];\n};\n\nexport type UseSearchParams<T> = {\n  /** Search function performing the search request */\n  searchFn: (searchQuery: string) => Promise<T[]>;\n  /** Debounce interval applied to the search function */\n  debounceInterval?: number;\n  /** Search query string */\n  searchQuery?: string;\n};\n\nexport const useSearch = <T>({\n  debounceInterval = 200,\n  searchFn,\n  searchQuery = '',\n}: UseSearchParams<T>): SearchController<T> => {\n  const [searchResults, setSearchResults] = useState<T[]>([]);\n  const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);\n\n  const searchFnRef = useRef(searchFn);\n  searchFnRef.current = searchFn;\n\n  useEffect(() => {\n    if (!searchQuery.length) {\n      setSearchQueryInProgress(false);\n      setSearchResults([]);\n      return;\n    }\n\n    setSearchQueryInProgress(true);\n\n    const timeout = setTimeout(async () => {\n      try {\n        const results = await searchFnRef.current(searchQuery);\n        setSearchResults(results);\n      } catch (error) {\n        console.error(error);\n      } finally {\n        setSearchQueryInProgress(false);\n      }\n    }, debounceInterval);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [debounceInterval, searchQuery]);\n\n  return {\n    searchQueryInProgress,\n    searchResults,\n  };\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,SAAS,GAAG,CAAI,EAC3B,gBAAgB,GAAG,GAAG,EACtB,QAAQ,EACR,WAAW,GAAG,EAAE,GACG,KAAyB;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAM,EAAE,CAAC;IAC3D,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEzE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YACvB,wBAAwB,CAAC,KAAK,CAAC;YAC/B,gBAAgB,CAAC,EAAE,CAAC;YACpB;QACF;QAEA,wBAAwB,CAAC,IAAI,CAAC;AAE9B,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAW;AACpC,YAAA,IAAI;gBACF,MAAM,OAAO,GAAG,MAAM,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;gBACtD,gBAAgB,CAAC,OAAO,CAAC;YAC3B;YAAE,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;YACtB;oBAAU;gBACR,wBAAwB,CAAC,KAAK,CAAC;YACjC;QACF,CAAC,EAAE,gBAAgB,CAAC;AAEpB,QAAA,OAAO,MAAK;YACV,YAAY,CAAC,OAAO,CAAC;AACvB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAEnC,OAAO;QACL,qBAAqB;QACrB,aAAa;KACd;AACH;;;;"}

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

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const StreamTheme = ({ as: Component = 'div', className, children, ...props }) => {
+    return (jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
+};
+
+export { StreamTheme };
+//# sourceMappingURL=StreamTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamTheme.js","sources":["../../../../../../../src/components/StreamTheme/StreamTheme.tsx"],"sourcesContent":["import { ElementType, HTMLProps, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nexport type StreamThemeProps = HTMLProps<HTMLElement> & {\n  as?: ElementType;\n};\n\nexport const StreamTheme = ({\n  as: Component = 'div',\n  className,\n  children,\n  ...props\n}: PropsWithChildren<StreamThemeProps>) => {\n  return (\n    <Component {...props} className={clsx('str-video', className)}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;MAOa,WAAW,GAAG,CAAC,EAC1B,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC4B,KAAI;AACxC,IAAA,QACEA,GAAA,CAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,YAC1D,QAAQ,EAAA,CACC;AAEhB;;;;"}

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

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+import { arrow, FloatingArrow } from '@floating-ui/react';
+
+const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
+    const arrowRef = useRef(null);
+    const { refs, x, y, strategy, context } = useFloatingUIPreset({
+        placement: tooltipPlacement,
+        strategy: 'absolute',
+        middleware: [arrow({ element: arrowRef })],
+    });
+    useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    if (!visible)
+        return null;
+    return (jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+        }, children: [jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
+};
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useFloatingUIPreset } from '../../hooks';\nimport { FloatingArrow, Placement, arrow } from '@floating-ui/react';\n\nexport type TooltipProps<T extends HTMLElement> = PropsWithChildren<{\n  /** Reference element to which the tooltip should attach to */\n  referenceElement: T | null;\n  /** Additional class applied to the tooltip root element */\n  tooltipClassName?: string;\n  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */\n  offset?: [number, number];\n  /** Popper's placement property defining default position of the tooltip, default 'top' */\n  tooltipPlacement?: Placement;\n  /** Tells component whether to render its contents */\n  visible?: boolean;\n}>;\n\nexport const Tooltip = <T extends HTMLElement>({\n  children,\n  referenceElement,\n  tooltipClassName,\n  tooltipPlacement = 'top',\n  visible = false,\n}: TooltipProps<T>) => {\n  const arrowRef = useRef<SVGSVGElement>(null);\n  const { refs, x, y, strategy, context } = useFloatingUIPreset({\n    placement: tooltipPlacement,\n    strategy: 'absolute',\n    middleware: [arrow({ element: arrowRef })],\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx('str-video__tooltip', tooltipClassName)}\n      ref={refs.setFloating}\n      style={{\n        position: strategy,\n        top: y ?? 0,\n        left: x ?? 0,\n      }}\n    >\n      <FloatingArrow\n        ref={arrowRef}\n        context={context}\n        fill=\"var(--str-video__tooltip--background-color)\"\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;MAkBa,OAAO,GAAG,CAAwB,EAC7C,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,KAAK,GACC,KAAI;AACpB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC;AAC5C,IAAA,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,mBAAmB,CAAC;AAC5D,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC3C,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC;AACrC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAE5B,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;AAEzB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC,IAAI,CAAC;YACX,IAAI,EAAE,CAAC,IAAI,CAAC;AACb,SAAA,EAAA,QAAA,EAAA,CAEDC,IAAC,aAAa,EAAA,EACZ,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,6CAA6C,EAAA,CAClD,EACD,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/components/Tooltip/WithTooltip.js

@@ -0,0 +1,15 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Tooltip } from './Tooltip.js';
+import { useEnterLeaveHandlers } from './hooks/useEnterLeaveHandlers.js';
+
+// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
+const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, tooltipDisabled, ...props }) => {
+    const { handleMouseEnter, handleMouseLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [tooltipAnchor, setTooltipAnchor] = useState(null);
+    const tooltipActuallyVisible = !tooltipDisabled && Boolean(title) && tooltipVisible;
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipActuallyVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+};
+
+export { WithTooltip };
+//# sourceMappingURL=WithTooltip.js.map

package/dist/esm/src/components/Tooltip/WithTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithTooltip.js","sources":["../../../../../../../src/components/Tooltip/WithTooltip.tsx"],"sourcesContent":["import { ComponentProps, useState } from 'react';\nimport { Tooltip, TooltipProps } from './Tooltip';\nimport { useEnterLeaveHandlers } from './hooks';\n\ntype WithPopupProps = ComponentProps<'div'> &\n  Omit<TooltipProps<HTMLDivElement>, 'referenceElement' | 'children'> & {\n    tooltipDisabled?: boolean;\n  };\n\n// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component\nexport const WithTooltip = ({\n  title,\n  tooltipClassName,\n  tooltipPlacement,\n  tooltipDisabled,\n  ...props\n}: WithPopupProps) => {\n  const { handleMouseEnter, handleMouseLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLDivElement>();\n  const [tooltipAnchor, setTooltipAnchor] = useState<HTMLDivElement | null>(\n    null,\n  );\n  const tooltipActuallyVisible =\n    !tooltipDisabled && Boolean(title) && tooltipVisible;\n\n  return (\n    <>\n      <Tooltip\n        referenceElement={tooltipAnchor}\n        visible={tooltipActuallyVisible}\n        tooltipClassName={tooltipClassName}\n        tooltipPlacement={tooltipPlacement}\n      >\n        {title || ''}\n      </Tooltip>\n      <div\n        ref={setTooltipAnchor}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AASA;AACO,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACO,KAAI;IACnB,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAC1D,qBAAqB,EAAkB;IACzC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,IAAI,CACL;IACD,MAAM,sBAAsB,GAC1B,CAAC,eAAe,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,cAAc;AAEtD,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,OAAO,EAAA,EACN,gBAAgB,EAAE,aAAa,EAC/B,OAAO,EAAE,sBAAsB,EAC/B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAAA,QAAA,EAEjC,KAAK,IAAI,EAAE,GACJ,EACVA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,gBAAgB,EACrB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAAA,GAC1B,KAAK,EAAA,CACT,CAAA,EAAA,CACD;AAEP;;;;"}

package/dist/esm/src/components/Tooltip/hooks/useEnterLeaveHandlers.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const handleMouseEnter = useCallback((e) => {
+        setTooltipVisible(true);
+        onMouseEnter?.(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        setTooltipVisible(false);
+        onMouseLeave?.(e);
+    }, [onMouseLeave]);
+    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+};
+
+export { useEnterLeaveHandlers };
+//# sourceMappingURL=useEnterLeaveHandlers.js.map

package/dist/esm/src/components/Tooltip/hooks/useEnterLeaveHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterLeaveHandlers.js","sources":["../../../../../../../../src/components/Tooltip/hooks/useEnterLeaveHandlers.ts"],"sourcesContent":["import { MouseEventHandler, useCallback, useState } from 'react';\n\nexport const useEnterLeaveHandlers = <T extends HTMLElement>({\n  onMouseEnter,\n  onMouseLeave,\n}: Partial<\n  Record<'onMouseEnter' | 'onMouseLeave', MouseEventHandler<T>>\n> = {}) => {\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  const handleMouseEnter: MouseEventHandler<T> = useCallback(\n    (e) => {\n      setTooltipVisible(true);\n      onMouseEnter?.(e);\n    },\n    [onMouseEnter],\n  );\n\n  const handleMouseLeave: MouseEventHandler<T> = useCallback(\n    (e) => {\n      setTooltipVisible(false);\n      onMouseLeave?.(e);\n    },\n    [onMouseLeave],\n  );\n\n  return { handleMouseEnter, handleMouseLeave, tooltipVisible };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG,CAAwB,EAC3D,YAAY,EACZ,YAAY,GAAA,GAGV,EAAE,KAAI;IACR,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3D,IAAA,MAAM,gBAAgB,GAAyB,WAAW,CACxD,CAAC,CAAC,KAAI;QACJ,iBAAiB,CAAC,IAAI,CAAC;AACvB,QAAA,YAAY,GAAG,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;AAED,IAAA,MAAM,gBAAgB,GAAyB,WAAW,CACxD,CAAC,CAAC,KAAI;QACJ,iBAAiB,CAAC,KAAK,CAAC;AACxB,QAAA,YAAY,GAAG,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;AAED,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE;AAC/D;;;;"}

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

@@ -0,0 +1,37 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { BaseVideo } from '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/Video.js';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+
+const DefaultDisabledVideoPreview = () => {
+    const { t } = useI18n();
+    return (jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
+};
+const DefaultNoCameraPreview = () => {
+    const { t } = useI18n();
+    return (jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
+};
+const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
+    const { useCameraState } = useCallStateHooks();
+    const { devices, status, isMute, mediaStream } = useCameraState();
+    let contents;
+    if (isMute && devices?.length === 0) {
+        contents = jsx(NoCameraPreview, {});
+    }
+    else if (status === 'enabled') {
+        const loading = !mediaStream;
+        contents = (jsxs(Fragment, { children: [mediaStream && (jsx(BaseVideo, { stream: mediaStream, className: clsx('str-video__video-preview', {
+                        'str-video__video-preview--mirror': mirror,
+                        'str-video__video-preview--loading': loading,
+                    }) })), loading && jsx(StartingCameraPreview, {})] }));
+    }
+    else {
+        contents = jsx(DisabledVideoPreview, {});
+    }
+    return (jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
+};
+
+export { VideoPreview };
+//# sourceMappingURL=VideoPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPreview.js","sources":["../../../../../../../src/components/VideoPreview/VideoPreview.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport clsx from 'clsx';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { BaseVideo } from '../../core/components/Video';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst DefaultDisabledVideoPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__disabled-video-preview\">\n      {t('Video is disabled')}\n    </div>\n  );\n};\n\nconst DefaultNoCameraPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__no-camera-preview\">\n      {t('No camera found')}\n    </div>\n  );\n};\n\nexport type VideoPreviewProps = {\n  /**\n   * Additional CSS class name to apply to the root element.\n   */\n  className?: string;\n  /**\n   * Enforces mirroring of the video on the X axis. Defaults to true.\n   */\n  mirror?: boolean;\n  /**\n   * Component rendered when user turns off the video.\n   */\n  DisabledVideoPreview?: ComponentType;\n  /**\n   * Component rendered when no camera devices are available.\n   */\n  NoCameraPreview?: ComponentType;\n  /**\n   * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).\n   */\n  StartingCameraPreview?: ComponentType;\n};\n\nexport const VideoPreview = ({\n  className,\n  mirror = true,\n  DisabledVideoPreview = DefaultDisabledVideoPreview,\n  NoCameraPreview = DefaultNoCameraPreview,\n  StartingCameraPreview = LoadingIndicator,\n}: VideoPreviewProps) => {\n  const { useCameraState } = useCallStateHooks();\n  const { devices, status, isMute, mediaStream } = useCameraState();\n\n  let contents;\n  if (isMute && devices?.length === 0) {\n    contents = <NoCameraPreview />;\n  } else if (status === 'enabled') {\n    const loading = !mediaStream;\n    contents = (\n      <>\n        {mediaStream && (\n          <BaseVideo\n            stream={mediaStream}\n            className={clsx('str-video__video-preview', {\n              'str-video__video-preview--mirror': mirror,\n              'str-video__video-preview--loading': loading,\n            })}\n          />\n        )}\n        {loading && <StartingCameraPreview />}\n      </>\n    );\n  } else {\n    contents = <DisabledVideoPreview />;\n  }\n\n  return (\n    <div className={clsx('str-video__video-preview-container', className)}>\n      {contents}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAMA,MAAM,2BAA2B,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC9D,CAAC,CAAC,mBAAmB,CAAC,EAAA,CACnB;AAEV,CAAC;AAED,MAAM,sBAAsB,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACzD,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACjB;AAEV,CAAC;AAyBM,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,MAAM,GAAG,IAAI,EACb,oBAAoB,GAAG,2BAA2B,EAClD,eAAe,GAAG,sBAAsB,EACxC,qBAAqB,GAAG,gBAAgB,GACtB,KAAI;AACtB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE;AAEjE,IAAA,IAAI,QAAQ;IACZ,IAAI,MAAM,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC,EAAE;AACnC,QAAA,QAAQ,GAAGA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG;IAChC;AAAO,SAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AAC/B,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW;AAC5B,QAAA,QAAQ,IACNC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,WAAW,KACVF,IAAC,SAAS,EAAA,EACR,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,IAAI,CAAC,0BAA0B,EAAE;AAC1C,wBAAA,kCAAkC,EAAE,MAAM;AAC1C,wBAAA,mCAAmC,EAAE,OAAO;qBAC7C,CAAC,EAAA,CACF,CACH,EACA,OAAO,IAAIA,IAAC,qBAAqB,EAAA,EAAA,CAAG,CAAA,EAAA,CACpC,CACJ;IACH;SAAO;AACL,QAAA,QAAQ,GAAGA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG;IACrC;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE,SAAS,CAAC,EAAA,QAAA,EAClE,QAAQ,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/core/components/Audio/Audio.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const Audio = memo(function AudioRender({ participant, trackType = 'audioTrack', ...rest }) {
+    const call = useCall();
+    const [audioElement, setAudioElement] = useState(null);
+    const { userId, sessionId } = participant;
+    useEffect(() => {
+        if (!call || !audioElement)
+            return;
+        const cleanup = call.bindAudioElement(audioElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, sessionId, audioElement, trackType]);
+    return (jsx("audio", { autoPlay: true, ...rest, ref: setAudioElement, "data-user-id": userId, "data-session-id": sessionId, "data-track-type": trackType }));
+});
+Audio.displayName = 'Audio';
+
+export { Audio };
+//# sourceMappingURL=Audio.js.map

package/dist/esm/src/core/components/Audio/Audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Audio.js","sources":["../../../../../../../../src/core/components/Audio/Audio.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, memo, useEffect, useState } from 'react';\nimport {\n  AudioTrackType,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport type AudioProps = ComponentPropsWithoutRef<'audio'> & {\n  /**\n   * The participant whose audio stream we want to play.\n   */\n  participant: StreamVideoParticipant;\n\n  /**\n   * The type of audio stream to play for the given participant.\n   * The default value is `audioTrack`.\n   */\n  trackType?: AudioTrackType;\n};\n\nexport const Audio = memo(function AudioRender({\n  participant,\n  trackType = 'audioTrack',\n  ...rest\n}: AudioProps) {\n  const call = useCall();\n  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(\n    null,\n  );\n  const { userId, sessionId } = participant;\n\n  useEffect(() => {\n    if (!call || !audioElement) return;\n    const cleanup = call.bindAudioElement(audioElement, sessionId, trackType);\n    return () => {\n      cleanup?.();\n    };\n  }, [call, sessionId, audioElement, trackType]);\n\n  return (\n    <audio\n      autoPlay\n      {...rest}\n      ref={setAudioElement}\n      data-user-id={userId}\n      data-session-id={sessionId}\n      data-track-type={trackType}\n    />\n  );\n});\n\nAudio.displayName = 'Audio';\n"],"names":["_jsx"],"mappings":";;;;AAoBO,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,WAAW,CAAC,EAC7C,WAAW,EACX,SAAS,GAAG,YAAY,EACxB,GAAG,IAAI,EACI,EAAA;AACX,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;AACD,IAAA,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW;IAEzC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY;YAAE;AAC5B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AACzE,QAAA,OAAO,MAAK;YACV,OAAO,IAAI;AACb,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAE9C,IAAA,QACEA,GAAA,CAAA,OAAA,EAAA,EACE,QAAQ,EAAA,IAAA,EAAA,GACJ,IAAI,EACR,GAAG,EAAE,eAAe,EAAA,cAAA,EACN,MAAM,EAAA,iBAAA,EACH,SAAS,qBACT,SAAS,EAAA,CAC1B;AAEN,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/src/core/components/Audio/ParticipantsAudio.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
+import { hasAudio, hasScreenShareAudio } from '@stream-io/video-client';
+import { Audio } from './Audio.js';
+
+const ParticipantsAudio = (props) => {
+    const { participants, audioProps } = props;
+    return (jsx(Fragment, { children: participants.map((participant) => {
+            if (participant.isLocalParticipant)
+                return null;
+            const { audioStream, screenShareAudioStream, sessionId } = participant;
+            const hasAudioTrack = hasAudio(participant);
+            const audioTrackElement = hasAudioTrack && audioStream && (jsx(Audio, { ...audioProps, trackType: "audioTrack", participant: participant }));
+            const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+            const screenShareAudioTrackElement = hasScreenShareAudioTrack &&
+                screenShareAudioStream && (jsx(Audio, { ...audioProps, trackType: "screenShareAudioTrack", participant: participant }));
+            return (jsxs(Fragment$1, { children: [audioTrackElement, screenShareAudioTrackElement] }, sessionId));
+        }) }));
+};
+ParticipantsAudio.displayName = 'ParticipantsAudio';
+
+export { ParticipantsAudio };
+//# sourceMappingURL=ParticipantsAudio.js.map

package/dist/esm/src/core/components/Audio/ParticipantsAudio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantsAudio.js","sources":["../../../../../../../../src/core/components/Audio/ParticipantsAudio.tsx"],"sourcesContent":["import { ComponentProps, Fragment } from 'react';\nimport {\n  hasAudio,\n  hasScreenShareAudio,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { Audio } from './Audio';\n\nexport type ParticipantsAudioProps = {\n  /**\n   * The participants to play audio for.\n   */\n  participants: StreamVideoParticipant[];\n\n  /**\n   * Props to pass to the underlying `Audio` components.\n   */\n  audioProps?: ComponentProps<typeof Audio>;\n};\n\nexport const ParticipantsAudio = (props: ParticipantsAudioProps) => {\n  const { participants, audioProps } = props;\n  return (\n    <>\n      {participants.map((participant) => {\n        if (participant.isLocalParticipant) return null;\n        const { audioStream, screenShareAudioStream, sessionId } = participant;\n\n        const hasAudioTrack = hasAudio(participant);\n        const audioTrackElement = hasAudioTrack && audioStream && (\n          <Audio\n            {...audioProps}\n            trackType=\"audioTrack\"\n            participant={participant}\n          />\n        );\n\n        const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n        const screenShareAudioTrackElement = hasScreenShareAudioTrack &&\n          screenShareAudioStream && (\n            <Audio\n              {...audioProps}\n              trackType=\"screenShareAudioTrack\"\n              participant={participant}\n            />\n          );\n\n        return (\n          <Fragment key={sessionId}>\n            {audioTrackElement}\n            {screenShareAudioTrackElement}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n};\n\nParticipantsAudio.displayName = 'ParticipantsAudio';\n"],"names":["_jsx","_jsxs","Fragment"],"mappings":";;;;;AAoBO,MAAM,iBAAiB,GAAG,CAAC,KAA6B,KAAI;AACjE,IAAA,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,KAAK;IAC1C,QACEA,0BACG,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,KAAI;YAChC,IAAI,WAAW,CAAC,kBAAkB;AAAE,gBAAA,OAAO,IAAI;YAC/C,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAAG,WAAW;AAEtE,YAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC;YAC3C,MAAM,iBAAiB,GAAG,aAAa,IAAI,WAAW,KACpDA,IAAC,KAAK,EAAA,EAAA,GACA,UAAU,EACd,SAAS,EAAC,YAAY,EACtB,WAAW,EAAE,WAAW,EAAA,CACxB,CACH;AAED,YAAA,MAAM,wBAAwB,GAAG,mBAAmB,CAAC,WAAW,CAAC;YACjE,MAAM,4BAA4B,GAAG,wBAAwB;AAC3D,gBAAA,sBAAsB,KACpBA,GAAA,CAAC,KAAK,EAAA,EAAA,GACA,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,WAAW,EAAE,WAAW,EAAA,CACxB,CACH;YAEH,QACEC,IAAA,CAACC,UAAQ,EAAA,EAAA,QAAA,EAAA,CACN,iBAAiB,EACjB,4BAA4B,CAAA,EAAA,EAFhB,SAAS,CAGb;QAEf,CAAC,CAAC,EAAA,CACD;AAEP;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}