@stream-io/video-react-sdk 1.40.0 → 1.40.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -3
- package/dist/background-filters-D2U5UBbH.es.js.map +1 -1
- package/dist/background-filters-folwWrgs.cjs.js.map +1 -1
- package/dist/embedded-BackgroundFilters-D2U5UBbH.es.js.map +1 -1
- package/dist/embedded-BackgroundFilters-folwWrgs.cjs.js.map +1 -1
- package/dist/embedded.cjs.js +24 -23
- package/dist/embedded.cjs.js.map +1 -1
- package/dist/embedded.es.js +24 -23
- package/dist/embedded.es.js.map +1 -1
- package/dist/index.cjs.js +23 -22
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +23 -22
- package/dist/index.es.js.map +1 -1
- package/dist/src/components/Avatar/Avatar.d.ts +2 -2
- package/dist/src/components/BackgroundFilters/BackgroundFilters.d.ts +1 -1
- package/dist/src/components/BackgroundFilters/BackgroundFiltersProvider.d.ts +1 -1
- package/dist/src/components/Button/TextButton.d.ts +1 -1
- package/dist/src/components/CallControls/AcceptCallButton.d.ts +1 -1
- package/dist/src/components/CallControls/CallControls.d.ts +1 -1
- package/dist/src/components/CallControls/CallStatsButton.d.ts +1 -1
- package/dist/src/components/CallControls/CancelCallButton.d.ts +2 -2
- package/dist/src/components/CallControls/ReactionsButton.d.ts +2 -2
- package/dist/src/components/CallControls/RecordCallButton.d.ts +2 -2
- package/dist/src/components/CallControls/ScreenShareButton.d.ts +1 -1
- package/dist/src/components/CallControls/ToggleAudioButton.d.ts +2 -2
- package/dist/src/components/CallControls/ToggleAudioOutputButton.d.ts +1 -1
- package/dist/src/components/CallControls/ToggleVideoButton.d.ts +2 -2
- package/dist/src/components/CallParticipantsList/BlockedUserListing.d.ts +1 -1
- package/dist/src/components/CallParticipantsList/CallParticipantListHeader.d.ts +1 -1
- package/dist/src/components/CallParticipantsList/CallParticipantListing.d.ts +1 -1
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts +1 -1
- package/dist/src/components/CallParticipantsList/CallParticipantsList.d.ts +1 -1
- package/dist/src/components/CallParticipantsList/EmptyParticipantSearchList.d.ts +1 -1
- package/dist/src/components/CallPreview/CallPreview.d.ts +1 -1
- package/dist/src/components/CallRecordingList/CallRecordingList.d.ts +1 -1
- package/dist/src/components/CallRecordingList/CallRecordingListHeader.d.ts +1 -1
- package/dist/src/components/CallRecordingList/CallRecordingListItem.d.ts +1 -1
- package/dist/src/components/CallRecordingList/EmptyCallRecordingListing.d.ts +1 -1
- package/dist/src/components/CallRecordingList/LoadingCallRecordingListing.d.ts +1 -1
- package/dist/src/components/CallStats/CallStats.d.ts +2 -2
- package/dist/src/components/CallStats/CallStatsLatencyChart.d.ts +1 -1
- package/dist/src/components/DeviceSettings/AudioVolumeIndicator.d.ts +1 -1
- package/dist/src/components/DeviceSettings/DeviceAudioPreviewItem.d.ts +1 -1
- package/dist/src/components/DeviceSettings/DeviceSelector.d.ts +1 -1
- package/dist/src/components/DeviceSettings/DeviceSelectorAudio.d.ts +2 -2
- package/dist/src/components/DeviceSettings/DeviceSelectorVideo.d.ts +1 -1
- package/dist/src/components/DeviceSettings/DeviceSettings.d.ts +1 -1
- package/dist/src/components/DeviceSettings/DeviceVideoPreviewItem.d.ts +1 -1
- package/dist/src/components/DeviceSettings/SpeakerTest.d.ts +1 -1
- package/dist/src/components/DropdownSelect/DropdownSelect.d.ts +2 -2
- package/dist/src/components/Icon/Icon.d.ts +1 -1
- package/dist/src/components/LoadingIndicator/LoadingIndicator.d.ts +1 -1
- package/dist/src/components/Menu/GenericMenu.d.ts +2 -2
- package/dist/src/components/Menu/MenuToggle.d.ts +1 -1
- package/dist/src/components/NoiseCancellation/NoiseCancellationProvider.d.ts +1 -1
- package/dist/src/components/Notification/MicCaptureErrorNotification.d.ts +1 -1
- package/dist/src/components/Notification/Notification.d.ts +1 -1
- package/dist/src/components/Notification/PermissionNotification.d.ts +1 -1
- package/dist/src/components/Notification/RecordingInProgressNotification.d.ts +1 -1
- package/dist/src/components/Notification/SpeakingWhileMutedNotification.d.ts +1 -1
- package/dist/src/components/Permissions/PermissionRequests.d.ts +1 -1
- package/dist/src/components/Reaction/Reaction.d.ts +1 -1
- package/dist/src/components/RingingCall/RingingCall.d.ts +1 -1
- package/dist/src/components/RingingCall/RingingCallControls.d.ts +1 -1
- package/dist/src/components/Search/SearchInput.d.ts +1 -1
- package/dist/src/components/Search/SearchResults.d.ts +1 -1
- package/dist/src/components/StreamTheme/StreamTheme.d.ts +1 -1
- package/dist/src/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/src/components/Tooltip/WithTooltip.d.ts +1 -1
- package/dist/src/components/VideoPreview/VideoPreview.d.ts +1 -1
- package/dist/src/core/components/Audio/Audio.d.ts +1 -1
- package/dist/src/core/components/Audio/ParticipantsAudio.d.ts +1 -1
- package/dist/src/core/components/CallLayout/LivestreamLayout.d.ts +2 -2
- package/dist/src/core/components/CallLayout/PaginatedGridLayout.d.ts +1 -1
- package/dist/src/core/components/CallLayout/PipLayout/Grid.d.ts +1 -1
- package/dist/src/core/components/CallLayout/PipLayout/Host.d.ts +1 -1
- package/dist/src/core/components/CallLayout/PipLayout/Pip.d.ts +1 -1
- package/dist/src/core/components/CallLayout/PipLayout/index.d.ts +3 -3
- package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts +1 -1
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts +5 -5
- package/dist/src/core/components/ParticipantView/ParticipantActionsContextMenu.d.ts +1 -1
- package/dist/src/core/components/StreamVideo/StreamVideo.d.ts +1 -1
- package/dist/src/core/components/Video/Video.d.ts +1 -1
- package/dist/src/embedded/EmbeddedClientProvider.d.ts +1 -1
- package/dist/src/embedded/call/CallControls.d.ts +1 -1
- package/dist/src/embedded/call/CallHeader.d.ts +1 -1
- package/dist/src/embedded/call/CallLayout.d.ts +1 -1
- package/dist/src/embedded/call/CallStateRouter.d.ts +1 -1
- package/dist/src/embedded/call/EmbeddedCall.d.ts +1 -1
- package/dist/src/embedded/context/ConfigurationContext.d.ts +1 -1
- package/dist/src/embedded/livestream/EmbeddedLivestream.d.ts +1 -1
- package/dist/src/embedded/livestream/LivestreamUI.d.ts +1 -1
- package/dist/src/embedded/livestream/host/HostLayout.d.ts +1 -1
- package/dist/src/embedded/livestream/host/HostStateRouter.d.ts +1 -1
- package/dist/src/embedded/livestream/viewer/ViewerLayout.d.ts +1 -1
- package/dist/src/embedded/livestream/viewer/ViewerLobby.d.ts +1 -1
- package/dist/src/embedded/livestream/viewer/ViewerStateRouter.d.ts +1 -1
- package/dist/src/embedded/shared/BlurToggleButton/BlurToggleButton.d.ts +2 -2
- package/dist/src/embedded/shared/CallFeedback/CallEndedScreen.d.ts +1 -1
- package/dist/src/embedded/shared/CallFeedback/CallFeedback.d.ts +1 -1
- package/dist/src/embedded/shared/CallFeedback/RatingScreen.d.ts +1 -1
- package/dist/src/embedded/shared/CallFeedback/StarRating.d.ts +1 -1
- package/dist/src/embedded/shared/CallFeedback/ThankYouScreen.d.ts +1 -1
- package/dist/src/embedded/shared/ConnectionNotification/ConnectionNotification.d.ts +1 -1
- package/dist/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.d.ts +1 -1
- package/dist/src/embedded/shared/JoinError/JoinError.d.ts +1 -1
- package/dist/src/embedded/shared/Lobby/DeviceControls.d.ts +1 -1
- package/dist/src/embedded/shared/Lobby/DisabledDeviceButton.d.ts +1 -1
- package/dist/src/embedded/shared/Lobby/Lobby.d.ts +1 -1
- package/dist/src/embedded/shared/Lobby/ToggleCameraButton.d.ts +1 -1
- package/dist/src/embedded/shared/Lobby/ToggleMicButton.d.ts +1 -1
- package/dist/src/embedded/shared/Lobby/VideoPreviewFallbacks.d.ts +2 -2
- package/dist/src/embedded/shared/ViewersCount/ViewersCount.d.ts +1 -1
- package/dist/src/wrappers/LivestreamPlayer/LivestreamPlayer.d.ts +1 -1
- package/package.json +13 -13
- package/src/components/BackgroundFilters/BackgroundFilters.tsx +2 -4
- package/src/components/Button/CompositeButton.tsx +2 -2
- package/src/components/Button/IconButton.tsx +1 -1
- package/src/components/CallControls/CallStatsButton.tsx +1 -1
- package/src/components/CallControls/CancelCallButton.tsx +1 -1
- package/src/components/CallControls/ReactionsButton.tsx +1 -1
- package/src/components/CallControls/RecordCallButton.tsx +1 -1
- package/src/components/CallParticipantsList/CallParticipantListingItem.tsx +2 -2
- package/src/components/CallParticipantsList/CallParticipantsList.tsx +1 -1
- package/src/components/DeviceSettings/DeviceSettings.tsx +1 -1
- package/src/components/Permissions/PermissionRequests.tsx +1 -1
- package/src/core/components/Audio/Audio.tsx +1 -1
- package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx +1 -1
- package/src/core/components/ParticipantView/ParticipantView.tsx +124 -120
- package/src/core/components/Video/BaseVideo.tsx +1 -1
- package/src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx +1 -1
- package/src/core/components/Video/DefaultVideoPlaceholder.tsx +1 -1
- package/src/embedded/shared/Lobby/ToggleCameraButton.tsx +1 -1
- package/src/embedded/shared/Lobby/ToggleMicButton.tsx +1 -1
- package/src/embedded/types.ts +1 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"embedded-BackgroundFilters-folwWrgs.cjs.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 })\n | undefined;\n let previousTrackId: string | undefined;\n\n const intervalId = setInterval(() => {\n const track = rootMediaStream?.getVideoTracks()[0] as\n | MediaStreamTrackWithStats\n | 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":["isPlatformSupported","isMediaPipePlatformSupported","useCallStateHooks","useState","useEffect","useCall","useRef","useCallback","useMemo","loadTFLite","loadMediaPipe","_jsxs","_jsx","flushSync","VirtualBackground","createRenderer","disposeOfMediaStream"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"embedded-BackgroundFilters-folwWrgs.cjs.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":["isPlatformSupported","isMediaPipePlatformSupported","useCallStateHooks","useState","useEffect","useCall","useRef","useCallback","useMemo","loadTFLite","loadMediaPipe","_jsxs","_jsx","flushSync","VirtualBackground","createRenderer","disposeOfMediaStream"],"mappings":";;;;;;;;;;AA0CA;;;;AAIG;AACH,MAAM,KAAK,GAAG,GAAG;AACjB,MAAM,iCAAiC,GAAG,IAAI;AAC9C,MAAM,iCAAiC,GAAG,IAAI;AAE9C,MAAM,uBAAuB,GAAa,EAAE;AAE5C;;AAEG;AACH,IAAK,YAIJ;AAJD,CAAA,UAAK,YAAY,EAAA;AACf,IAAA,YAAA,CAAA,YAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAE;AACF,IAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAU;AACV,IAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAI;AACN,CAAC,EAJI,YAAY,KAAZ,YAAY,GAAA,EAAA,CAAA,CAAA;AAMjB;;;;;AAKG;AACH,MAAM,eAAe,GAAG,OACtB,eAAoC,EACpC,kBAAuC,EACvC,kBAAuC,KACd;IACzB,IAAI,eAAe,EAAE;AACnB,QAAA,MAAM,qBAAqB,GAAG,MAAMA,mCAAmB,CAAC;YACtD,kBAAkB;YAClB,kBAAkB;AACnB,SAAA,CAAC;AACF,QAAA,OAAO,qBAAqB,GAAG,YAAY,CAAC,EAAE,GAAG,YAAY,CAAC,IAAI;IACpE;AAEA,IAAA,MAAM,oBAAoB,GAAG,MAAMC,4CAA4B,CAAC;QAC9D,kBAAkB;QAClB,kBAAkB;AACnB,KAAA,CAAC;AAEF,IAAA,OAAO,oBAAoB,GAAG,YAAY,CAAC,UAAU,GAAG,YAAY,CAAC,IAAI;AAC3E,CAAC;AAED;;;;;AAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,IAAsB,KAAI;AACzD,IAAA,MAAM,EAAE,cAAc,EAAE,GAAGC,oCAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,cAAc,EAAE;IAC5C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAGC,cAAQ,CAAqB,SAAS,CAAC;IAC7D,MAAM,OAAO,GAAG,eAAe,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;IAExDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,IAAI,EAAE;YACT,MAAM,CAAC,SAAS,CAAC;YACjB;QACF;AAEA,QAAA,IAAI,gBAC+D;AACnE,QAAA,IAAI,eAAmC;AAEvC,QAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;YAClC,MAAM,KAAK,GAAG,eAAe,EAAE,cAAc,EAAE,CAAC,CAAC,CACV;AAEvC,YAAA,MAAM,KAAK,GAAG,KAAK,EAAE,KAAK;AAC1B,YAAA,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE;gBACpB,gBAAgB,GAAG,SAAS;gBAC5B,MAAM,CAAC,SAAS,CAAC;gBACjB;YACF;AAEA,YAAA,IAAI,KAAK,CAAC,EAAE,KAAK,eAAe,EAAE;AAChC,gBAAA,eAAe,GAAG,KAAK,CAAC,EAAE;gBAC1B,gBAAgB,GAAG,SAAS;gBAC5B,MAAM,CAAC,SAAS,CAAC;YACnB;AAEA,YAAA,MAAM,eAAe,GAAG;gBACtB,eAAe,EAAE,KAAK,CAAC,eAAe;gBACtC,eAAe,EAAE,KAAK,CAAC,eAAe;gBACtC,WAAW,EAAE,KAAK,CAAC,WAAW;AAC9B,gBAAA,UAAU,EAAE,WAAW,CAAC,GAAG,EAAE;aAC9B;YAED,IAAI,gBAAgB,EAAE;AACpB,gBAAA,MAAM,UAAU,GACd,CAAC,eAAe,CAAC,UAAU,GAAG,gBAAgB,CAAC,UAAU,IAAI,IAAI;gBAEnE,MAAM,SAAS,GACb,eAAe,CAAC,eAAe,GAAG,gBAAgB,CAAC,eAAe;gBAEpE,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC;gBAClD,MAAM,CAAC,OAAO,CAAC;YACjB;YACA,gBAAgB,GAAG,eAAe;QACpC,CAAC,EAAE,IAAI,CAAC;AAER,QAAA,OAAO,MAAK;YACV,aAAa,CAAC,UAAU,CAAC;YACzB,MAAM,CAAC,SAAS,CAAC;AACnB,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;AAEpC,IAAA,OAAO,GAAG;AACZ,CAAC;AAED;;;;;AAKG;AACI,MAAM,yBAAyB,GAAG,CACvC,KAKC,KACC;IACF,MAAM,EACJ,eAAe,EACf,QAAQ,EACR,gBAAgB,GAAG,uBAAuB,EAC1C,gBAAgB,EAAE,iBAAiB,GAAG,SAAS,EAC/C,eAAe,EAAE,gBAAgB,GAAG,SAAS,EAC7C,mBAAmB,EAAE,oBAAoB,GAAG,SAAS,EACrD,UAAU,EACV,aAAa,EACb,eAAe,EACf,QAAQ,EACR,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,GACpB,GAAG,KAAK;AAET,IAAA,MAAM,IAAI,GAAGC,0BAAO,EAAE;AACtB,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAGH,oCAAiB,EAAE;AAClD,IAAA,MAAM,eAAe,GAAG,kBAAkB,EAAE;IAE5C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGC,cAAQ,CAAC,iBAAiB,CAAC;IAC3E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAGA,cAAQ,CAAC,gBAAgB,CAAC;IACxE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GACjDA,cAAQ,CAAC,oBAAoB,CAAC;IAEhC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC;IAC1E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC;AAE1D,IAAA,MAAM,OAAO,GAAG,uBAAuB,CAAC,IAAI,CAAC;IAC7C,MAAM,eAAe,GAAG,eAAe,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS;AAE1E,IAAA,MAAM,SAAS,GAAG,OAAO,IAAI,eAAe;AAC5C,IAAA,MAAM,cAAc,GAAGG,YAAM,CAAqB,SAAS,CAAC;AAE5D,IAAA,MAAM,WAAW,GAAGC,iBAAW,CAC7B,CAAC,KAAuB,KAAI;AAC1B,QAAA,MAAM,GAAG,GAAG,KAAK,EAAE,GAAG;AACtB,QAAA,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;AAC7B,YAAA,cAAc,CAAC,OAAO,GAAG,SAAS;YAClC,oBAAoB,CAAC,KAAK,CAAC;YAC3B;QACF;AAEA,QAAA,MAAM,KAAK,GAAG,GAAG,GAAG,SAAS;AAC7B,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,IAAI,KAAK;AAEpD,QAAA,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,IAAI,YAAY;AAClE,QAAA,cAAc,CAAC,OAAO,GAAG,eAAe;AAExC,QAAA,oBAAoB,CAAC,CAAC,IAAI,KAAI;AAC5B,YAAA,IAAI,IAAI,IAAI,eAAe,GAAG,iCAAiC;AAC7D,gBAAA,OAAO,KAAK;AACd,YAAA,IAAI,CAAC,IAAI,IAAI,eAAe,GAAG,iCAAiC;AAC9D,gBAAA,OAAO,IAAI;AAEb,YAAA,OAAO,IAAI;AACb,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EACD,CAAC,SAAS,CAAC,CACZ;AAED,IAAA,MAAM,WAAW,GAAiCC,aAAO,CAAC,MAAK;QAC7D,IAAI,CAAC,gBAAgB,EAAE;AACrB,YAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC5B;QAEA,MAAM,OAAO,GAAwC,EAAE;QAEvD,IAAI,iBAAiB,EAAE;AACrB,YAAA,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;QAC5B;AAEA,QAAA,MAAM,wBAAwB,GAC5B,eAAe,EAAE,cAAc,EAAE,wBAAwB;AAE3D,QAAA,IACE,iBAAiB;YACjB,wBAAwB;AACxB,YAAA,wBAAwB,EAAE,QAAQ,CAAC,KAAK,CAAC,EACzC;AACA,YAAA,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAChC;QAEA,OAAO;AACL,YAAA,QAAQ,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC;AAC5B,YAAA,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,SAAS;SACjD;AACH,IAAA,CAAC,EAAE;QACD,iBAAiB;QACjB,eAAe,EAAE,cAAc,EAAE,wBAAwB;QACzD,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,eAAe,GAAGF,YAAM,CAAsB,SAAS,CAAC;IAC9DF,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,eAAe,GAAG,WAAW,CAAC,QAAQ;AAC5C,QAAA,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO;QAE5C,IACE,CAAC,CAAC,gBAAgB;AAClB,YAAA,YAAY,KAAK,SAAS;YAC1B,YAAY,KAAK,eAAe,EAChC;AACA,YAAA,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,+BAA+B,EAAE;AAClD,gBAAA,QAAQ,EAAE,eAAe;gBACzB,MAAM,EAAE,WAAW,EAAE,MAAM;gBAC3B,KAAK,EAAE,cAAc,CAAC,OAAO;gBAC7B,SAAS;AACV,aAAA,CAAC;QACJ;AACA,QAAA,eAAe,CAAC,OAAO,GAAG,eAAe;AAC3C,IAAA,CAAC,EAAE;AACD,QAAA,WAAW,CAAC,QAAQ;AACpB,QAAA,WAAW,CAAC,MAAM;QAClB,gBAAgB;AAChB,QAAA,IAAI,EAAE,MAAM;QACZ,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,MAAM,0BAA0B,GAAGG,iBAAW,CAAC,CAAC,QAAgB,KAAI;QAClE,mBAAmB,CAAC,OAAO,CAAC;QAC5B,kBAAkB,CAAC,QAAQ,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,yBAAyB,GAAGA,iBAAW,CAC3C,CAAC,SAAA,GAAiC,MAAM,KAAI;QAC1C,mBAAmB,CAAC,MAAM,CAAC;QAC3B,sBAAsB,CAAC,SAAS,CAAC;IACnC,CAAC,EACD,EAAE,CACH;AAED,IAAA,MAAM,uBAAuB,GAAGA,iBAAW,CAAC,MAAK;QAC/C,mBAAmB,CAAC,SAAS,CAAC;QAC9B,kBAAkB,CAAC,SAAS,CAAC;QAC7B,sBAAsB,CAAC,SAAS,CAAC;AAEjC,QAAA,cAAc,CAAC,OAAO,GAAG,SAAS;QAClC,oBAAoB,CAAC,KAAK,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGJ,cAAQ,CAAe,YAAY,CAAC,IAAI,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACrDC,eAAS,CAAC,MAAK;AACb,QAAA,eAAe,CACb,eAAe,EACf,kBAAkB,EAClB,kBAAkB,CACnB,CAAC,IAAI,CAAC,CAAC,gBAAgB,KAAI;YAC1B,SAAS,CAAC,gBAAgB,CAAC;AAC3B,YAAA,cAAc,CAAC,gBAAgB,KAAK,YAAY,CAAC,IAAI,CAAC;AACxD,QAAA,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,EAAE,eAAe,CAAC,CAAC;IAE7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGD,cAAQ,EAAU;IAC9CC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,MAAM,KAAK,YAAY,CAAC,EAAE;YAAE;QAEhCK,0BAAU,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE;aAC/C,IAAI,CAAC,SAAS;AACd,aAAA,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC;IAEjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGN,cAAQ,EAAe;IACzDC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,MAAM,KAAK,YAAY,CAAC,UAAU;YAAE;AAExC,QAAAM,6BAAa,CAAC;AACZ,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,SAAS,EAAE,aAAa;SACzB;aACE,IAAI,CAAC,YAAY;AACjB,aAAA,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,GAAG,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;AAErC,IAAA,MAAM,WAAW,GAAGH,iBAAW,CAC7B,CAAC,KAAU,KAAI;AACb,QAAA,OAAO,CAAC,IAAI,CACV,4DAA4D,CAC7D;AACD,QAAA,uBAAuB,EAAE;AACzB,QAAA,OAAO,GAAG,KAAK,CAAC;AAClB,IAAA,CAAC,EACD,CAAC,uBAAuB,EAAE,OAAO,CAAC,CACnC;AAED,IAAA,MAAM,OAAO,GAAG,eAAe,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,SAAS;AAExD,IAAA,MAAM,YAAY,GAAGC,aAAO,CAC1B,OAAO;QACL,WAAW;QACX,WAAW;QACX,OAAO;QACP,SAAS;QACT,eAAe;QACf,mBAAmB;QACnB,gBAAgB;QAChB,uBAAuB;QACvB,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB;QAChB,UAAU;QACV,aAAa;QACb,QAAQ;AACR,QAAA,OAAO,EAAE,WAAW;QACpB,mBAAmB;AACpB,KAAA,CAAC,EACF;QACE,WAAW;QACX,WAAW;QACX,OAAO;QACP,SAAS;QACT,eAAe;QACf,mBAAmB;QACnB,gBAAgB;QAChB,uBAAuB;QACvB,yBAAyB;QACzB,0BAA0B;QAC1B,gBAAgB;QAChB,UAAU;QACV,aAAa;QACb,QAAQ;QACR,WAAW;QACX,mBAAmB;AACpB,KAAA,CACF;AACD,IAAA,QACEG,eAAA,CAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EAAA,CAC1C,QAAQ,EACR,OAAO,KACNC,cAAA,CAAC,iBAAiB,IAChB,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAA,EAAA,CACwB;AAE/B;AAEA,MAAM,iBAAiB,GAAG,CAAC,KAM1B,KAAI;AACH,IAAA,MAAM,IAAI,GAAGP,0BAAO,EAAE;AACtB,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,KAAK;AAC5D,IAAA,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC;AAClE,IAAA,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,GAAG;AACzC,IAAA,MAAM,cAAc,GAAGC,YAAM,CAAqC,SAAS,CAAC;AAC5E,IAAA,cAAc,CAAC,OAAO,GAAG,OAAO;AAEhC,IAAA,MAAM,cAAc,GAAGA,YAAM,CAE3B,SAAS,CAAC;AACZ,IAAA,cAAc,CAAC,OAAO,GAAG,OAAO;IAEhCF,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,gBAAgB;YAAE;QAEhC,YAAY,CAAC,IAAI,CAAC;AAClB,QAAA,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,KAAI;AACnE,YAAA,OAAO,KAAK,CACV,EAAE,EACF,CAAC,KAAK,KAAK,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,EAC1C,CAAC,KAAuB,KAAK,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,CAC7D;AACH,QAAA,CAAC,CAAC;AACF,QAAA,UAAU,CAAC,OAAO,CAAC,MAAK;YACtB,YAAY,CAAC,KAAK,CAAC;AACrB,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,MAAK;AACV,YAAA,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA,uBAAA,CAAyB,EAAE,GAAG,CAAC,CAAC;AAC3E,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAEjD,IAAA,OAAO,QAAQ;AACjB,CAAC;AAED,MAAM,WAAW,GAAG,CAClB,GAAkC,EAClC,MAA0B,EAC1B,IAAsB,EACtB,MAAoB,KAClB;AACF,IAAA,MAAM,EACJ,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,QAAQ,EACR,mBAAmB,GACpB,GAAG,GAAG;AAEP,IAAA,MAAM,QAAQ,GAAGE,YAAM,CAAmB,IAAI,CAAC;AAC/C,IAAA,MAAM,SAAS,GAAGA,YAAM,CAAoB,IAAI,CAAC;AACjD,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAmB,IAAI,CAAC;AACjD,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGH,cAAQ,CACxC;AACE,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,MAAM,EAAE,IAAI;AACb,KAAA,CACF;IAED,MAAM,KAAK,GAAGI,iBAAW,CACvB,CACE,EAAe,EACf,OAA8B,EAC9B,OAA2C,KACzC;AACF,QAAA,IAAI,YAAqC;AACzC,QAAA,IAAI,SAAwC;AAC5C,QAAA,IAAI,QAA8B;QAElC,MAAM,MAAM,GAAG,IAAI,OAAO,CAAc,CAAC,OAAO,EAAE,MAAM,KAAI;YAC1D,IAAI,CAAC,gBAAgB,EAAE;AACrB,gBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;gBACxC;YACF;AAEA,YAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO;AAChC,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO;AAClC,YAAA,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO;YAEpC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,cAAc,EAAE;YAEnC,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;gBAC1D;YACF;AAEA,YAAA,IAAI,MAAM,KAAK,YAAY,CAAC,UAAU,EAAE;AACtC,gBAAA,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,0BAA0B,EAAE;oBAC7C,gBAAgB;oBAChB,mBAAmB;oBACnB,eAAe;oBACf,MAAM;oBACN,aAAa;AACd,iBAAA,CAAC;gBAEF,IAAI,CAAC,OAAO,EAAE;AACZ,oBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;oBAC/D;gBACF;AAEA,gBAAA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,EAAE;AACzC,gBAAAM,kBAAS,CAAC,MACR,YAAY,CAAC;AACX,oBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,IAAI,CAAC;AAC/B,oBAAA,MAAM,EAAE,aAAa,CAAC,MAAM,IAAI,CAAC;AAClC,iBAAA,CAAC,CACH;AAED,gBAAA,SAAS,GAAG,IAAIC,iCAAiB,CAC/B,KAAK,EACL;AACE,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,SAAS,EAAE,aAAa;oBACxB,mBAAmB;oBACnB,eAAe;oBACf,gBAAgB;oBAChB,mBAAmB;AACpB,iBAAA,EACD,EAAE,OAAO,EAAE,OAAO,EAAE,CACrB;gBACD;AACG,qBAAA,KAAK;AACL,qBAAA,IAAI,CAAC,CAAC,cAAc,KAAI;oBACvB,YAAY,GAAG,IAAI,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC;oBAChD,OAAO,CAAC,YAAY,CAAC;AACvB,gBAAA,CAAC;AACA,qBAAA,KAAK,CAAC,CAAC,KAAK,KAAI;oBACf,MAAM,CAAC,KAAK,CAAC;AACf,gBAAA,CAAC,CAAC;gBAEJ;YACF;AAEA,YAAA,IAAI,MAAM,KAAK,YAAY,CAAC,EAAE,EAAE;AAC9B,gBAAA,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,KAAK,eAAe,IAAI,CAAC,SAAS,CAAC,EAAE;AAC5D,oBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;oBAC/D;gBACF;AAEA,gBAAA,OAAO,CAAC,SAAS,GAAG,EAAE;AACtB,gBAAA,OAAO,CAAC,IAAI,EAAE,CAAC,IAAI,CACjB,MAAK;AACH,oBAAA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,EAAE;AACzC,oBAAAD,kBAAS,CAAC,MACR,YAAY,CAAC;AACX,wBAAA,KAAK,EAAE,aAAa,CAAC,KAAK,IAAI,CAAC;AAC/B,wBAAA,MAAM,EAAE,aAAa,CAAC,MAAM,IAAI,CAAC;AAClC,qBAAA,CAAC,CACH;AACD,oBAAA,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,0BAA0B,EAAE;wBAC7C,gBAAgB;wBAChB,mBAAmB;wBACnB,eAAe;wBACf,MAAM;AACP,qBAAA,CAAC;oBAEF,IAAI,CAAC,MAAM,EAAE;AACX,wBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;wBAC/C;oBACF;oBAEA,QAAQ,GAAGE,8BAAc,CACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR;wBACE,gBAAgB;wBAChB,mBAAmB;wBACnB,eAAe,EAAE,SAAS,IAAI,SAAS;qBACxC,EACD,OAAO,CACR;AACD,oBAAA,YAAY,GAAG,QAAQ,CAAC,aAAa,EAAE;oBAEvC,OAAO,CAAC,YAAY,CAAC;gBACvB,CAAC,EACD,MAAK;AACH,oBAAA,MAAM,CAAC,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;AAC7D,gBAAA,CAAC,CACF;gBACD;YACF;AAEA,YAAA,MAAM,CAAC,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;AACpD,QAAA,CAAC,CAAC;QAEF,OAAO;YACL,MAAM;YACN,IAAI,EAAE,MAAK;gBACT,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,2BAA2B,EAAE,IAAI,CAAC;gBACrD,SAAS,EAAE,IAAI,EAAE;gBACjB,QAAQ,EAAE,OAAO,EAAE;gBACnB,IAAI,QAAQ,CAAC,OAAO;AAAE,oBAAA,QAAQ,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI;AACvD,gBAAA,IAAI,YAAY;oBAAEC,gCAAoB,CAAC,YAAY,CAAC;YACtD,CAAC;SACF;AACH,IAAA,CAAC,EACD;QACE,mBAAmB;QACnB,gBAAgB;QAChB,eAAe;AACf,QAAA,IAAI,EAAE,MAAM;QACZ,MAAM;QACN,MAAM;QACN,aAAa;QACb,QAAQ;QACR,mBAAmB;AACpB,KAAA,CACF;IAED,MAAM,QAAQ,IACZL,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,aAC5CC,cAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,sCAAsC,EACtC,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,KAAK;oBAChC,4CAA4C,CAC/C,EACD,GAAG,EAAE,QAAQ,EACb,WAAW,EAAA,IAAA,EACX,KAAK,EAAA,IAAA,EACL,QAAQ,EAAE,KAAK,EAAA,GACX,SAAS,EAAA,CACb,EACD,eAAe,KACdA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iDAAiD,EAC3D,GAAG,EAAC,YAAY,EAChB,GAAG,EAAE,UAAU,EACf,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,eAAe,EAAA,GAChB,SAAS,EAAA,CACb,CACH,EACDA,cAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,8CAA8C,EAAA,GACpD,SAAS,EACb,GAAG,EAAE,SAAS,EAAA,CACd,CAAA,EAAA,CACE,CACP;AAED,IAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;AAC5B,CAAC;;;;"}
|
package/dist/embedded.cjs.js
CHANGED
|
@@ -7,7 +7,7 @@ var videoClient = require('@stream-io/video-client');
|
|
|
7
7
|
var react$1 = require('@floating-ui/react');
|
|
8
8
|
var clsx = require('clsx');
|
|
9
9
|
|
|
10
|
-
const Audio = react.memo(function
|
|
10
|
+
const Audio = react.memo(function AudioRender({ participant, trackType = 'audioTrack', ...rest }) {
|
|
11
11
|
const call = videoReactBindings.useCall();
|
|
12
12
|
const [audioElement, setAudioElement] = react.useState(null);
|
|
13
13
|
const { userId, sessionId } = participant;
|
|
@@ -535,7 +535,7 @@ const normalizeString = (value) => value
|
|
|
535
535
|
* @description Extends video element with `stream` property
|
|
536
536
|
* (`srcObject`) to reactively handle stream changes
|
|
537
537
|
*/
|
|
538
|
-
const BaseVideo = react.forwardRef(function
|
|
538
|
+
const BaseVideo = react.forwardRef(function BaseVideoRender({ stream, ...rest }, ref) {
|
|
539
539
|
const [videoElement, setVideoElement] = react.useState(null);
|
|
540
540
|
react.useEffect(() => {
|
|
541
541
|
if (!videoElement || !stream)
|
|
@@ -581,12 +581,12 @@ const InitialsFallback = (props) => {
|
|
|
581
581
|
return (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
|
|
582
582
|
};
|
|
583
583
|
|
|
584
|
-
const DefaultVideoPlaceholder = react.forwardRef(function
|
|
584
|
+
const DefaultVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
|
|
585
585
|
const { t } = videoReactBindings.useI18n();
|
|
586
586
|
return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
|
|
587
587
|
});
|
|
588
588
|
|
|
589
|
-
const DefaultPictureInPicturePlaceholder = react.forwardRef(function
|
|
589
|
+
const DefaultPictureInPicturePlaceholder = react.forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
|
|
590
590
|
const { t } = videoReactBindings.useI18n();
|
|
591
591
|
return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
|
|
592
592
|
});
|
|
@@ -713,7 +713,7 @@ const BackgroundFiltersProvider = (props) => {
|
|
|
713
713
|
return (jsxRuntime.jsx(react.Suspense, { fallback: SuspenseFallback, children: jsxRuntime.jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
|
|
714
714
|
};
|
|
715
715
|
|
|
716
|
-
const IconButton = react.forwardRef(function
|
|
716
|
+
const IconButton = react.forwardRef(function IconButtonRender(props, ref) {
|
|
717
717
|
const { icon, enabled, variant, onClick, className, ...rest } = props;
|
|
718
718
|
return (jsxRuntime.jsx("button", { className: clsx('str-video__call-controls__button', className, {
|
|
719
719
|
[`str-video__call-controls__button--variant-${variant}`]: variant,
|
|
@@ -724,7 +724,7 @@ const IconButton = react.forwardRef(function IconButton(props, ref) {
|
|
|
724
724
|
}, ref: ref, ...rest, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
|
|
725
725
|
});
|
|
726
726
|
|
|
727
|
-
const CompositeButton = react.forwardRef(function
|
|
727
|
+
const CompositeButton = react.forwardRef(function CompositeButtonRender({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
|
|
728
728
|
return (jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button', className, {
|
|
729
729
|
'str-video__composite-button--caption': caption,
|
|
730
730
|
'str-video__composite-button--menu': Menu,
|
|
@@ -738,7 +738,7 @@ const CompositeButton = react.forwardRef(function CompositeButton({ disabled, ca
|
|
|
738
738
|
onClick?.(e);
|
|
739
739
|
}, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
|
|
740
740
|
});
|
|
741
|
-
const DefaultToggleMenuButton = react.forwardRef(function
|
|
741
|
+
const DefaultToggleMenuButton = react.forwardRef(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
|
|
742
742
|
return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
|
|
743
743
|
'str-video__menu-toggle-button--active': menuShown,
|
|
744
744
|
}), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
|
|
@@ -897,7 +897,7 @@ const RecordEndConfirmation = (props) => {
|
|
|
897
897
|
const handleClick = createCallControlHandler(props, toggleCallRecording);
|
|
898
898
|
return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsxRuntime.jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsxRuntime.jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
|
|
899
899
|
};
|
|
900
|
-
const ToggleEndRecordingMenuButton = react.forwardRef(function
|
|
900
|
+
const ToggleEndRecordingMenuButton = react.forwardRef(function ToggleEndRecordingMenuButtonRender(props, ref) {
|
|
901
901
|
return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsxRuntime.jsx(Icon, { icon: "recording-off" }) }));
|
|
902
902
|
});
|
|
903
903
|
const RecordCallConfirmationButton = (props) => {
|
|
@@ -976,7 +976,7 @@ const defaultReactions = [
|
|
|
976
976
|
const ReactionsButton = ({ reactions = defaultReactions, }) => {
|
|
977
977
|
return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: MenuVisualType.MENU, children: jsxRuntime.jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
|
|
978
978
|
};
|
|
979
|
-
const ToggleReactionsMenuButton = react.forwardRef(function
|
|
979
|
+
const ToggleReactionsMenuButton = react.forwardRef(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
|
|
980
980
|
const { t } = videoReactBindings.useI18n();
|
|
981
981
|
return (jsxRuntime.jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
|
|
982
982
|
});
|
|
@@ -1210,7 +1210,7 @@ const SpeakerTest = (props) => {
|
|
|
1210
1210
|
const audioElementRef = react.useRef(null);
|
|
1211
1211
|
const [isPlaying, setIsPlaying] = react.useState(false);
|
|
1212
1212
|
const { t } = videoReactBindings.useI18n();
|
|
1213
|
-
const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.40.
|
|
1213
|
+
const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.40.2"}/assets/piano.mp3`, } = props;
|
|
1214
1214
|
// Update audio output device when selection changes
|
|
1215
1215
|
react.useEffect(() => {
|
|
1216
1216
|
const audio = audioElementRef.current;
|
|
@@ -1309,7 +1309,7 @@ const DeviceSelectorVideo = ({ title, visualType, }) => {
|
|
|
1309
1309
|
}, title: title, visualType: visualType, icon: "camera", PreviewItem: DeviceVideoPreviewItem }));
|
|
1310
1310
|
};
|
|
1311
1311
|
|
|
1312
|
-
react.forwardRef(function
|
|
1312
|
+
react.forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
|
|
1313
1313
|
const { t } = videoReactBindings.useI18n();
|
|
1314
1314
|
return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
|
|
1315
1315
|
'str-video__device-settings__button--active': menuShown,
|
|
@@ -1434,7 +1434,7 @@ const EndCallMenu = (props) => {
|
|
|
1434
1434
|
const { t } = videoReactBindings.useI18n();
|
|
1435
1435
|
return (jsxRuntime.jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.END_CALL], children: jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
|
|
1436
1436
|
};
|
|
1437
|
-
const CancelCallToggleMenuButton = react.forwardRef(function
|
|
1437
|
+
const CancelCallToggleMenuButton = react.forwardRef(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
|
|
1438
1438
|
const { t } = videoReactBindings.useI18n();
|
|
1439
1439
|
return (jsxRuntime.jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
|
|
1440
1440
|
});
|
|
@@ -1481,7 +1481,7 @@ var Status;
|
|
|
1481
1481
|
Status["BAD"] = "Bad";
|
|
1482
1482
|
})(Status || (Status = {}));
|
|
1483
1483
|
|
|
1484
|
-
react.forwardRef(function
|
|
1484
|
+
react.forwardRef(function ToggleMenuButtonRender(props, ref) {
|
|
1485
1485
|
const { t } = videoReactBindings.useI18n();
|
|
1486
1486
|
const { caption, menuShown } = props;
|
|
1487
1487
|
return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsxRuntime.jsx(Icon, { icon: "stats" }) }));
|
|
@@ -1509,7 +1509,7 @@ const CallParticipantListHeader = ({ onClose, }) => {
|
|
|
1509
1509
|
return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
|
|
1510
1510
|
};
|
|
1511
1511
|
|
|
1512
|
-
const CallParticipantListingItem = react.memo(function
|
|
1512
|
+
const CallParticipantListingItem = react.memo(function CallParticipantListingItemRender({ participant, DisplayName = DefaultDisplayName, }) {
|
|
1513
1513
|
const isAudioOn = videoClient.hasAudio(participant);
|
|
1514
1514
|
const isVideoOn = videoClient.hasVideo(participant);
|
|
1515
1515
|
const isPinnedOn = videoClient.isPinned(participant);
|
|
@@ -1535,7 +1535,7 @@ const DefaultDisplayName = ({ participant }) => {
|
|
|
1535
1535
|
}
|
|
1536
1536
|
return (jsxRuntime.jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
|
|
1537
1537
|
};
|
|
1538
|
-
const ToggleButton$2 = react.forwardRef(function
|
|
1538
|
+
const ToggleButton$2 = react.forwardRef(function ToggleButtonRender(props, ref) {
|
|
1539
1539
|
return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
|
|
1540
1540
|
});
|
|
1541
1541
|
|
|
@@ -1666,7 +1666,7 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
|
|
|
1666
1666
|
});
|
|
1667
1667
|
return (jsxRuntime.jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
|
|
1668
1668
|
};
|
|
1669
|
-
const ToggleButton$1 = react.forwardRef(function
|
|
1669
|
+
const ToggleButton$1 = react.forwardRef(function ToggleButtonRender(props, ref) {
|
|
1670
1670
|
return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
|
|
1671
1671
|
});
|
|
1672
1672
|
|
|
@@ -1819,7 +1819,7 @@ const PermissionRequests = () => {
|
|
|
1819
1819
|
overflowY: 'auto',
|
|
1820
1820
|
}, permissionRequests: permissionRequests, handleUpdatePermission: handleUpdatePermission }))] }));
|
|
1821
1821
|
};
|
|
1822
|
-
const PermissionRequestList = react.forwardRef(function
|
|
1822
|
+
const PermissionRequestList = react.forwardRef(function PermissionRequestListRender(props, ref) {
|
|
1823
1823
|
const { permissionRequests, handleUpdatePermission, ...rest } = props;
|
|
1824
1824
|
const { t } = videoReactBindings.useI18n();
|
|
1825
1825
|
return (jsxRuntime.jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
|
|
@@ -1883,7 +1883,7 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
|
|
|
1883
1883
|
return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
|
|
1884
1884
|
};
|
|
1885
1885
|
|
|
1886
|
-
const ToggleButton = react.forwardRef(function
|
|
1886
|
+
const ToggleButton = react.forwardRef(function ToggleButtonRender(props, ref) {
|
|
1887
1887
|
return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
|
|
1888
1888
|
});
|
|
1889
1889
|
const DefaultScreenShareOverlay = () => {
|
|
@@ -1943,14 +1943,14 @@ const SpeechIndicator = () => {
|
|
|
1943
1943
|
return (jsxRuntime.jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" })] }));
|
|
1944
1944
|
};
|
|
1945
1945
|
|
|
1946
|
-
const ParticipantView = react.memo(react.forwardRef(function
|
|
1946
|
+
const ParticipantView = react.memo(react.forwardRef(function ParticipantViewRender({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
|
|
1947
1947
|
const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
|
|
1948
1948
|
const hasAudioTrack = videoClient.hasAudio(participant);
|
|
1949
1949
|
const hasVideoTrack = videoClient.hasVideo(participant);
|
|
1950
1950
|
const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
|
|
1951
1951
|
const [trackedElement, setTrackedElement] = react.useState(null);
|
|
1952
1952
|
const [contextVideoElement, setContextVideoElement] = react.useState(null);
|
|
1953
|
-
const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] = react.useState(null);
|
|
1953
|
+
const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement,] = react.useState(null);
|
|
1954
1954
|
useTrackElementVisibility({
|
|
1955
1955
|
sessionId,
|
|
1956
1956
|
trackedElement,
|
|
@@ -1984,7 +1984,8 @@ const ParticipantView = react.memo(react.forwardRef(function ParticipantView({ p
|
|
|
1984
1984
|
return (jsxRuntime.jsx("div", { "data-testid": "participant-view", ref: (element) => {
|
|
1985
1985
|
applyElementToRef(ref, element);
|
|
1986
1986
|
setTrackedElement(element);
|
|
1987
|
-
}, className: clsx('str-video__participant-view', isDominantSpeaker &&
|
|
1987
|
+
}, className: clsx('str-video__participant-view', isDominantSpeaker &&
|
|
1988
|
+
'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
|
|
1988
1989
|
trackType !== 'videoTrack' ||
|
|
1989
1990
|
isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
|
|
1990
1991
|
}));
|
|
@@ -2867,7 +2868,7 @@ const JoinError = ({ onJoin }) => {
|
|
|
2867
2868
|
return (jsxRuntime.jsxs("div", { className: "str-video__embedded-join-error", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-join-error__title", children: t('Failed to join the call') }), jsxRuntime.jsx("p", { className: "str-video__embedded-join-error__message", children: t("We couldn't connect to the server. Please check your connection and try again.") }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('Try again')] })] }));
|
|
2868
2869
|
};
|
|
2869
2870
|
|
|
2870
|
-
const ToggleMenuButton$1 = react.forwardRef(function
|
|
2871
|
+
const ToggleMenuButton$1 = react.forwardRef(function ToggleMenuButtonRender(props, ref) {
|
|
2871
2872
|
const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
|
|
2872
2873
|
const { selectedDevice: selectedMic, devices: microphones } = useMicrophoneState();
|
|
2873
2874
|
return (jsxRuntime.jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsxRuntime.jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "mic" }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: microphones?.find((m) => m.deviceId === selectedMic)
|
|
@@ -2878,7 +2879,7 @@ const ToggleMicButton = () => {
|
|
|
2878
2879
|
return (jsxRuntime.jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton$1, visualType: MenuVisualType.MENU, children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }));
|
|
2879
2880
|
};
|
|
2880
2881
|
|
|
2881
|
-
const ToggleMenuButton = react.forwardRef(function
|
|
2882
|
+
const ToggleMenuButton = react.forwardRef(function ToggleMenuButtonRender(props, ref) {
|
|
2882
2883
|
const { useCameraState } = videoReactBindings.useCallStateHooks();
|
|
2883
2884
|
const { selectedDevice: selectedCamera, devices: cameras } = useCameraState();
|
|
2884
2885
|
return (jsxRuntime.jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsxRuntime.jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "camera" }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: cameras?.find((c) => c.deviceId === selectedCamera)
|