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

package/dist/esm/src/components/Button/CompositeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeButton.js","sources":["../../../../../../../src/components/Button/CompositeButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport {\n  ComponentProps,\n  ComponentType,\n  forwardRef,\n  PropsWithChildren,\n  ReactElement,\n} from 'react';\nimport { Placement } from '@floating-ui/react';\n\nimport { IconButton } from './IconButton';\nimport { isComponentType } from '../../utilities';\n\nexport type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =\n  PropsWithChildren<{\n    active?: boolean;\n    Menu?: ComponentType | ReactElement | null;\n    caption?: string;\n    className?: string;\n    menuPlacement?: Placement;\n    menuOffset?: number;\n    ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;\n    variant?: 'primary' | 'secondary';\n    onMenuToggle?: (menuShown: boolean) => void;\n  }> &\n    ComponentProps<'button'>;\n\nexport const CompositeButton = forwardRef<\n  HTMLDivElement,\n  IconButtonWithMenuProps\n>(function CompositeButtonRender(\n  {\n    disabled,\n    caption,\n    children,\n    className,\n    active,\n    Menu,\n    menuPlacement,\n    menuOffset,\n    title,\n    ToggleMenuButton = DefaultToggleMenuButton,\n    variant,\n    onClick,\n    onMenuToggle,\n    ...restButtonProps\n  },\n  ref,\n) {\n  return (\n    <div\n      className={clsx('str-video__composite-button', className, {\n        'str-video__composite-button--caption': caption,\n        'str-video__composite-button--menu': Menu,\n      })}\n      title={title}\n      ref={ref}\n    >\n      <div\n        className={clsx('str-video__composite-button__button-group', {\n          'str-video__composite-button__button-group--active': active,\n          'str-video__composite-button__button-group--active-primary':\n            active && variant === 'primary',\n          'str-video__composite-button__button-group--active-secondary':\n            active && variant === 'secondary',\n          'str-video__composite-button__button-group--disabled': disabled,\n        })}\n      >\n        <button\n          type=\"button\"\n          className=\"str-video__composite-button__button\"\n          onClick={(e) => {\n            e.preventDefault();\n            onClick?.(e);\n          }}\n          disabled={disabled}\n          {...restButtonProps}\n        >\n          {children}\n        </button>\n        {Menu && (\n          <MenuToggle\n            offset={menuOffset}\n            placement={menuPlacement}\n            ToggleButton={ToggleMenuButton}\n            onToggle={onMenuToggle}\n          >\n            {isComponentType(Menu) ? <Menu /> : Menu}\n          </MenuToggle>\n        )}\n      </div>\n      {caption && (\n        <div className=\"str-video__composite-button__caption\">{caption}</div>\n      )}\n    </div>\n  );\n});\n\nconst DefaultToggleMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function DefaultToggleMenuButtonRender({ menuShown }, ref) {\n  return (\n    <IconButton\n      className={clsx('str-video__menu-toggle-button', {\n        'str-video__menu-toggle-button--active': menuShown,\n      })}\n      icon={menuShown ? 'caret-down' : 'caret-up'}\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AA4BO,MAAM,eAAe,GAAG,UAAU,CAGvC,SAAS,qBAAqB,CAC9B,EACE,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,UAAU,EACV,KAAK,EACL,gBAAgB,GAAG,uBAAuB,EAC1C,OAAO,EACP,OAAO,EACP,YAAY,EACZ,GAAG,eAAe,EACnB,EACD,GAAG,EAAA;IAEH,QACEA,cACE,SAAS,EAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,EAAE;AACxD,YAAA,sCAAsC,EAAE,OAAO;AAC/C,YAAA,mCAAmC,EAAE,IAAI;AAC1C,SAAA,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAERA,cACE,SAAS,EAAE,IAAI,CAAC,2CAA2C,EAAE;AAC3D,oBAAA,mDAAmD,EAAE,MAAM;AAC3D,oBAAA,2DAA2D,EACzD,MAAM,IAAI,OAAO,KAAK,SAAS;AACjC,oBAAA,6DAA6D,EAC3D,MAAM,IAAI,OAAO,KAAK,WAAW;AACnC,oBAAA,qDAAqD,EAAE,QAAQ;AAChE,iBAAA,CAAC,EAAA,QAAA,EAAA,CAEFC,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qCAAqC,EAC/C,OAAO,EAAE,CAAC,CAAC,KAAI;4BACb,CAAC,CAAC,cAAc,EAAE;AAClB,4BAAA,OAAO,GAAG,CAAC,CAAC;AACd,wBAAA,CAAC,EACD,QAAQ,EAAE,QAAQ,EAAA,GACd,eAAe,EAAA,QAAA,EAElB,QAAQ,EAAA,CACF,EACR,IAAI,KACHA,GAAA,CAAC,UAAU,EAAA,EACT,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,YAAY,EAAA,QAAA,EAErB,eAAe,CAAC,IAAI,CAAC,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,GAAG,IAAI,EAAA,CAC7B,CACd,CAAA,EAAA,CACG,EACL,OAAO,KACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAE,OAAO,EAAA,CAAO,CACtE,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,uBAAuB,GAAG,UAAU,CAGxC,SAAS,6BAA6B,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;IACzD,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAE,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,uCAAuC,EAAE,SAAS;AACnD,SAAA,CAAC,EACF,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,EAC3C,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}

package/dist/esm/src/components/Button/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon/Icon.js';
+
+const IconButton = forwardRef(function IconButtonRender(props, ref) {
+    const { icon, enabled, variant, onClick, className, ...rest } = props;
+    return (jsx("button", { className: clsx('str-video__call-controls__button', className, {
+            [`str-video__call-controls__button--variant-${variant}`]: variant,
+            'str-video__call-controls__button--enabled': enabled,
+        }), onClick: (e) => {
+            e.preventDefault();
+            onClick?.(e);
+        }, ref: ref, ...rest, children: jsx(Icon, { icon: icon }) }));
+});
+
+export { IconButton };
+//# sourceMappingURL=IconButton.js.map

package/dist/esm/src/components/Button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../../../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import { ComponentProps, ForwardedRef, forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { Icon, IconProps } from '../Icon';\n\nexport type ButtonWithIconProps = {\n  enabled?: boolean;\n  variant?: string;\n} & ComponentProps<'button'> &\n  IconProps;\n\nexport const IconButton = forwardRef(function IconButtonRender(\n  props: ButtonWithIconProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const { icon, enabled, variant, onClick, className, ...rest } = props;\n  return (\n    <button\n      className={clsx('str-video__call-controls__button', className, {\n        [`str-video__call-controls__button--variant-${variant}`]: variant,\n        'str-video__call-controls__button--enabled': enabled,\n      })}\n      onClick={(e) => {\n        e.preventDefault();\n        onClick?.(e);\n      }}\n      ref={ref}\n      {...rest}\n    >\n      <Icon icon={icon} />\n    </button>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AAWO,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,gBAAgB,CAC5D,KAA0B,EAC1B,GAAoC,EAAA;AAEpC,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK;IACrE,QACEA,gBACE,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,SAAS,EAAE;AAC7D,YAAA,CAAC,CAAA,0CAAA,EAA6C,OAAO,CAAA,CAAE,GAAG,OAAO;AACjE,YAAA,2CAA2C,EAAE,OAAO;AACrD,SAAA,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,KAAI;YACb,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,OAAO,GAAG,CAAC,CAAC;AACd,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,QAAA,EAERA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,EAAA,CACb;AAEb,CAAC;;;;"}

package/dist/esm/src/components/Button/TextButton.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+
+const TextButton = ({ children, ...rest }) => {
+    return (jsx("button", { ...rest, className: "str-video__text-button", children: children }));
+};
+
+export { TextButton };
+//# sourceMappingURL=TextButton.js.map

package/dist/esm/src/components/Button/TextButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.js","sources":["../../../../../../../src/components/Button/TextButton.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\n\nexport const TextButton = ({\n  children,\n  ...rest\n}: Omit<ComponentProps<'button'>, 'ref' | 'className'>) => {\n  return (\n    <button {...rest} className=\"str-video__text-button\">\n      {children}\n    </button>\n  );\n};\n"],"names":["_jsx"],"mappings":";;AAEO,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,GAAG,IAAI,EAC6C,KAAI;IACxD,QACEA,GAAA,CAAA,QAAA,EAAA,EAAA,GAAY,IAAI,EAAE,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACjD,QAAQ,EAAA,CACF;AAEb;;;;"}

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

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
+    const call = useCall();
+    const handleClick = useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            try {
+                await call.join();
+                onAccept?.();
+            }
+            catch (err) {
+                console.error(`Failed to accept call`, err);
+                onAccept?.(err);
+            }
+        }
+    }, [onClick, onAccept, call]);
+    return (jsx(IconButton, { disabled: disabled, icon: "call-accept", variant: "success", "data-testid": "accept-call-button", onClick: handleClick }));
+};
+
+export { AcceptCallButton };
+//# sourceMappingURL=AcceptCallButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AcceptCallButton.js","sources":["../../../../../../../src/components/CallControls/AcceptCallButton.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback } from 'react';\nimport { IconButton } from '../Button';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport type AcceptCallButtonProps = {\n  disabled?: boolean;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onAccept?: (err?: Error) => void;\n};\n\nexport const AcceptCallButton = ({\n  disabled,\n  onAccept,\n  onClick,\n}: AcceptCallButtonProps) => {\n  const call = useCall();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.join();\n          onAccept?.();\n        } catch (err) {\n          console.error(`Failed to accept call`, err);\n          onAccept?.(err as Error);\n        }\n      }\n    },\n    [onClick, onAccept, call],\n  );\n  return (\n    <IconButton\n      disabled={disabled}\n      icon=\"call-accept\"\n      variant=\"success\"\n      data-testid=\"accept-call-button\"\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAUO,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,OAAO,GACe,KAAI;AAC1B,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,WAAW,GAAyC,WAAW,CACnE,OAAO,CAAC,KAAI;QACV,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,CAAC,CAAC;QACZ;aAAO,IAAI,IAAI,EAAE;AACf,YAAA,IAAI;AACF,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;gBACjB,QAAQ,IAAI;YACd;YAAE,OAAO,GAAG,EAAE;AACZ,gBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,GAAG,CAAC;AAC3C,gBAAA,QAAQ,GAAG,GAAY,CAAC;YAC1B;QACF;IACF,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,CAC1B;IACD,QACEA,IAAC,UAAU,EAAA,EACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAC,SAAS,EAAA,aAAA,EACL,oBAAoB,EAChC,OAAO,EAAE,WAAW,EAAA,CACpB;AAEN;;;;"}

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { OwnCapability } from '@stream-io/video-client';
+import { Restricted } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '@floating-ui/react';
+import { SpeakingWhileMutedNotification } from '../Notification/SpeakingWhileMutedNotification.js';
+import { RecordCallButton } from './RecordCallButton.js';
+import { ReactionsButton } from './ReactionsButton.js';
+import { ScreenShareButton } from './ScreenShareButton.js';
+import { ToggleAudioPublishingButton } from './ToggleAudioButton.js';
+import { ToggleVideoPublishingButton } from './ToggleVideoButton.js';
+import { CancelCallButton } from './CancelCallButton.js';
+
+const CallControls = ({ onLeave }) => (jsxs("div", { className: "str-video__call-controls", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(SpeakingWhileMutedNotification, { children: jsx(ToggleAudioPublishingButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(ToggleVideoPublishingButton, {}) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(ReactionsButton, {}) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(ScreenShareButton, {}) }), jsx(Restricted, { requiredGrants: [
+                OwnCapability.START_RECORD_CALL,
+                OwnCapability.STOP_RECORD_CALL,
+            ], children: jsx(RecordCallButton, {}) }), jsx(CancelCallButton, { onLeave: onLeave })] }));
+
+export { CallControls };
+//# sourceMappingURL=CallControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/components/CallControls/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport { Restricted } from '@stream-io/video-react-bindings';\nimport { SpeakingWhileMutedNotification } from '../Notification';\nimport { RecordCallButton } from './RecordCallButton';\nimport { ReactionsButton } from './ReactionsButton';\nimport { ScreenShareButton } from './ScreenShareButton';\nimport { ToggleAudioPublishingButton } from './ToggleAudioButton';\nimport { ToggleVideoPublishingButton } from './ToggleVideoButton';\nimport { CancelCallButton } from './CancelCallButton';\n\nexport type CallControlsProps = {\n  onLeave?: (err?: Error) => void;\n};\n\nexport const CallControls = ({ onLeave }: CallControlsProps) => (\n  <div className=\"str-video__call-controls\">\n    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>\n      <SpeakingWhileMutedNotification>\n        <ToggleAudioPublishingButton />\n      </SpeakingWhileMutedNotification>\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>\n      <ToggleVideoPublishingButton />\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n      <ReactionsButton />\n    </Restricted>\n    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n      <ScreenShareButton />\n    </Restricted>\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <RecordCallButton />\n    </Restricted>\n    <CancelCallButton onLeave={onLeave} />\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAqB,MACzDA,cAAK,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAAA,QAAA,EACpDA,GAAA,CAAC,8BAA8B,EAAA,EAAA,QAAA,EAC7BA,GAAA,CAAC,2BAA2B,EAAA,EAAA,CAAG,EAAA,CACA,GACtB,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAAA,QAAA,EACpDA,GAAA,CAAC,2BAA2B,EAAA,EAAA,CAAG,EAAA,CACpB,EACbA,GAAA,CAAC,UAAU,IAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,IAAC,eAAe,EAAA,EAAA,CAAG,GACR,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,YACrDA,GAAA,CAAC,iBAAiB,KAAG,EAAA,CACV,EACbA,IAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,gBAAA,aAAa,CAAC,iBAAiB;AAC/B,gBAAA,aAAa,CAAC,gBAAgB;AAC/B,aAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CACT,EACbA,GAAA,CAAC,gBAAgB,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI,CAAA,EAAA,CAClC;;;;"}

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { CallStats } from '../CallStats/CallStats.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { MenuToggle } from '../Menu/MenuToggle.js';
+import { Icon } from '../Icon/Icon.js';
+
+const CallStatsButton = () => (jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton, children: jsx(CallStats, {}) }));
+const ToggleMenuButton = forwardRef(function ToggleMenuButtonRender(props, ref) {
+    const { t } = useI18n();
+    const { caption, menuShown } = props;
+    return (jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsx(Icon, { icon: "stats" }) }));
+});
+
+export { CallStatsButton };
+//# sourceMappingURL=CallStatsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallStatsButton.js","sources":["../../../../../../../src/components/CallControls/CallStatsButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\n\nimport { CallStats } from '../CallStats';\nimport { CompositeButton } from '../Button/';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport { Icon } from '../Icon';\n\nexport type CallStatsButtonProps = {\n  caption?: string;\n};\n\nexport const CallStatsButton = () => (\n  <MenuToggle placement=\"top-end\" ToggleButton={ToggleMenuButton}>\n    <CallStats />\n  </MenuToggle>\n);\n\nconst ToggleMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps<HTMLDivElement> & CallStatsButtonProps\n>(function ToggleMenuButtonRender(props, ref) {\n  const { t } = useI18n();\n  const { caption, menuShown } = props;\n\n  return (\n    <CompositeButton\n      ref={ref}\n      active={menuShown}\n      caption={caption}\n      title={caption || t('Statistics')}\n      data-testid=\"stats-button\"\n    >\n      <Icon icon=\"stats\" />\n    </CompositeButton>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAYO,MAAM,eAAe,GAAG,OAC7BA,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAE,gBAAgB,EAAA,QAAA,EAC5DA,IAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CACF;AAGf,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAA;AAC1C,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK;AAEpC,IAAA,QACEA,GAAA,CAAC,eAAe,EAAA,EACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,YAAY,CAAC,EAAA,aAAA,EACrB,cAAc,EAAA,QAAA,EAE1BA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EAAA,CACL;AAEtB,CAAC,CAAC;;;;"}

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

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useCallback } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCall, Restricted } from '@stream-io/video-react-bindings';
+import { MenuToggle } from '../Menu/MenuToggle.js';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
+import 'clsx';
+import '@floating-ui/react';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+
+const EndCallMenu = (props) => {
+    const { onLeave, onEnd } = props;
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsx(Restricted, { requiredGrants: [OwnCapability.END_CALL], children: jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
+};
+const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
+    const { t } = useI18n();
+    return (jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
+});
+const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
+    const call = useCall();
+    const handleLeave = useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            try {
+                await call.leave();
+                onLeave?.();
+            }
+            catch (err) {
+                console.error(`Failed to leave call`, err);
+                onLeave?.(err);
+            }
+        }
+    }, [onClick, onLeave, call]);
+    const handleEndCall = useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            try {
+                await call.endCall();
+                onLeave?.();
+            }
+            catch (err) {
+                console.error(`Failed to end call`, err);
+                onLeave?.(err);
+            }
+        }
+    }, [onClick, onLeave, call]);
+    return (jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
+};
+const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
+    const call = useCall();
+    const { t } = useI18n();
+    const handleClick = useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            try {
+                await call.leave();
+                onLeave?.();
+            }
+            catch (err) {
+                console.error(`Failed to leave call`, err);
+                onLeave?.(err);
+            }
+        }
+    }, [onClick, onLeave, call]);
+    return (jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: caption ?? t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
+};
+
+export { CancelCallButton, CancelCallConfirmButton };
+//# sourceMappingURL=CancelCallButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CancelCallButton.js","sources":["../../../../../../../src/components/CallControls/CancelCallButton.tsx"],"sourcesContent":["import { forwardRef, MouseEventHandler, useCallback } from 'react';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\n\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\n\nimport { IconButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\n\nconst EndCallMenu = (props: {\n  onLeave: MouseEventHandler<HTMLButtonElement>;\n  onEnd: MouseEventHandler<HTMLButtonElement>;\n}) => {\n  const { onLeave, onEnd } = props;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__end-call__confirmation\">\n      <button\n        className=\"str-video__button str-video__end-call__leave\"\n        type=\"button\"\n        data-testid=\"leave-call-button\"\n        onClick={onLeave}\n      >\n        <Icon\n          className=\"str-video__button__icon str-video__end-call__leave-icon\"\n          icon=\"logout\"\n        />\n        {t('Leave call')}\n      </button>\n      <Restricted requiredGrants={[OwnCapability.END_CALL]}>\n        <button\n          className=\"str-video__button str-video__end-call__end\"\n          type=\"button\"\n          data-testid=\"end-call-for-all-button\"\n          onClick={onEnd}\n        >\n          <Icon\n            className=\"str-video__button__icon str-video__end-call__end-icon\"\n            icon=\"call-end\"\n          />\n          {t('End call for all')}\n        </button>\n      </Restricted>\n    </div>\n  );\n};\n\nconst CancelCallToggleMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <WithTooltip title={t('Leave call')} tooltipDisabled={menuShown}>\n      <IconButton\n        icon={menuShown ? 'close' : 'call-end'}\n        variant={menuShown ? 'active' : 'danger'}\n        data-testid=\"leave-call-button\"\n        ref={ref}\n      />\n    </WithTooltip>\n  );\n});\n\nexport type CancelCallButtonProps = {\n  disabled?: boolean;\n  caption?: string;\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  onLeave?: (err?: Error) => void;\n};\n\nexport const CancelCallConfirmButton = ({\n  onClick,\n  onLeave,\n}: CancelCallButtonProps) => {\n  const call = useCall();\n\n  const handleLeave: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.leave();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to leave call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n\n  const handleEndCall: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.endCall();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to end call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n\n  return (\n    <MenuToggle placement=\"top-start\" ToggleButton={CancelCallToggleMenuButton}>\n      <EndCallMenu onEnd={handleEndCall} onLeave={handleLeave} />\n    </MenuToggle>\n  );\n};\n\nexport const CancelCallButton = ({\n  disabled,\n  caption,\n  onClick,\n  onLeave,\n}: CancelCallButtonProps) => {\n  const call = useCall();\n  const { t } = useI18n();\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    async (e) => {\n      if (onClick) {\n        onClick(e);\n      } else if (call) {\n        try {\n          await call.leave();\n          onLeave?.();\n        } catch (err) {\n          console.error(`Failed to leave call`, err);\n          onLeave?.(err as Error);\n        }\n      }\n    },\n    [onClick, onLeave, call],\n  );\n  return (\n    <IconButton\n      disabled={disabled}\n      icon=\"call-end\"\n      variant=\"danger\"\n      title={caption ?? t('Leave call')}\n      data-testid=\"cancel-call-button\"\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCall, Restricted } from '@stream-io/video-react-bindings';
+import { useMenuContext, MenuToggle, MenuVisualType } from '../Menu/MenuToggle.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { defaultEmojiReactionMap } from '../Reaction/Reaction.js';
+import { Icon } from '../Icon/Icon.js';
+import '@floating-ui/react';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+
+const defaultReactions = [
+    {
+        type: 'reaction',
+        emoji_code: ':like:',
+    },
+    {
+        // TODO OL: use `prompt` type?
+        type: 'raised-hand',
+        emoji_code: ':raise-hand:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':fireworks:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':dislike:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':heart:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':smile:',
+    },
+];
+const ReactionsButton = ({ reactions = defaultReactions, }) => {
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: MenuVisualType.MENU, children: jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
+};
+const ToggleReactionsMenuButton = forwardRef(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
+    const { t } = useI18n();
+    return (jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsx(Icon, { icon: "reactions" }) }) }));
+});
+const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
+    const call = useCall();
+    const { close } = useMenuContext();
+    return (jsx("div", { className: clsx('str-video__reactions-menu', {
+            'str-video__reactions-menu--horizontal': layout === 'horizontal',
+            'str-video__reactions-menu--vertical': layout === 'vertical',
+        }), children: reactions.map((reaction) => (jsx("button", { type: "button", className: "str-video__reactions-menu__button", onClick: () => {
+                call?.sendReaction(reaction);
+                close?.();
+            }, children: reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code] }, reaction.emoji_code))) }));
+};
+
+export { DefaultReactionsMenu, ReactionsButton, defaultReactions };
+//# sourceMappingURL=ReactionsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionsButton.js","sources":["../../../../../../../src/components/CallControls/ReactionsButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\n\nimport { OwnCapability, StreamReaction } from '@stream-io/video-client';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\n\nimport {\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n  useMenuContext,\n} from '../Menu';\nimport { CompositeButton } from '../Button';\nimport { defaultEmojiReactionMap } from '../Reaction';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\n\nexport const defaultReactions: StreamReaction[] = [\n  {\n    type: 'reaction',\n    emoji_code: ':like:',\n  },\n  {\n    // TODO OL: use `prompt` type?\n    type: 'raised-hand',\n    emoji_code: ':raise-hand:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':fireworks:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':dislike:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':heart:',\n  },\n  {\n    type: 'reaction',\n    emoji_code: ':smile:',\n  },\n];\n\nexport interface ReactionsButtonProps {\n  reactions?: StreamReaction[];\n}\n\nexport const ReactionsButton = ({\n  reactions = defaultReactions,\n}: ReactionsButtonProps) => {\n  return (\n    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n      <MenuToggle\n        placement=\"top\"\n        ToggleButton={ToggleReactionsMenuButton}\n        visualType={MenuVisualType.MENU}\n      >\n        <DefaultReactionsMenu reactions={reactions} />\n      </MenuToggle>\n    </Restricted>\n  );\n};\n\nconst ToggleReactionsMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps\n>(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <WithTooltip title={t('Reactions')} tooltipDisabled={menuShown}>\n      <CompositeButton ref={ref} active={menuShown} variant=\"primary\">\n        <Icon icon=\"reactions\" />\n      </CompositeButton>\n    </WithTooltip>\n  );\n});\n\nexport interface DefaultReactionsMenuProps {\n  reactions: StreamReaction[];\n  layout?: 'horizontal' | 'vertical';\n}\n\nexport const DefaultReactionsMenu = ({\n  reactions,\n  layout = 'horizontal',\n}: DefaultReactionsMenuProps) => {\n  const call = useCall();\n  const { close } = useMenuContext();\n  return (\n    <div\n      className={clsx('str-video__reactions-menu', {\n        'str-video__reactions-menu--horizontal': layout === 'horizontal',\n        'str-video__reactions-menu--vertical': layout === 'vertical',\n      })}\n    >\n      {reactions.map((reaction) => (\n        <button\n          key={reaction.emoji_code}\n          type=\"button\"\n          className=\"str-video__reactions-menu__button\"\n          onClick={() => {\n            call?.sendReaction(reaction);\n            close?.();\n          }}\n        >\n          {reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code]}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,gBAAgB,GAAqB;AAChD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACD,IAAA;;AAEE,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,UAAU,EAAE,cAAc;AAC3B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,aAAa;AAC1B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA;;AAOI,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,GAAG,gBAAgB,GACP,KAAI;AACzB,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAC,UAAU,EAAA,EACT,SAAS,EAAC,KAAK,EACf,YAAY,EAAE,yBAAyB,EACvC,UAAU,EAAE,cAAc,CAAC,IAAI,EAAA,QAAA,EAE/BA,GAAA,CAAC,oBAAoB,EAAA,EAAC,SAAS,EAAE,SAAS,GAAI,EAAA,CACnC,EAAA,CACF;AAEjB;AAEA,MAAM,yBAAyB,GAAG,UAAU,CAG1C,SAAS,+BAA+B,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAC3D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,WAAW,IAAC,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,eAAe,EAAE,SAAS,YAC5DA,GAAA,CAAC,eAAe,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAC,SAAS,EAAA,QAAA,EAC7DA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,GAAG,EAAA,CACT,EAAA,CACN;AAElB,CAAC,CAAC;AAOK,MAAM,oBAAoB,GAAG,CAAC,EACnC,SAAS,EACT,MAAM,GAAG,YAAY,GACK,KAAI;AAC9B,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE;AAClC,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE;YAC3C,uCAAuC,EAAE,MAAM,KAAK,YAAY;YAChE,qCAAqC,EAAE,MAAM,KAAK,UAAU;SAC7D,CAAC,EAAA,QAAA,EAED,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,MACtBA,gBAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC;gBAC5B,KAAK,IAAI;YACX,CAAC,EAAA,QAAA,EAEA,QAAQ,CAAC,UAAU,IAAI,uBAAuB,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAA,EAR/D,QAAQ,CAAC,UAAU,CASjB,CACV,CAAC,EAAA,CACE;AAEV;;;;"}

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

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { useI18n, useToggleCallRecording, Restricted } from '@stream-io/video-react-bindings';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
+import { MenuToggle, MenuVisualType, useMenuContext } from '../Menu/MenuToggle.js';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+import 'clsx';
+import '@floating-ui/react';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+import { createCallControlHandler } from '../../utilities/callControlHandler.js';
+
+const RecordEndConfirmation = (props) => {
+    const { t } = useI18n();
+    const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
+    const { close } = useMenuContext();
+    const handleClick = createCallControlHandler(props, toggleCallRecording);
+    return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+};
+const ToggleEndRecordingMenuButton = forwardRef(function ToggleEndRecordingMenuButtonRender(props, ref) {
+    return (jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsx(Icon, { icon: "recording-off" }) }));
+});
+const RecordCallConfirmationButton = (props) => {
+    const { caption } = props;
+    const { t } = useI18n();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    const handleClick = createCallControlHandler(props, toggleCallRecording);
+    if (isCallRecordingInProgress) {
+        return (jsx(Restricted, { requiredGrants: [
+                OwnCapability.START_RECORD_CALL,
+                OwnCapability.STOP_RECORD_CALL,
+            ], children: jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsx(RecordEndConfirmation, { onError: props.onError }) }) }));
+    }
+    const title = isAwaitingResponse
+        ? t('Waiting for recording to start...')
+        : (caption ?? t('Record call'));
+    return (jsx(Restricted, { requiredGrants: [
+            OwnCapability.START_RECORD_CALL,
+            OwnCapability.STOP_RECORD_CALL,
+        ], children: jsx(WithTooltip, { title: title, children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: "recording-off" })) }) }) }));
+};
+const RecordCallButton = (props) => {
+    const { caption } = props;
+    const { t } = useI18n();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    const handleClick = createCallControlHandler(props, toggleCallRecording);
+    let title = caption ?? t('Record call');
+    if (isAwaitingResponse) {
+        title = isCallRecordingInProgress
+            ? t('Waiting for recording to stop...')
+            : t('Waiting for recording to start...');
+    }
+    return (jsx(Restricted, { requiredGrants: [
+            OwnCapability.START_RECORD_CALL,
+            OwnCapability.STOP_RECORD_CALL,
+        ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": isCallRecordingInProgress
+                ? 'recording-stop-button'
+                : 'recording-start-button', title: title, onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off' })) }) }));
+};
+
+export { RecordCallButton, RecordCallConfirmationButton };
+//# sourceMappingURL=RecordCallButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecordCallButton.js","sources":["../../../../../../../src/components/CallControls/RecordCallButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useI18n,\n  useToggleCallRecording,\n} from '@stream-io/video-react-bindings';\nimport { CompositeButton } from '../Button/';\nimport { Icon } from '../Icon';\nimport {\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n  useMenuContext,\n} from '../Menu';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { WithTooltip } from '../Tooltip';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type RecordCallButtonProps = PropsWithErrorHandler<{\n  caption?: string;\n}>;\n\nconst RecordEndConfirmation = (props: PropsWithErrorHandler) => {\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();\n\n  const { close } = useMenuContext();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  return (\n    <div className=\"str-video__end-recording__confirmation\">\n      <div className=\"str-video__end-recording__header\">\n        <Icon icon=\"recording-on\" />\n        <h2 className=\"str-video__end-recording__heading\">\n          {t('End recording')}\n        </h2>\n      </div>\n      <p className=\"str-video__end-recording__description\">\n        {t('Are you sure you want end the recording?')}\n      </p>\n      <div className=\"str-video__end-recording__actions\">\n        <CompositeButton variant=\"secondary\" onClick={close}>\n          {t('Cancel')}\n        </CompositeButton>\n        <CompositeButton\n          variant=\"primary\"\n          onClick={isAwaitingResponse ? undefined : handleClick}\n        >\n          {isAwaitingResponse ? <LoadingIndicator /> : t('End recording')}\n        </CompositeButton>\n      </div>\n    </div>\n  );\n};\n\nconst ToggleEndRecordingMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps\n>(function ToggleEndRecordingMenuButtonRender(props, ref) {\n  return (\n    <CompositeButton\n      ref={ref}\n      active={true}\n      variant=\"secondary\"\n      data-testid=\"recording-stop-button\"\n    >\n      <Icon icon=\"recording-off\" />\n    </CompositeButton>\n  );\n});\n\nexport const RecordCallConfirmationButton = (\n  props: PropsWithErrorHandler<{ caption?: string }>,\n) => {\n  const { caption } = props;\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =\n    useToggleCallRecording();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  if (isCallRecordingInProgress) {\n    return (\n      <Restricted\n        requiredGrants={[\n          OwnCapability.START_RECORD_CALL,\n          OwnCapability.STOP_RECORD_CALL,\n        ]}\n      >\n        <MenuToggle\n          ToggleButton={ToggleEndRecordingMenuButton}\n          visualType={MenuVisualType.PORTAL}\n        >\n          <RecordEndConfirmation onError={props.onError} />\n        </MenuToggle>\n      </Restricted>\n    );\n  }\n\n  const title = isAwaitingResponse\n    ? t('Waiting for recording to start...')\n    : (caption ?? t('Record call'));\n\n  return (\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <WithTooltip title={title}>\n        <CompositeButton\n          active={isCallRecordingInProgress}\n          caption={caption}\n          variant=\"secondary\"\n          data-testid=\"recording-start-button\"\n          onClick={isAwaitingResponse ? undefined : handleClick}\n        >\n          {isAwaitingResponse ? (\n            <LoadingIndicator />\n          ) : (\n            <Icon icon=\"recording-off\" />\n          )}\n        </CompositeButton>\n      </WithTooltip>\n    </Restricted>\n  );\n};\n\nexport const RecordCallButton = (props: RecordCallButtonProps) => {\n  const { caption } = props;\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =\n    useToggleCallRecording();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  let title = caption ?? t('Record call');\n\n  if (isAwaitingResponse) {\n    title = isCallRecordingInProgress\n      ? t('Waiting for recording to stop...')\n      : t('Waiting for recording to start...');\n  }\n\n  return (\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <CompositeButton\n        active={isCallRecordingInProgress}\n        caption={caption}\n        variant=\"secondary\"\n        data-testid={\n          isCallRecordingInProgress\n            ? 'recording-stop-button'\n            : 'recording-start-button'\n        }\n        title={title}\n        onClick={isAwaitingResponse ? undefined : handleClick}\n      >\n        {isAwaitingResponse ? (\n          <LoadingIndicator />\n        ) : (\n          <Icon\n            icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}\n          />\n        )}\n      </CompositeButton>\n    </Restricted>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,GAAG,CAAC,KAA4B,KAAI;AAC7D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,sBAAsB,EAAE;AAE5E,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE;IAElC,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,CAAC;IAExE,QACEA,cAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CC,IAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,EAC5BA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAC9C,CAAC,CAAC,eAAe,CAAC,EAAA,CAChB,CAAA,EAAA,CACD,EACNA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACjD,CAAC,CAAC,0CAA0C,CAAC,GAC5C,EACJD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,GAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAChD,CAAC,CAAC,QAAQ,CAAC,EAAA,CACI,EAClBA,GAAA,CAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,WAAW,YAEpD,kBAAkB,GAAGA,GAAA,CAAC,gBAAgB,KAAG,GAAG,CAAC,CAAC,eAAe,CAAC,EAAA,CAC/C,CAAA,EAAA,CACd,CAAA,EAAA,CACF;AAEV,CAAC;AAED,MAAM,4BAA4B,GAAG,UAAU,CAG7C,SAAS,kCAAkC,CAAC,KAAK,EAAE,GAAG,EAAA;IACtD,QACEA,GAAA,CAAC,eAAe,EAAA,EACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EAAA,aAAA,EACP,uBAAuB,EAAA,QAAA,EAEnCA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,eAAe,EAAA,CAAG,EAAA,CACb;AAEtB,CAAC,CAAC;AAEK,MAAM,4BAA4B,GAAG,CAC1C,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,GAC1E,sBAAsB,EAAE;IAE1B,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,CAAC;IAExE,IAAI,yBAAyB,EAAE;AAC7B,QAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,gBAAA,aAAa,CAAC,iBAAiB;AAC/B,gBAAA,aAAa,CAAC,gBAAgB;aAC/B,EAAA,QAAA,EAEDA,GAAA,CAAC,UAAU,EAAA,EACT,YAAY,EAAE,4BAA4B,EAC1C,UAAU,EAAE,cAAc,CAAC,MAAM,YAEjCA,GAAA,CAAC,qBAAqB,EAAA,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,EAAA,CACtC,EAAA,CACF;IAEjB;IAEA,MAAM,KAAK,GAAG;AACZ,UAAE,CAAC,CAAC,mCAAmC;WACpC,OAAO,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;AAEjC,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,YAAA,aAAa,CAAC,iBAAiB;AAC/B,YAAA,aAAa,CAAC,gBAAgB;AAC/B,SAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACvBA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,WAAW,EAAA,aAAA,EACP,wBAAwB,EACpC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,WAAW,EAAA,QAAA,EAEpD,kBAAkB,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,KAEpBA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,eAAe,EAAA,CAAG,CAC9B,EAAA,CACe,EAAA,CACN,EAAA,CACH;AAEjB;AAEO,MAAM,gBAAgB,GAAG,CAAC,KAA4B,KAAI;AAC/D,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,GAC1E,sBAAsB,EAAE;IAE1B,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,CAAC;IAExE,IAAI,KAAK,GAAG,OAAO,IAAI,CAAC,CAAC,aAAa,CAAC;IAEvC,IAAI,kBAAkB,EAAE;AACtB,QAAA,KAAK,GAAG;AACN,cAAE,CAAC,CAAC,kCAAkC;AACtC,cAAE,CAAC,CAAC,mCAAmC,CAAC;IAC5C;AAEA,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,YAAA,aAAa,CAAC,iBAAiB;AAC/B,YAAA,aAAa,CAAC,gBAAgB;AAC/B,SAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,WAAW,iBAEjB;AACE,kBAAE;kBACA,wBAAwB,EAE9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,WAAW,YAEpD,kBAAkB,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,KAEpBA,IAAC,IAAI,EAAA,EACH,IAAI,EAAE,yBAAyB,GAAG,cAAc,GAAG,eAAe,GAClE,CACH,EAAA,CACe,EAAA,CACP;AAEjB;;;;"}

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

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { RequestPermissionRequestPermissionsEnum, OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import 'react';
+import 'clsx';
+import '@floating-ui/react';
+import { useRequestPermission } from '../../hooks/useRequestPermission.js';
+import { PermissionNotification } from '../Notification/PermissionNotification.js';
+import { Icon } from '../Icon/Icon.js';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+import { createCallControlHandler } from '../../utilities/callControlHandler.js';
+
+const ScreenShareButton = (props) => {
+    const { t } = useI18n();
+    const { caption, optimisticUpdates } = props;
+    const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = useCallStateHooks();
+    const isSomeoneScreenSharing = useHasOngoingScreenShare();
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(RequestPermissionRequestPermissionsEnum.SCREENSHARE);
+    const callSettings = useCallSettings();
+    const isScreenSharingAllowed = callSettings?.screensharing.enabled;
+    const { screenShare, optionsAwareIsMute, isTogglePending } = useScreenShareState({
+        optimisticUpdates,
+    });
+    const amIScreenSharing = !optionsAwareIsMute;
+    const disableScreenShareButton = (!amIScreenSharing &&
+        (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||
+        (!optimisticUpdates && isTogglePending);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await screenShare.toggle();
+        }
+    });
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsx(WithTooltip, { title: caption ?? t('Share screen'), children: jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: "primary", "data-testid": isSomeoneScreenSharing
+                        ? 'screen-share-stop-button'
+                        : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
+};
+
+export { ScreenShareButton };
+//# sourceMappingURL=ScreenShareButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenShareButton.js","sources":["../../../../../../../src/components/CallControls/ScreenShareButton.tsx"],"sourcesContent":["import {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n} from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n  UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport { CompositeButton } from '../Button/';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport {\n  PropsWithErrorHandler,\n  createCallControlHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ScreenShareButtonProps = PropsWithErrorHandler<\n  {\n    caption?: string;\n  } & UseInputMediaDeviceOptions\n>;\n\nexport const ScreenShareButton = (props: ScreenShareButtonProps) => {\n  const { t } = useI18n();\n  const { caption, optimisticUpdates } = props;\n\n  const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } =\n    useCallStateHooks();\n  const isSomeoneScreenSharing = useHasOngoingScreenShare();\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SCREENSHARE);\n\n  const callSettings = useCallSettings();\n  const isScreenSharingAllowed = callSettings?.screensharing.enabled;\n\n  const { screenShare, optionsAwareIsMute, isTogglePending } =\n    useScreenShareState({\n      optimisticUpdates,\n    });\n  const amIScreenSharing = !optionsAwareIsMute;\n  const disableScreenShareButton =\n    (!amIScreenSharing &&\n      (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||\n    (!optimisticUpdates && isTogglePending);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await screenShare.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n      <PermissionNotification\n        permission={OwnCapability.SCREENSHARE}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t('You can now share your screen.')}\n        messageAwaitingApproval={t('Awaiting for an approval to share screen.')}\n        messageRevoked={t('You can no longer share your screen.')}\n      >\n        <WithTooltip title={caption ?? t('Share screen')}>\n          <CompositeButton\n            active={isSomeoneScreenSharing || amIScreenSharing}\n            caption={caption}\n            variant=\"primary\"\n            data-testid={\n              isSomeoneScreenSharing\n                ? 'screen-share-stop-button'\n                : 'screen-share-start-button'\n            }\n            disabled={disableScreenShareButton}\n            onClick={handleClick}\n          >\n            <Icon\n              icon={\n                isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'\n              }\n            />\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,iBAAiB,GAAG,CAAC,KAA6B,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,KAAK;IAE5C,MAAM,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,eAAe,EAAE,GACtE,iBAAiB,EAAE;AACrB,IAAA,MAAM,sBAAsB,GAAG,wBAAwB,EAAE;AACzD,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,GAC9D,oBAAoB,CAAC,uCAAuC,CAAC,WAAW,CAAC;AAE3E,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,sBAAsB,GAAG,YAAY,EAAE,aAAa,CAAC,OAAO;IAElE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,GACxD,mBAAmB,CAAC;QAClB,iBAAiB;AAClB,KAAA,CAAC;AACJ,IAAA,MAAM,gBAAgB,GAAG,CAAC,kBAAkB;AAC5C,IAAA,MAAM,wBAAwB,GAC5B,CAAC,CAAC,gBAAgB;AAChB,SAAC,sBAAsB,IAAI,sBAAsB,KAAK,KAAK,CAAC;AAC9D,SAAC,CAAC,iBAAiB,IAAI,eAAe,CAAC;IACzC,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,YAAW;QAC7D,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,iBAAiB,EAAE;QAC3B;aAAO;AACL,YAAA,MAAM,WAAW,CAAC,MAAM,EAAE;QAC5B;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAAA,QAAA,EACrDA,GAAA,CAAC,sBAAsB,IACrB,UAAU,EAAE,aAAa,CAAC,WAAW,EACrC,kBAAkB,EAAE,oBAAoB,EACxC,eAAe,EAAE,CAAC,CAAC,gCAAgC,CAAC,EACpD,uBAAuB,EAAE,CAAC,CAAC,2CAA2C,CAAC,EACvE,cAAc,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAA,QAAA,EAEzDA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,cAAc,CAAC,EAAA,QAAA,EAC9CA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,sBAAsB,IAAI,gBAAgB,EAClD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,SAAS,iBAEf;AACE,0BAAE;AACF,0BAAE,2BAA2B,EAEjC,QAAQ,EAAE,wBAAwB,EAClC,OAAO,EAAE,WAAW,EAAA,QAAA,EAEpBA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EACF,sBAAsB,GAAG,iBAAiB,GAAG,kBAAkB,EAAA,CAEjE,EAAA,CACc,EAAA,CACN,EAAA,CACS,EAAA,CACd;AAEjB;;;;"}

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SfuModels, RequestPermissionRequestPermissionsEnum, OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+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 { DeviceSelectorAudioInput } from '../DeviceSettings/DeviceSelectorAudio.js';
+import { PermissionNotification } from '../Notification/PermissionNotification.js';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+import { createCallControlHandler } from '../../utilities/callControlHandler.js';
+
+const ToggleAudioPreviewButton = (props) => {
+    const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { t } = useI18n();
+    const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
+    const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.AUDIO);
+    const [tooltipDisabled, setTooltipDisabled] = useState(false);
+    const handleClick = createCallControlHandler(props, () => microphone.toggle());
+    return (jsx(WithTooltip, { title: !hasBrowserPermission
+            ? t('Check your browser audio permissions')
+            : isSystemMuted
+                ? t('Microphone is paused by your system')
+                : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
+                ? 'preview-audio-unmute-button'
+                : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                setTooltipDisabled(shown);
+                onMenuToggle?.(shown);
+            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio 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('Microphone is paused by your system'), children: "!" }))] }) }));
+};
+const ToggleAudioPublishingButton = (props) => {
+    const { t } = useI18n();
+    const { caption, Menu = jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_AUDIO);
+    const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
+    const { microphone, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useMicrophoneState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.AUDIO);
+    const [tooltipDisabled, setTooltipDisabled] = useState(false);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await microphone.toggle();
+        }
+    });
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(PermissionNotification, { permission: OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsx(WithTooltip, { title: !hasPermission
+                    ? t('You have no permission to share your audio')
+                    : !hasBrowserPermission
+                        ? t('Check your browser mic permissions')
+                        : isSystemMuted
+                            ? t('Microphone is paused by your system')
+                            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        !hasPermission ||
+                        // disable button while the toggle action is pending when not using optimistic updates
+                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                        setTooltipDisabled(shown);
+                        onMenuToggle?.(shown);
+                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (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 && (jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }) }) }));
+};
+
+export { ToggleAudioPreviewButton, ToggleAudioPublishingButton };
+//# sourceMappingURL=ToggleAudioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleAudioButton.js","sources":["../../../../../../../src/components/CallControls/ToggleAudioButton.tsx"],"sourcesContent":["import {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n  SfuModels,\n} from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n  type UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport { CompositeButton, IconButtonWithMenuProps } from '../Button';\nimport { DeviceSelectorAudioInput } 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 ToggleAudioPreviewButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleAudioPreviewButton = (\n  props: ToggleAudioPreviewButtonProps,\n) => {\n  const {\n    caption,\n    Menu = DeviceSelectorAudioInput,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n  const { t } = useI18n();\n  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();\n  const {\n    microphone,\n    hasBrowserPermission,\n    isPromptingPermission,\n    optionsAwareIsMute,\n    isTogglePending,\n  } = useMicrophoneState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.AUDIO,\n  );\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, () =>\n    microphone.toggle(),\n  );\n\n  return (\n    <WithTooltip\n      title={\n        !hasBrowserPermission\n          ? t('Check your browser audio permissions')\n          : isSystemMuted\n            ? t('Microphone is paused by your system')\n            : (caption ?? t('Mic'))\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        disabled={\n          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)\n        }\n        data-testid={\n          optionsAwareIsMute\n            ? 'preview-audio-unmute-button'\n            : 'preview-audio-mute-button'\n        }\n        onClick={handleClick}\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        {...restCompositeButtonProps}\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon={!optionsAwareIsMute ? 'mic' : 'mic-off'} />\n        {!hasBrowserPermission && (\n          <span\n            className=\"str-video__no-media-permission\"\n            title={t('Check your browser audio 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('Microphone is paused by your system')}\n            children=\"!\"\n          />\n        )}\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n\nexport type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleAudioPublishingButton = (\n  props: ToggleAudioPublishingButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = <DeviceSelectorAudioInput visualType=\"list\" />,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_AUDIO);\n\n  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();\n  const {\n    microphone,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n    optionsAwareIsMute,\n  } = useMicrophoneState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.AUDIO,\n  );\n\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await microphone.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>\n      <PermissionNotification\n        permission={OwnCapability.SEND_AUDIO}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t('You can now speak.')}\n        messageAwaitingApproval={t('Awaiting for an approval to speak.')}\n        messageRevoked={t('You can no longer speak.')}\n      >\n        <WithTooltip\n          title={\n            !hasPermission\n              ? t('You have no permission to share your audio')\n              : !hasBrowserPermission\n                ? t('Check your browser mic permissions')\n                : isSystemMuted\n                  ? t('Microphone is paused by your system')\n                  : (caption ?? t('Mic'))\n          }\n          tooltipDisabled={tooltipDisabled}\n        >\n          <CompositeButton\n            active={optionsAwareIsMute}\n            caption={caption}\n            variant=\"secondary\"\n            disabled={\n              !hasBrowserPermission ||\n              !hasPermission ||\n              // disable button while the toggle action is pending when not using optimistic updates\n              (!optimisticUpdates && isTogglePending)\n            }\n            data-testid={\n              optionsAwareIsMute ? 'audio-unmute-button' : 'audio-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 ? 'mic-off' : 'mic'} />\n            {(!hasBrowserPermission || !hasPermission) && (\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 && hasBrowserPermission && hasPermission && (\n              <span\n                className=\"str-video__system-muted\"\n                title={t('Microphone 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/CallControls/ToggleAudioOutputButton.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/IconButton.js';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { Icon } from '../Icon/Icon.js';
+import { useState } from 'react';
+import '@stream-io/video-client';
+import '../DeviceSettings/DeviceSettings.js';
+import 'clsx';
+import '@floating-ui/react';
+import '../DropdownSelect/DropdownSelect.js';
+import '../Menu/MenuToggle.js';
+import { DeviceSelectorAudioOutput } from '../DeviceSettings/DeviceSelectorAudio.js';
+import { WithTooltip } from '../Tooltip/WithTooltip.js';
+
+const ToggleAudioOutputButton = (props) => {
+    const { t } = useI18n();
+    const { caption, Menu = DeviceSelectorAudioOutput, menuPlacement = 'top', onMenuToggle, } = props;
+    const [tooltipDisabled, setTooltipDisabled] = useState(false);
+    return (jsx(WithTooltip, { title: caption || t('Speakers'), tooltipDisabled: tooltipDisabled, children: jsx(CompositeButton, { Menu: Menu, menuPlacement: menuPlacement, caption: caption, "data-testid": "audio-output-button", onMenuToggle: (shown) => {
+                setTooltipDisabled(shown);
+                onMenuToggle?.(shown);
+            }, children: jsx(Icon, { icon: "speaker" }) }) }));
+};
+
+export { ToggleAudioOutputButton };
+//# sourceMappingURL=ToggleAudioOutputButton.js.map