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

package/dist/esm/embedded.js

@@ -0,0 +1,3 @@
+export { EmbeddedCall } from './src/embedded/call/EmbeddedCall.js';
+export { EmbeddedLivestream } from './src/embedded/livestream/EmbeddedLivestream.js';
+//# sourceMappingURL=embedded.js.map

package/dist/esm/embedded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"embedded.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/index.js

@@ -0,0 +1,92 @@
+import { setSdkInfo, SfuModels } from '@stream-io/video-client';
+export * from '@stream-io/video-client';
+export * from '@stream-io/video-react-bindings';
+export { Audio } from './src/core/components/Audio/Audio.js';
+export { ParticipantsAudio } from './src/core/components/Audio/ParticipantsAudio.js';
+export { ParticipantActionsContextMenu } from './src/core/components/ParticipantView/ParticipantActionsContextMenu.js';
+export { ParticipantView } from './src/core/components/ParticipantView/ParticipantView.js';
+export { ParticipantViewContext, useParticipantViewContext } from './src/core/components/ParticipantView/ParticipantViewContext.js';
+export { DefaultAudioBlockedNotification, DefaultParticipantViewUI, DefaultScreenShareOverlay, ParticipantDetails, SpeechIndicator } from './src/core/components/ParticipantView/DefaultParticipantViewUI.js';
+export { StreamCall } from './src/core/components/StreamCall/StreamCall.js';
+export { StreamVideo } from './src/core/components/StreamVideo/StreamVideo.js';
+export { BaseVideo } from './src/core/components/Video/BaseVideo.js';
+export { Video } from './src/core/components/Video/Video.js';
+export { BackstageLayout, LivestreamLayout } from './src/core/components/CallLayout/LivestreamLayout.js';
+export { PaginatedGridLayout } from './src/core/components/CallLayout/PaginatedGridLayout.js';
+export { SpeakerLayout } from './src/core/components/CallLayout/SpeakerLayout.js';
+export { PipLayout } from './src/core/components/CallLayout/PipLayout/index.js';
+export { useFilteredParticipants } from './src/core/components/CallLayout/hooks.js';
+export { useTrackElementVisibility } from './src/core/hooks/useTrackElementVisibility.js';
+export { Avatar, AvatarFallback } from './src/components/Avatar/Avatar.js';
+export { BackgroundFiltersProvider, useBackgroundFilters } from './src/components/BackgroundFilters/BackgroundFiltersProvider.js';
+export { CompositeButton } from './src/components/Button/CompositeButton.js';
+export { IconButton } from './src/components/Button/IconButton.js';
+export { TextButton } from './src/components/Button/TextButton.js';
+export { AcceptCallButton } from './src/components/CallControls/AcceptCallButton.js';
+export { CallControls } from './src/components/CallControls/CallControls.js';
+export { CallStatsButton } from './src/components/CallControls/CallStatsButton.js';
+export { CancelCallButton, CancelCallConfirmButton } from './src/components/CallControls/CancelCallButton.js';
+export { DefaultReactionsMenu, ReactionsButton, defaultReactions } from './src/components/CallControls/ReactionsButton.js';
+export { RecordCallButton, RecordCallConfirmationButton } from './src/components/CallControls/RecordCallButton.js';
+export { ScreenShareButton } from './src/components/CallControls/ScreenShareButton.js';
+export { ToggleAudioPreviewButton, ToggleAudioPublishingButton } from './src/components/CallControls/ToggleAudioButton.js';
+export { ToggleAudioOutputButton } from './src/components/CallControls/ToggleAudioOutputButton.js';
+export { ToggleVideoPreviewButton, ToggleVideoPublishingButton } from './src/components/CallControls/ToggleVideoButton.js';
+export { CallParticipantsList } from './src/components/CallParticipantsList/CallParticipantsList.js';
+export { CallParticipantListing } from './src/components/CallParticipantsList/CallParticipantListing.js';
+export { CallParticipantListingItem } from './src/components/CallParticipantsList/CallParticipantListingItem.js';
+export { CallPreview } from './src/components/CallPreview/CallPreview.js';
+export { CallRecordingList } from './src/components/CallRecordingList/CallRecordingList.js';
+export { CallRecordingListHeader } from './src/components/CallRecordingList/CallRecordingListHeader.js';
+export { CallRecordingListItem } from './src/components/CallRecordingList/CallRecordingListItem.js';
+export { EmptyCallRecordingListing } from './src/components/CallRecordingList/EmptyCallRecordingListing.js';
+export { LoadingCallRecordingListing } from './src/components/CallRecordingList/LoadingCallRecordingListing.js';
+export { CallStats, StatCard } from './src/components/CallStats/CallStats.js';
+export { AudioVolumeIndicator } from './src/components/DeviceSettings/AudioVolumeIndicator.js';
+export { DeviceSettings } from './src/components/DeviceSettings/DeviceSettings.js';
+export { DeviceSelector } from './src/components/DeviceSettings/DeviceSelector.js';
+export { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from './src/components/DeviceSettings/DeviceSelectorAudio.js';
+export { DeviceSelectorVideo } from './src/components/DeviceSettings/DeviceSelectorVideo.js';
+export { SpeakerTest } from './src/components/DeviceSettings/SpeakerTest.js';
+export { DropDownSelect, DropDownSelectOption } from './src/components/DropdownSelect/DropdownSelect.js';
+export { Icon } from './src/components/Icon/Icon.js';
+export { LoadingIndicator } from './src/components/LoadingIndicator/LoadingIndicator.js';
+export { MenuToggle, MenuVisualType, useMenuContext } from './src/components/Menu/MenuToggle.js';
+export { GenericMenu, GenericMenuButtonItem } from './src/components/Menu/GenericMenu.js';
+export { NoiseCancellationProvider, useNoiseCancellation } from './src/components/NoiseCancellation/NoiseCancellationProvider.js';
+export { Notification } from './src/components/Notification/Notification.js';
+export { PermissionNotification } from './src/components/Notification/PermissionNotification.js';
+export { SpeakingWhileMutedNotification } from './src/components/Notification/SpeakingWhileMutedNotification.js';
+export { RecordingInProgressNotification } from './src/components/Notification/RecordingInProgressNotification.js';
+export { MicCaptureErrorNotification } from './src/components/Notification/MicCaptureErrorNotification.js';
+export { Reaction, defaultEmojiReactionMap } from './src/components/Reaction/Reaction.js';
+export { RingingCallControls } from './src/components/RingingCall/RingingCallControls.js';
+export { RingingCall } from './src/components/RingingCall/RingingCall.js';
+export { PermissionRequestList, PermissionRequests } from './src/components/Permissions/PermissionRequests.js';
+export { SearchInput } from './src/components/Search/SearchInput.js';
+export { SearchResults } from './src/components/Search/SearchResults.js';
+export { StreamTheme } from './src/components/StreamTheme/StreamTheme.js';
+export { Tooltip } from './src/components/Tooltip/Tooltip.js';
+export { WithTooltip } from './src/components/Tooltip/WithTooltip.js';
+export { DefaultVideoPlaceholder } from './src/core/components/Video/DefaultVideoPlaceholder.js';
+export { VideoPreview } from './src/components/VideoPreview/VideoPreview.js';
+export { LivestreamPlayer } from './src/wrappers/LivestreamPlayer/LivestreamPlayer.js';
+export { translations } from './src/translations/index.js';
+import 'react';
+import '@floating-ui/react';
+export { usePersistedDevicePreferences } from './src/hooks/usePersistedDevicePreferences.js';
+export { useHorizontalScrollPosition, useVerticalScrollPosition } from './src/hooks/useScrollPosition.js';
+export { useRequestPermission } from './src/hooks/useRequestPermission.js';
+export { useDeviceList } from './src/hooks/useDeviceList.js';
+export { useModeration } from './src/hooks/useModeration.js';
+export { useLoopbackRecording } from './src/hooks/useLoopbackRecording.js';
+export { applyFilter } from './src/utilities/filter.js';
+
+const [major, minor, patch] = ("1.42.0").split('.');
+setSdkInfo({
+    type: SfuModels.SdkType.REACT,
+    major,
+    minor,
+    patch,
+});
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../index.ts"],"sourcesContent":["import { setSdkInfo, SfuModels } from '@stream-io/video-client';\n\nexport * from '@stream-io/video-client';\nexport * from '@stream-io/video-react-bindings';\n\nexport * from './src/core';\n\nexport * from './src/components';\nexport * from './src/wrappers';\nexport * from './src/translations';\nexport {\n  useHorizontalScrollPosition,\n  useVerticalScrollPosition,\n  useRequestPermission,\n  usePersistedDevicePreferences,\n  useDeviceList,\n  useModeration,\n  useLoopbackRecording,\n  type LoopbackRecordingState,\n  type StartLoopbackRecordingOptions,\n  type UseLoopbackRecordingResult,\n} from './src/hooks';\nexport { applyFilter, type Filter } from './src/utilities/filter';\n\nconst [major, minor, patch] = (\n  process.env.PKG_VERSION || '0.0.0-development'\n).split('.');\n\nsetSdkInfo({\n  type: SfuModels.SdkType.REACT,\n  major,\n  minor,\n  patch,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,CAC5B,QAA8C,EAC9C,KAAK,CAAC,GAAG,CAAC;AAEZ,UAAU,CAAC;AACT,IAAA,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK;IAC7B,KAAK;IACL,KAAK;IACL,KAAK;AACN,CAAA,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
+
+const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
+    const [error, setError] = useState(false);
+    return (jsxs(Fragment, { children: [(!imageSrc || error) && name && (jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style, ...rest }))] }));
+};
+const AvatarFallback = ({ className, names, style, }) => {
+    return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
+};
+
+export { Avatar, AvatarFallback };
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, useState } from 'react';\nimport clsx from 'clsx';\n\nexport type AvatarData = {\n  imageSrc?: string;\n  name?: string;\n  style?: CSSProperties & Record<string, string | number>;\n};\n\nexport type AvatarProps = AvatarData & ComponentProps<'img'>;\n\nexport const Avatar = ({\n  imageSrc,\n  name,\n  style,\n  className,\n  ...rest\n}: AvatarProps) => {\n  const [error, setError] = useState(false);\n\n  return (\n    <>\n      {(!imageSrc || error) && name && (\n        <AvatarFallback className={className} style={style} names={[name]} />\n      )}\n      {imageSrc && !error && (\n        <img\n          onError={() => setError(true)}\n          alt=\"avatar\"\n          className={clsx('str-video__avatar', className)}\n          src={imageSrc}\n          style={style}\n          {...rest}\n        />\n      )}\n    </>\n  );\n};\n\ntype AvatarFallbackProps = {\n  names: string[];\n  className?: string;\n  style?: CSSProperties & Record<string, string | number>;\n};\nexport const AvatarFallback = ({\n  className,\n  names,\n  style,\n}: AvatarFallbackProps) => {\n  return (\n    <div\n      className={clsx('str-video__avatar--initials-fallback', className)}\n      style={style}\n    >\n      <div>\n        {names[0][0]}\n        {names[1]?.[0]}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;AAWO,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACK,KAAI;IAChB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEzC,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,CAAC,CAAC,QAAQ,IAAI,KAAK,KAAK,IAAI,KAC3BC,GAAA,CAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAA,CAAI,CACtE,EACA,QAAQ,IAAI,CAAC,KAAK,KACjBA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAC/C,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,KACR,IAAI,EAAA,CACR,CACH,CAAA,EAAA,CACA;AAEP;AAOO,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,GACe,KAAI;AACxB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,sCAAsC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,KAAK,YAEZF,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACX,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA,EAAA,CACV,EAAA,CACF;AAEV;;;;"}

package/dist/{background-filters-D2U5UBbH.es.js → esm/src/components/BackgroundFilters/BackgroundFilters.js}

@@ -417,4 +417,4 @@ const useRenderer = (api, tfLite, call, engine) => {
 };
 
 export { BackgroundFiltersProvider };
-//# sourceMappingURL=background-filters-D2U5UBbH.es.js.map
+//# sourceMappingURL=BackgroundFilters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundFilters.js","sources":["../../../../../../../src/components/BackgroundFilters/BackgroundFilters.tsx"],"sourcesContent":["import {\n  Context,\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { flushSync } from 'react-dom';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { Call, disposeOfMediaStream } from '@stream-io/video-client';\nimport {\n  BackgroundBlurLevel,\n  createRenderer,\n  isMediaPipePlatformSupported,\n  isPlatformSupported,\n  loadMediaPipe,\n  loadTFLite,\n  PerformanceStats,\n  Renderer,\n  TFLite,\n  VirtualBackground,\n} from '@stream-io/video-filters-web';\nimport clsx from 'clsx';\nimport type {\n  BackgroundFiltersPerformance,\n  BackgroundFiltersProps,\n  BackgroundFiltersContextValue,\n  PerformanceDegradationReason,\n} from './types';\n\ntype MediaStreamTrackVideoStats = {\n  deliveredFrames: number;\n  discardedFrames: number;\n  totalFrames: number;\n};\n\ntype MediaStreamTrackWithStats = MediaStreamTrack & {\n  stats?: MediaStreamTrackVideoStats;\n};\n\n/**\n * Constants for FPS warning calculation.\n * Smooths the processed-to-source FPS ratio and uses hysteresis\n * so the degradation warning doesn't flicker near the limit.\n */\nconst ALPHA = 0.2;\nconst FPS_RATIO_WARNING_THRESHOLD_LOWER = 0.75;\nconst FPS_RATIO_WARNING_THRESHOLD_UPPER = 0.85;\n\nconst EMPTY_BACKGROUND_IMAGES: string[] = [];\n\n/**\n * Represents the available background filter processing engines.\n */\nenum FilterEngine {\n  TF,\n  MEDIA_PIPE,\n  NONE,\n}\n\n/**\n * Determines which filter engine is available.\n * MEDIA_PIPE is the default unless legacy filters are requested or MediaPipe is unsupported.\n *\n * Returns NONE if neither is supported.\n */\nconst determineEngine = async (\n  useLegacyFilter: boolean | undefined,\n  forceSafariSupport: boolean | undefined,\n  forceMobileSupport: boolean | undefined,\n): Promise<FilterEngine> => {\n  if (useLegacyFilter) {\n    const isTfPlatformSupported = await isPlatformSupported({\n      forceSafariSupport,\n      forceMobileSupport,\n    });\n    return isTfPlatformSupported ? FilterEngine.TF : FilterEngine.NONE;\n  }\n\n  const isMediaPipeSupported = await isMediaPipePlatformSupported({\n    forceSafariSupport,\n    forceMobileSupport,\n  });\n\n  return isMediaPipeSupported ? FilterEngine.MEDIA_PIPE : FilterEngine.NONE;\n};\n\n/**\n * Samples the raw camera track's frame stats (W3C MediaCapture Extensions) at a\n * fixed interval and returns a live source fps estimate. Returns `undefined`\n * while warming up, when the camera is off, or when the browser doesn't expose\n * `MediaStreamTrack.stats` (currently Chromium-only).\n */\nconst useTrackFramesPerSecond = (call: Call | undefined) => {\n  const { useCameraState } = useCallStateHooks();\n  const { rootMediaStream } = useCameraState();\n  const [fps, setFps] = useState<number | undefined>(undefined);\n  const trackId = rootMediaStream?.getVideoTracks()[0]?.id;\n\n  useEffect(() => {\n    if (!call) {\n      setFps(undefined);\n      return;\n    }\n\n    let previousSnapshot:\n      (MediaStreamTrackVideoStats & { capturedAt: number }) | undefined;\n    let previousTrackId: string | undefined;\n\n    const intervalId = setInterval(() => {\n      const track = rootMediaStream?.getVideoTracks()[0] as\n        MediaStreamTrackWithStats | undefined;\n\n      const stats = track?.stats;\n      if (!track || !stats) {\n        previousSnapshot = undefined;\n        setFps(undefined);\n        return;\n      }\n\n      if (track.id !== previousTrackId) {\n        previousTrackId = track.id;\n        previousSnapshot = undefined;\n        setFps(undefined);\n      }\n\n      const currentSnapshot = {\n        deliveredFrames: stats.deliveredFrames,\n        discardedFrames: stats.discardedFrames,\n        totalFrames: stats.totalFrames,\n        capturedAt: performance.now(),\n      };\n\n      if (previousSnapshot) {\n        const elapsedSec =\n          (currentSnapshot.capturedAt - previousSnapshot.capturedAt) / 1000;\n\n        const delivered =\n          currentSnapshot.deliveredFrames - previousSnapshot.deliveredFrames;\n\n        const nextFps = Math.round(delivered / elapsedSec);\n        setFps(nextFps);\n      }\n      previousSnapshot = currentSnapshot;\n    }, 1000);\n\n    return () => {\n      clearInterval(intervalId);\n      setFps(undefined);\n    };\n  }, [call, rootMediaStream, trackId]);\n\n  return fps;\n};\n\n/**\n * A provider component that enables the use of background filters in your app.\n *\n * Please make sure you have the `@stream-io/video-filters-web` package installed\n * in your project before using this component.\n */\nexport const BackgroundFiltersProvider = (\n  props: PropsWithChildren<BackgroundFiltersProps> & {\n    // for code splitting. Prevents circular dependency issues where\n    // this Context needs to be present in the main chunk, but also\n    // imported by the background filters chunk.\n    ContextProvider: Context<BackgroundFiltersContextValue | undefined>;\n  },\n) => {\n  const {\n    ContextProvider,\n    children,\n    backgroundImages = EMPTY_BACKGROUND_IMAGES,\n    backgroundFilter: bgFilterFromProps = undefined,\n    backgroundImage: bgImageFromProps = undefined,\n    backgroundBlurLevel: bgBlurLevelFromProps = undefined,\n    tfFilePath,\n    modelFilePath,\n    useLegacyFilter,\n    basePath,\n    onError,\n    forceSafariSupport,\n    forceMobileSupport,\n    segmentationOptions,\n  } = props;\n\n  const call = useCall();\n  const { useCallStatsReport } = useCallStateHooks();\n  const callStatsReport = useCallStatsReport();\n\n  const [backgroundFilter, setBackgroundFilter] = useState(bgFilterFromProps);\n  const [backgroundImage, setBackgroundImage] = useState(bgImageFromProps);\n  const [backgroundBlurLevel, setBackgroundBlurLevel] =\n    useState(bgBlurLevelFromProps);\n\n  const [showLowFpsWarning, setShowLowFpsWarning] = useState<boolean>(false);\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const rootFps = useTrackFramesPerSecond(call);\n  const cameraFrameRate = callStatsReport?.publisherStats?.camera?.frameRate;\n\n  const sourceFps = rootFps ?? cameraFrameRate;\n  const fpsRatioEmaRef = useRef<number | undefined>(undefined);\n\n  const handleStats = useCallback(\n    (stats: PerformanceStats) => {\n      const fps = stats?.fps;\n      if (fps == null || !sourceFps) {\n        fpsRatioEmaRef.current = undefined;\n        setShowLowFpsWarning(false);\n        return;\n      }\n\n      const ratio = fps / sourceFps;\n      const prevRatioEma = fpsRatioEmaRef.current ?? ratio;\n\n      const nextFpsRatioEma = ALPHA * ratio + (1 - ALPHA) * prevRatioEma;\n      fpsRatioEmaRef.current = nextFpsRatioEma;\n\n      setShowLowFpsWarning((prev) => {\n        if (prev && nextFpsRatioEma > FPS_RATIO_WARNING_THRESHOLD_UPPER)\n          return false;\n        if (!prev && nextFpsRatioEma < FPS_RATIO_WARNING_THRESHOLD_LOWER)\n          return true;\n\n        return prev;\n      });\n    },\n    [sourceFps],\n  );\n\n  const performance: BackgroundFiltersPerformance = useMemo(() => {\n    if (!backgroundFilter) {\n      return { degraded: false };\n    }\n\n    const reasons: Array<PerformanceDegradationReason> = [];\n\n    if (showLowFpsWarning) {\n      reasons.push('frame-drop');\n    }\n\n    const qualityLimitationReasons =\n      callStatsReport?.publisherStats?.qualityLimitationReasons;\n\n    if (\n      showLowFpsWarning &&\n      qualityLimitationReasons &&\n      qualityLimitationReasons?.includes('cpu')\n    ) {\n      reasons.push('cpu-throttling');\n    }\n\n    return {\n      degraded: reasons.length > 0,\n      reason: reasons.length > 0 ? reasons : undefined,\n    };\n  }, [\n    showLowFpsWarning,\n    callStatsReport?.publisherStats?.qualityLimitationReasons,\n    backgroundFilter,\n  ]);\n\n  const prevDegradedRef = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    const currentDegraded = performance.degraded;\n    const prevDegraded = prevDegradedRef.current;\n\n    if (\n      !!backgroundFilter &&\n      prevDegraded !== undefined &&\n      prevDegraded !== currentDegraded\n    ) {\n      call?.tracer.trace('backgroundFilters.performance', {\n        degraded: currentDegraded,\n        reason: performance?.reason,\n        ratio: fpsRatioEmaRef.current,\n        sourceFps,\n      });\n    }\n    prevDegradedRef.current = currentDegraded;\n  }, [\n    performance.degraded,\n    performance.reason,\n    backgroundFilter,\n    call?.tracer,\n    sourceFps,\n  ]);\n\n  const applyBackgroundImageFilter = useCallback((imageUrl: string) => {\n    setBackgroundFilter('image');\n    setBackgroundImage(imageUrl);\n  }, []);\n\n  const applyBackgroundBlurFilter = useCallback(\n    (blurLevel: BackgroundBlurLevel = 'high') => {\n      setBackgroundFilter('blur');\n      setBackgroundBlurLevel(blurLevel);\n    },\n    [],\n  );\n\n  const disableBackgroundFilter = useCallback(() => {\n    setBackgroundFilter(undefined);\n    setBackgroundImage(undefined);\n    setBackgroundBlurLevel(undefined);\n\n    fpsRatioEmaRef.current = undefined;\n    setShowLowFpsWarning(false);\n  }, []);\n\n  const [engine, setEngine] = useState<FilterEngine>(FilterEngine.NONE);\n  const [isSupported, setIsSupported] = useState(false);\n  useEffect(() => {\n    determineEngine(\n      useLegacyFilter,\n      forceSafariSupport,\n      forceMobileSupport,\n    ).then((determinedEngine) => {\n      setEngine(determinedEngine);\n      setIsSupported(determinedEngine !== FilterEngine.NONE);\n    });\n  }, [forceMobileSupport, forceSafariSupport, useLegacyFilter]);\n\n  const [tfLite, setTfLite] = useState<TFLite>();\n  useEffect(() => {\n    if (engine !== FilterEngine.TF) return;\n\n    loadTFLite({ basePath, modelFilePath, tfFilePath })\n      .then(setTfLite)\n      .catch((err) => console.error('Failed to load TFLite', err));\n  }, [basePath, engine, modelFilePath, tfFilePath]);\n\n  const [mediaPipe, setMediaPipe] = useState<ArrayBuffer>();\n  useEffect(() => {\n    if (engine !== FilterEngine.MEDIA_PIPE) return;\n\n    loadMediaPipe({\n      basePath: basePath,\n      modelPath: modelFilePath,\n    })\n      .then(setMediaPipe)\n      .catch((err) => console.error('Failed to preload MediaPipe', err));\n  }, [engine, modelFilePath, basePath]);\n\n  const handleError = useCallback(\n    (error: any) => {\n      console.warn(\n        '[filters] Filter encountered an error and will be disabled',\n      );\n      disableBackgroundFilter();\n      onError?.(error);\n    },\n    [disableBackgroundFilter, onError],\n  );\n\n  const isReady = useLegacyFilter ? !!tfLite : !!mediaPipe;\n\n  const contextValue = useMemo<BackgroundFiltersContextValue>(\n    () => ({\n      isSupported,\n      performance,\n      isReady,\n      isLoading,\n      backgroundImage,\n      backgroundBlurLevel,\n      backgroundFilter,\n      disableBackgroundFilter,\n      applyBackgroundBlurFilter,\n      applyBackgroundImageFilter,\n      backgroundImages,\n      tfFilePath,\n      modelFilePath,\n      basePath,\n      onError: handleError,\n      segmentationOptions,\n    }),\n    [\n      isSupported,\n      performance,\n      isReady,\n      isLoading,\n      backgroundImage,\n      backgroundBlurLevel,\n      backgroundFilter,\n      disableBackgroundFilter,\n      applyBackgroundBlurFilter,\n      applyBackgroundImageFilter,\n      backgroundImages,\n      tfFilePath,\n      modelFilePath,\n      basePath,\n      handleError,\n      segmentationOptions,\n    ],\n  );\n  return (\n    <ContextProvider.Provider value={contextValue}>\n      {children}\n      {isReady && (\n        <BackgroundFilters\n          api={contextValue}\n          tfLite={tfLite}\n          engine={engine}\n          onStats={handleStats}\n          setIsLoading={setIsLoading}\n        />\n      )}\n    </ContextProvider.Provider>\n  );\n};\n\nconst BackgroundFilters = (props: {\n  api: BackgroundFiltersContextValue;\n  tfLite?: TFLite;\n  engine: FilterEngine;\n  onStats: (stats: PerformanceStats) => void;\n  setIsLoading: (loading: boolean) => void;\n}) => {\n  const call = useCall();\n  const { engine, api, tfLite, onStats, setIsLoading } = props;\n  const { children, start } = useRenderer(api, tfLite, call, engine);\n  const { onError, backgroundFilter } = api;\n  const handleErrorRef = useRef<((error: any) => void) | undefined>(undefined);\n  handleErrorRef.current = onError;\n\n  const handleStatsRef = useRef<\n    ((stats: PerformanceStats) => void) | undefined\n  >(undefined);\n  handleStatsRef.current = onStats;\n\n  useEffect(() => {\n    if (!call || !backgroundFilter) return;\n\n    setIsLoading(true);\n    const { unregister, registered } = call.camera.registerFilter((ms) => {\n      return start(\n        ms,\n        (error) => handleErrorRef.current?.(error),\n        (stats: PerformanceStats) => handleStatsRef.current?.(stats),\n      );\n    });\n    registered.finally(() => {\n      setIsLoading(false);\n    });\n\n    return () => {\n      unregister().catch((err) => console.warn(`Can't unregister filter`, err));\n    };\n  }, [call, start, backgroundFilter, setIsLoading]);\n\n  return children;\n};\n\nconst useRenderer = (\n  api: BackgroundFiltersContextValue,\n  tfLite: TFLite | undefined,\n  call: Call | undefined,\n  engine: FilterEngine,\n) => {\n  const {\n    backgroundFilter,\n    backgroundBlurLevel,\n    backgroundImage,\n    modelFilePath,\n    basePath,\n    segmentationOptions,\n  } = api;\n\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const bgImageRef = useRef<HTMLImageElement>(null);\n  const [videoSize, setVideoSize] = useState<{ width: number; height: number }>(\n    {\n      width: 1920,\n      height: 1080,\n    },\n  );\n\n  const start = useCallback(\n    (\n      ms: MediaStream,\n      onError?: (error: any) => void,\n      onStats?: (stats: PerformanceStats) => void,\n    ) => {\n      let outputStream: MediaStream | undefined;\n      let processor: VirtualBackground | undefined;\n      let renderer: Renderer | undefined;\n\n      const output = new Promise<MediaStream>((resolve, reject) => {\n        if (!backgroundFilter) {\n          reject(new Error('No filter specified'));\n          return;\n        }\n\n        const videoEl = videoRef.current;\n        const canvasEl = canvasRef.current;\n        const bgImageEl = bgImageRef.current;\n\n        const [track] = ms.getVideoTracks();\n\n        if (!track) {\n          reject(new Error('No video tracks in input media stream'));\n          return;\n        }\n\n        if (engine === FilterEngine.MEDIA_PIPE) {\n          call?.tracer.trace('backgroundFilters.enable', {\n            backgroundFilter,\n            backgroundBlurLevel,\n            backgroundImage,\n            engine,\n            modelFilePath,\n          });\n\n          if (!videoEl) {\n            reject(new Error('Renderer started before elements are ready'));\n            return;\n          }\n\n          const trackSettings = track.getSettings();\n          flushSync(() =>\n            setVideoSize({\n              width: trackSettings.width ?? 0,\n              height: trackSettings.height ?? 0,\n            }),\n          );\n\n          processor = new VirtualBackground(\n            track,\n            {\n              basePath: basePath,\n              modelPath: modelFilePath,\n              backgroundBlurLevel,\n              backgroundImage,\n              backgroundFilter,\n              segmentationOptions,\n            },\n            { onError, onStats },\n          );\n          processor\n            .start()\n            .then((processedTrack) => {\n              outputStream = new MediaStream([processedTrack]);\n              resolve(outputStream);\n            })\n            .catch((error) => {\n              reject(error);\n            });\n\n          return;\n        }\n\n        if (engine === FilterEngine.TF) {\n          if (!videoEl || !canvasEl || (backgroundImage && !bgImageEl)) {\n            reject(new Error('Renderer started before elements are ready'));\n            return;\n          }\n\n          videoEl.srcObject = ms;\n          videoEl.play().then(\n            () => {\n              const trackSettings = track.getSettings();\n              flushSync(() =>\n                setVideoSize({\n                  width: trackSettings.width ?? 0,\n                  height: trackSettings.height ?? 0,\n                }),\n              );\n              call?.tracer.trace('backgroundFilters.enable', {\n                backgroundFilter,\n                backgroundBlurLevel,\n                backgroundImage,\n                engine,\n              });\n\n              if (!tfLite) {\n                reject(new Error('TensorFlow Lite not loaded'));\n                return;\n              }\n\n              renderer = createRenderer(\n                tfLite,\n                videoEl,\n                canvasEl,\n                {\n                  backgroundFilter,\n                  backgroundBlurLevel,\n                  backgroundImage: bgImageEl ?? undefined,\n                },\n                onError,\n              );\n              outputStream = canvasEl.captureStream();\n\n              resolve(outputStream);\n            },\n            () => {\n              reject(new Error('Could not play the source video stream'));\n            },\n          );\n          return;\n        }\n\n        reject(new Error('No supported engine available'));\n      });\n\n      return {\n        output,\n        stop: () => {\n          call?.tracer.trace('backgroundFilters.disable', null);\n          processor?.stop();\n          renderer?.dispose();\n          if (videoRef.current) videoRef.current.srcObject = null;\n          if (outputStream) disposeOfMediaStream(outputStream);\n        },\n      };\n    },\n    [\n      backgroundBlurLevel,\n      backgroundFilter,\n      backgroundImage,\n      call?.tracer,\n      tfLite,\n      engine,\n      modelFilePath,\n      basePath,\n      segmentationOptions,\n    ],\n  );\n\n  const children = (\n    <div className=\"str-video__background-filters\">\n      <video\n        className={clsx(\n          'str-video__background-filters__video',\n          videoSize.height > videoSize.width &&\n            'str-video__background-filters__video--tall',\n        )}\n        ref={videoRef}\n        playsInline\n        muted\n        controls={false}\n        {...videoSize}\n      />\n      {backgroundImage && (\n        <img\n          className=\"str-video__background-filters__background-image\"\n          alt=\"Background\"\n          ref={bgImageRef}\n          crossOrigin=\"anonymous\"\n          src={backgroundImage}\n          {...videoSize}\n        />\n      )}\n      <canvas\n        className=\"str-video__background-filters__target-canvas\"\n        {...videoSize}\n        ref={canvasRef}\n      />\n    </div>\n  );\n\n  return { start, children };\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/BackgroundFilters/BackgroundFiltersProvider.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { lazy, createContext, Suspense, useContext } from 'react';
+
+const BackgroundFiltersProviderImpl = lazy(() => import('./BackgroundFilters.js').then((m) => ({
+    default: m.BackgroundFiltersProvider,
+})));
+/**
+ * The context for the background filters.
+ */
+const BackgroundFiltersContext = createContext(undefined);
+/**
+ * A hook to access the background filters context API.
+ */
+const useBackgroundFilters = () => {
+    const context = useContext(BackgroundFiltersContext);
+    if (!context) {
+        throw new Error('useBackgroundFilters must be used within a BackgroundFiltersProvider');
+    }
+    return context;
+};
+/**
+ * A provider component that enables the use of background filters in your app.
+ *
+ * Please make sure you have the `@stream-io/video-filters-web` package installed
+ * in your project before using this component.
+ */
+const BackgroundFiltersProvider = (props) => {
+    const { SuspenseFallback = null, ...filterProps } = props;
+    return (jsx(Suspense, { fallback: SuspenseFallback, children: jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
+};
+
+export { BackgroundFiltersProvider, useBackgroundFilters };
+//# sourceMappingURL=BackgroundFiltersProvider.js.map

package/dist/esm/src/components/BackgroundFilters/BackgroundFiltersProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundFiltersProvider.js","sources":["../../../../../../../src/components/BackgroundFilters/BackgroundFiltersProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  lazy,\n  PropsWithChildren,\n  ReactNode,\n  Suspense,\n  useContext,\n} from 'react';\nimport type {\n  BackgroundFiltersProps,\n  BackgroundFiltersContextValue,\n} from './types';\n\nconst BackgroundFiltersProviderImpl = lazy(() =>\n  import('./BackgroundFilters').then((m) => ({\n    default: m.BackgroundFiltersProvider,\n  })),\n);\n\n/**\n * The context for the background filters.\n */\nconst BackgroundFiltersContext = createContext<\n  BackgroundFiltersContextValue | undefined\n>(undefined);\n\n/**\n * A hook to access the background filters context API.\n */\nexport const useBackgroundFilters = () => {\n  const context = useContext(BackgroundFiltersContext);\n  if (!context) {\n    throw new Error(\n      'useBackgroundFilters must be used within a BackgroundFiltersProvider',\n    );\n  }\n  return context;\n};\n\n/**\n * A provider component that enables the use of background filters in your app.\n *\n * Please make sure you have the `@stream-io/video-filters-web` package installed\n * in your project before using this component.\n */\nexport const BackgroundFiltersProvider = (\n  props: PropsWithChildren<BackgroundFiltersProps> & {\n    SuspenseFallback?: ReactNode;\n  },\n) => {\n  const { SuspenseFallback = null, ...filterProps } = props;\n  return (\n    <Suspense fallback={SuspenseFallback}>\n      <BackgroundFiltersProviderImpl\n        {...filterProps}\n        ContextProvider={BackgroundFiltersContext}\n      />\n    </Suspense>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAaA,MAAM,6BAA6B,GAAG,IAAI,CAAC,MACzC,OAAO,wBAAqB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;IACzC,OAAO,EAAE,CAAC,CAAC,yBAAyB;CACrC,CAAC,CAAC,CACJ;AAED;;AAEG;AACH,MAAM,wBAAwB,GAAG,aAAa,CAE5C,SAAS,CAAC;AAEZ;;AAEG;AACI,MAAM,oBAAoB,GAAG,MAAK;AACvC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,wBAAwB,CAAC;IACpD,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CACb,sEAAsE,CACvE;IACH;AACA,IAAA,OAAO,OAAO;AAChB;AAEA;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,CACvC,KAEC,KACC;IACF,MAAM,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK;AACzD,IAAA,QACEA,GAAA,CAAC,QAAQ,IAAC,QAAQ,EAAE,gBAAgB,EAAA,QAAA,EAClCA,GAAA,CAAC,6BAA6B,EAAA,EAAA,GACxB,WAAW,EACf,eAAe,EAAE,wBAAwB,EAAA,CACzC,EAAA,CACO;AAEf;;;;"}

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

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { MenuToggle } from '../Menu/MenuToggle.js';
+import { forwardRef } from 'react';
+import { IconButton } from './IconButton.js';
+import { isComponentType } from '../../utilities/isComponentType.js';
+
+const CompositeButton = forwardRef(function CompositeButtonRender({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
+    return (jsxs("div", { className: clsx('str-video__composite-button', className, {
+            'str-video__composite-button--caption': caption,
+            'str-video__composite-button--menu': Menu,
+        }), title: title, ref: ref, children: [jsxs("div", { className: clsx('str-video__composite-button__button-group', {
+                    'str-video__composite-button__button-group--active': active,
+                    'str-video__composite-button__button-group--active-primary': active && variant === 'primary',
+                    'str-video__composite-button__button-group--active-secondary': active && variant === 'secondary',
+                    'str-video__composite-button__button-group--disabled': disabled,
+                }), children: [jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
+                            e.preventDefault();
+                            onClick?.(e);
+                        }, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu }))] }), caption && (jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+});
+const DefaultToggleMenuButton = forwardRef(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
+    return (jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
+            'str-video__menu-toggle-button--active': menuShown,
+        }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+});
+
+export { CompositeButton };
+//# sourceMappingURL=CompositeButton.js.map

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