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

package/dist/esm/src/embedded/livestream/viewer/ViewerLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerLayout.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { useCallDuration, useLayout, useWakeLock } from '../../hooks';\nimport {\n  CallParticipantsList,\n  CancelCallConfirmButton,\n  CompositeButton,\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MicCaptureErrorNotification,\n  ReactionsButton,\n  ToggleAudioPublishingButton,\n  ToggleVideoPublishingButton,\n  WithTooltip,\n} from '../../../components';\nimport {\n  CameraMenuWithBlur,\n  ConnectionNotification,\n  ViewersCount,\n} from '../../shared';\n\nexport const ViewerLayout = () => {\n  useWakeLock();\n  const { t } = useI18n();\n\n  const { useParticipantCount, useCallSession } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const session = useCallSession();\n  const { elapsed } = useCallDuration(session?.live_started_at);\n  const { Component: LayoutComponent, props: layoutProps } = useLayout();\n  const [showParticipants, setShowParticipants] = useState(false);\n\n  const handleCloseParticipants = useCallback(() => {\n    setShowParticipants(false);\n  }, []);\n\n  const handleToggleParticipants = useCallback(() => {\n    setShowParticipants((prev) => !prev);\n  }, []);\n\n  return (\n    <div className=\"str-video__embedded-call str-video__embedded-livestream\">\n      <ConnectionNotification />\n      <div className=\"str-video__embedded-call-header\">\n        <div className=\"str-video__embedded-livestream-duration\">\n          <span className=\"str-video__embedded-livestream-duration__live-badge\">\n            {t('Live')}\n          </span>\n          <ViewersCount count={participantCount} />\n          {elapsed && (\n            <span className=\"str-video__embedded-livestream-duration__elapsed\">\n              {elapsed}\n            </span>\n          )}\n        </div>\n        <CancelCallConfirmButton />\n      </div>\n      <div className=\"str-video__embedded-layout\">\n        <div className=\"str-video__embedded-layout__stage\">\n          <LayoutComponent {...layoutProps} />\n        </div>\n\n        <div\n          className={clsx(\n            'str-video__embedded-sidebar',\n            showParticipants && 'str-video__embedded-sidebar--open',\n          )}\n        >\n          {showParticipants && (\n            <div className=\"str-video__embedded-participants\">\n              <CallParticipantsList onClose={handleCloseParticipants} />\n            </div>\n          )}\n        </div>\n      </div>\n      <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n        <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n          <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n            <div className=\"str-video__embedded-mobile\">\n              <ReactionsButton />\n            </div>\n          </Restricted>\n          <div className=\"str-video__embedded-desktop\">\n            <div className=\"str-video__embedded-livestream-duration\">\n              <span className=\"str-video__embedded-livestream-duration__live-badge\">\n                {t('Live')}\n              </span>\n              <ViewersCount count={participantCount} />\n              {elapsed && (\n                <span className=\"str-video__embedded-livestream-duration__elapsed\">\n                  {elapsed}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n        <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n          <Restricted\n            requiredGrants={[OwnCapability.SEND_AUDIO]}\n            hasPermissionsOnly\n          >\n            <MicCaptureErrorNotification>\n              <ToggleAudioPublishingButton\n                Menu={\n                  <>\n                    <DeviceSelectorAudioOutput\n                      visualType=\"list\"\n                      title={t('Speaker')}\n                    />\n                    <DeviceSelectorAudioInput\n                      visualType=\"list\"\n                      title={t('Microphone')}\n                    />\n                  </>\n                }\n                menuPlacement=\"top\"\n              />\n            </MicCaptureErrorNotification>\n          </Restricted>\n          <Restricted\n            requiredGrants={[OwnCapability.SEND_VIDEO]}\n            hasPermissionsOnly\n          >\n            <ToggleVideoPublishingButton\n              Menu={<CameraMenuWithBlur />}\n              menuPlacement=\"top\"\n            />\n          </Restricted>\n          <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n            <div className=\"str-video__embedded-desktop\">\n              <ReactionsButton />\n            </div>\n          </Restricted>\n          <div className=\"str-video__embedded-desktop\">\n            <CancelCallConfirmButton />\n          </div>\n        </div>\n        <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n          <WithTooltip title={t('Participants')}>\n            <CompositeButton\n              active={showParticipants}\n              aria-label={t('Participants')}\n              aria-pressed={showParticipants}\n              onClick={handleToggleParticipants}\n            >\n              <Icon icon=\"participants\" />\n            </CompositeButton>\n          </WithTooltip>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/src/embedded/livestream/viewer/ViewerLobby.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import { OwnCapability } from '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import '../../context/ConfigurationContext.js';
+import '../../../core/components/Audio/Audio.js';
+import '../../../core/components/Audio/ParticipantsAudio.js';
+import '../../../core/components/ParticipantView/ParticipantViewContext.js';
+import '../../../core/components/ParticipantView/ParticipantView.js';
+import '../../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../../core/components/StreamCall/StreamCall.js';
+import '../../../core/components/StreamVideo/StreamVideo.js';
+import '../../../core/components/CallLayout/LivestreamLayout.js';
+import '../../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../../core/components/CallLayout/SpeakerLayout.js';
+import '../../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../../core/components/CallLayout/PipLayout/Host.js';
+import '../../../core/components/CallLayout/PipLayout/Grid.js';
+import '../../shared/Lobby/ToggleMicButton.js';
+import '../../shared/Lobby/ToggleCameraButton.js';
+import { ViewersCount } from '../../shared/ViewersCount/ViewersCount.js';
+
+const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
+    if (!startsAt)
+        return false;
+    const now = Date.now();
+    const earliestJoin = +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
+    return now >= earliestJoin && now < +startsAt;
+};
+const ViewerLobby = ({ onJoin }) => {
+    const { t } = useI18n();
+    const { useCallStartsAt, useCallEndedAt, useHasPermissions, useParticipantCount, useIsCallLive, useCallSettings, } = useCallStateHooks();
+    const startsAt = useCallStartsAt();
+    const endedAt = useCallEndedAt();
+    const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);
+    const participantCount = useParticipantCount();
+    const isLive = useIsCallLive();
+    const settings = useCallSettings();
+    const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+    const [autoJoin, setAutoJoin] = useState(false);
+    const [startsAtPassed, setStartsAtPassed] = useState(() => !!startsAt && startsAt.getTime() < Date.now());
+    const [canJoinEarly, setCanJoinEarly] = useState(() => checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    const canJoin = (isLive || canJoinEarly) && (!endedAt || canJoinEndedCall);
+    useEffect(() => {
+        if (canJoin && autoJoin) {
+            onJoin();
+        }
+    }, [canJoin, autoJoin, onJoin]);
+    useEffect(() => {
+        if (canJoinEarly)
+            return;
+        const handle = setInterval(() => {
+            setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+        }, 1000);
+        return () => clearInterval(handle);
+    }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+    useEffect(() => {
+        if (!startsAt || startsAtPassed)
+            return;
+        const check = () => {
+            if (startsAt.getTime() < Date.now()) {
+                setStartsAtPassed(true);
+            }
+        };
+        const interval = setInterval(check, 1000);
+        return () => clearInterval(interval);
+    }, [startsAt, startsAtPassed]);
+    const getStartsAtMessage = () => {
+        if (!startsAt)
+            return null;
+        if (startsAtPassed) {
+            return t('Livestream starts soon');
+        }
+        return t('Livestream starts at {{ time }}', {
+            time: startsAt.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+            }),
+        });
+    };
+    return (jsx("div", { className: "str-video__embedded-viewer-lobby", children: jsxs("div", { className: "str-video__embedded-viewer-lobby__content", children: [jsx("div", { className: "str-video__embedded-viewer-lobby__icon", children: jsx(Icon, { icon: "streaming" }) }), jsx("h2", { className: "str-video__embedded-viewer-lobby__title", children: canJoin
+                        ? t('Stream is ready!')
+                        : t('Waiting for the livestream to start') }), !canJoin && getStartsAtMessage() && (jsx("p", { className: "str-video__embedded-viewer-lobby__starts-at", children: getStartsAtMessage() })), participantCount > 0 && jsx(ViewersCount, { count: participantCount }), jsx("div", { className: "str-video__embedded-viewer-lobby__actions", children: canJoin ? (jsx("button", { className: "str-video__button", onClick: onJoin, children: t('Join Stream') })) : (jsxs("label", { className: "str-video__embedded-viewer-lobby__auto-join", children: [jsx("input", { type: "checkbox", checked: autoJoin, onChange: (e) => setAutoJoin(e.target.checked) }), jsx("span", { children: t('Join automatically when stream starts') })] })) })] }) }));
+};
+
+export { ViewerLobby };
+//# sourceMappingURL=ViewerLobby.js.map

package/dist/esm/src/embedded/livestream/viewer/ViewerLobby.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerLobby.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerLobby.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\nimport { ViewersCount } from '../../shared';\nimport { OwnCapability } from '@stream-io/video-client';\n\nconst checkCanJoinEarly = (\n  startsAt: Date | undefined,\n  joinAheadTimeSeconds: number | undefined,\n) => {\n  if (!startsAt) return false;\n  const now = Date.now();\n  const earliestJoin = +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;\n  return now >= earliestJoin && now < +startsAt;\n};\n\nexport type ViewerLobbyProps = {\n  onJoin: () => Promise<void>;\n};\n\nexport const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {\n  const { t } = useI18n();\n  const {\n    useCallStartsAt,\n    useCallEndedAt,\n    useHasPermissions,\n    useParticipantCount,\n    useIsCallLive,\n    useCallSettings,\n  } = useCallStateHooks();\n\n  const startsAt = useCallStartsAt();\n  const endedAt = useCallEndedAt();\n  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);\n\n  const participantCount = useParticipantCount();\n  const isLive = useIsCallLive();\n  const settings = useCallSettings();\n  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;\n\n  const [autoJoin, setAutoJoin] = useState(false);\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n  const [canJoinEarly, setCanJoinEarly] = useState(() =>\n    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),\n  );\n\n  const canJoin = (isLive || canJoinEarly) && (!endedAt || canJoinEndedCall);\n\n  useEffect(() => {\n    if (canJoin && autoJoin) {\n      onJoin();\n    }\n  }, [canJoin, autoJoin, onJoin]);\n\n  useEffect(() => {\n    if (canJoinEarly) return;\n    const handle = setInterval(() => {\n      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));\n    }, 1000);\n\n    return () => clearInterval(handle);\n  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  const getStartsAtMessage = () => {\n    if (!startsAt) return null;\n\n    if (startsAtPassed) {\n      return t('Livestream starts soon');\n    }\n\n    return t('Livestream starts at {{ time }}', {\n      time: startsAt.toLocaleTimeString([], {\n        hour: '2-digit',\n        minute: '2-digit',\n      }),\n    });\n  };\n\n  return (\n    <div className=\"str-video__embedded-viewer-lobby\">\n      <div className=\"str-video__embedded-viewer-lobby__content\">\n        <div className=\"str-video__embedded-viewer-lobby__icon\">\n          <Icon icon=\"streaming\" />\n        </div>\n\n        <h2 className=\"str-video__embedded-viewer-lobby__title\">\n          {canJoin\n            ? t('Stream is ready!')\n            : t('Waiting for the livestream to start')}\n        </h2>\n\n        {!canJoin && getStartsAtMessage() && (\n          <p className=\"str-video__embedded-viewer-lobby__starts-at\">\n            {getStartsAtMessage()}\n          </p>\n        )}\n\n        {participantCount > 0 && <ViewersCount count={participantCount} />}\n\n        <div className=\"str-video__embedded-viewer-lobby__actions\">\n          {canJoin ? (\n            <button className=\"str-video__button\" onClick={onJoin}>\n              {t('Join Stream')}\n            </button>\n          ) : (\n            <label className=\"str-video__embedded-viewer-lobby__auto-join\">\n              <input\n                type=\"checkbox\"\n                checked={autoJoin}\n                onChange={(e) => setAutoJoin(e.target.checked)}\n              />\n              <span>{t('Join automatically when stream starts')}</span>\n            </label>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/embedded/livestream/viewer/ViewerStateRouter.js

@@ -0,0 +1,105 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { OwnCapability, CallingState } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { ViewerLobby } from './ViewerLobby.js';
+import { ViewerLayout } from './ViewerLayout.js';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import { LoadingIndicator } from '../../../components/LoadingIndicator/LoadingIndicator.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import { CallFeedback } from '../../shared/CallFeedback/CallFeedback.js';
+import '../../../core/components/Audio/Audio.js';
+import '../../../core/components/Audio/ParticipantsAudio.js';
+import '../../../core/components/ParticipantView/ParticipantViewContext.js';
+import '../../../core/components/ParticipantView/ParticipantView.js';
+import '../../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../../core/components/StreamCall/StreamCall.js';
+import '../../../core/components/StreamVideo/StreamVideo.js';
+import '../../../core/components/CallLayout/LivestreamLayout.js';
+import '../../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../../core/components/CallLayout/SpeakerLayout.js';
+import '../../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../../core/components/CallLayout/PipLayout/Host.js';
+import '../../../core/components/CallLayout/PipLayout/Grid.js';
+import { JoinError } from '../../shared/JoinError/JoinError.js';
+import '../../shared/Lobby/ToggleMicButton.js';
+import '../../shared/Lobby/ToggleCameraButton.js';
+import { useEmbeddedConfiguration } from '../../context/ConfigurationContext.js';
+import { useIsLivestreamPaused } from '../../hooks/useIsLivestreamPaused.js';
+
+const ViewerStateRouter = () => {
+    const call = useCall();
+    const { onError } = useEmbeddedConfiguration();
+    const { useCallCallingState, useCallEndedAt, useHasPermissions, useLocalParticipant, } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const localParticipant = useLocalParticipant();
+    const endedAt = useCallEndedAt();
+    const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);
+    const isLivestreamPaused = useIsLivestreamPaused();
+    const [joinError, setJoinError] = useState(false);
+    const handleJoin = useCallback(async () => {
+        if (!call)
+            return;
+        setJoinError(false);
+        try {
+            if (call.state.callingState !== CallingState.JOINED) {
+                await call.join();
+            }
+        }
+        catch (e) {
+            onError?.(e);
+            setJoinError(true);
+        }
+    }, [call, onError]);
+    useEffect(() => {
+        if (!call || callingState !== CallingState.LEFT)
+            return;
+        return call.on('call.live_started', () => {
+            call.get().catch((e) => {
+                onError?.(e);
+            });
+        });
+    }, [call, callingState, onError]);
+    if (joinError) {
+        return jsx(JoinError, { onJoin: handleJoin });
+    }
+    switch (callingState) {
+        case CallingState.IDLE:
+        case CallingState.UNKNOWN:
+            return jsx(ViewerLobby, { onJoin: handleJoin });
+        case CallingState.JOINING:
+            if (!localParticipant) {
+                return jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
+            }
+            break;
+        case CallingState.LEFT: {
+            if (isLivestreamPaused) {
+                return jsx(ViewerLobby, { onJoin: handleJoin });
+            }
+            return (jsx(CallFeedback, { onJoin: !endedAt || canJoinEndedCall ? handleJoin : undefined }));
+        }
+    }
+    return jsx(ViewerLayout, {});
+};
+
+export { ViewerStateRouter };
+//# sourceMappingURL=ViewerStateRouter.js.map

package/dist/esm/src/embedded/livestream/viewer/ViewerStateRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerStateRouter.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerStateRouter.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { CallingState, OwnCapability } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { ViewerLobby } from './ViewerLobby';\nimport { ViewerLayout } from './ViewerLayout';\nimport { LoadingIndicator } from '../../../components';\nimport { CallFeedback, JoinError } from '../../shared';\nimport { useEmbeddedConfiguration } from '../../context';\nimport { useIsLivestreamPaused } from '../../hooks';\n\nexport const ViewerStateRouter = () => {\n  const call = useCall();\n  const { onError } = useEmbeddedConfiguration();\n\n  const {\n    useCallCallingState,\n    useCallEndedAt,\n    useHasPermissions,\n    useLocalParticipant,\n  } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const localParticipant = useLocalParticipant();\n  const endedAt = useCallEndedAt();\n  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);\n\n  const isLivestreamPaused = useIsLivestreamPaused();\n  const [joinError, setJoinError] = useState(false);\n  const handleJoin = useCallback(async () => {\n    if (!call) return;\n\n    setJoinError(false);\n    try {\n      if (call.state.callingState !== CallingState.JOINED) {\n        await call.join();\n      }\n    } catch (e) {\n      onError?.(e);\n      setJoinError(true);\n    }\n  }, [call, onError]);\n\n  useEffect(() => {\n    if (!call || callingState !== CallingState.LEFT) return;\n\n    return call.on('call.live_started', () => {\n      call.get().catch((e) => {\n        onError?.(e);\n      });\n    });\n  }, [call, callingState, onError]);\n\n  if (joinError) {\n    return <JoinError onJoin={handleJoin} />;\n  }\n\n  switch (callingState) {\n    case CallingState.IDLE:\n    case CallingState.UNKNOWN:\n      return <ViewerLobby onJoin={handleJoin} />;\n\n    case CallingState.JOINING:\n      if (!localParticipant) {\n        return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n      }\n      break;\n\n    case CallingState.LEFT: {\n      if (isLivestreamPaused) {\n        return <ViewerLobby onJoin={handleJoin} />;\n      }\n\n      return (\n        <CallFeedback\n          onJoin={!endedAt || canJoinEndedCall ? handleJoin : undefined}\n        />\n      );\n    }\n  }\n\n  return <ViewerLayout />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,iBAAiB,GAAG,MAAK;AACpC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;AAE9C,IAAA,MAAM,EACJ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,mBAAmB,GACpB,GAAG,iBAAiB,EAAE;AACvB,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;IAChC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC;AAEzE,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,EAAE;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,YAAW;AACxC,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,IAAI;YACF,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM,EAAE;AACnD,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;YACnB;QACF;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,GAAG,CAAC,CAAC;YACZ,YAAY,CAAC,IAAI,CAAC;QACpB;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEnB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,YAAY,KAAK,YAAY,CAAC,IAAI;YAAE;AAEjD,QAAA,OAAO,IAAI,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAK;YACvC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAI;AACrB,gBAAA,OAAO,GAAG,CAAC,CAAC;AACd,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAEjC,IAAI,SAAS,EAAE;AACb,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC1C;IAEA,QAAQ,YAAY;QAClB,KAAK,YAAY,CAAC,IAAI;QACtB,KAAK,YAAY,CAAC,OAAO;AACvB,YAAA,OAAOA,IAAC,WAAW,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;QAE5C,KAAK,YAAY,CAAC,OAAO;YACvB,IAAI,CAAC,gBAAgB,EAAE;AACrB,gBAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG;YACrE;YACA;AAEF,QAAA,KAAK,YAAY,CAAC,IAAI,EAAE;YACtB,IAAI,kBAAkB,EAAE;AACtB,gBAAA,OAAOA,IAAC,WAAW,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;YAC5C;YAEA,QACEA,IAAC,YAAY,EAAA,EACX,MAAM,EAAE,CAAC,OAAO,IAAI,gBAAgB,GAAG,UAAU,GAAG,SAAS,EAAA,CAC7D;QAEN;;IAGF,OAAOA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG;AACzB;;;;"}

package/dist/esm/src/embedded/shared/BlurToggleButton/BlurToggleButton.js

@@ -0,0 +1,65 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useBackgroundFilters } from '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import { DeviceSelectorVideo } from '../../../components/DeviceSettings/DeviceSelectorVideo.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const BlurToggleButton = () => {
+    const { t } = useI18n();
+    const { useCameraState } = useCallStateHooks();
+    const { isMute } = useCameraState();
+    const { isSupported, isReady, isLoading, backgroundFilter, applyBackgroundBlurFilter, disableBackgroundFilter, } = useBackgroundFilters();
+    const isBlurred = backgroundFilter === 'blur';
+    const isDisabled = !isReady || isLoading || isMute;
+    const handleClick = useCallback(() => {
+        if (isDisabled)
+            return;
+        if (isBlurred) {
+            disableBackgroundFilter();
+        }
+        else {
+            applyBackgroundBlurFilter('high');
+        }
+    }, [
+        applyBackgroundBlurFilter,
+        disableBackgroundFilter,
+        isBlurred,
+        isDisabled,
+    ]);
+    const getLabel = () => {
+        if (isLoading)
+            return t('Applying...');
+        return isBlurred ? t('Disable blur') : t('Blur background');
+    };
+    if (!isSupported)
+        return null;
+    return (jsxs("button", { type: "button", className: clsx('str-video__embedded-blur-toggle', isBlurred && 'str-video__embedded-blur-toggle--active'), disabled: isDisabled, "aria-pressed": isBlurred, onClick: handleClick, children: [jsx(Icon, { icon: "blur-icon" }), jsx("span", { children: getLabel() })] }));
+};
+const CameraMenuWithBlur = () => {
+    return (jsxs(Fragment, { children: [jsx(DeviceSelectorVideo, { visualType: "list" }), jsx("div", { className: "str-video__embedded-blur-toggle-container", children: jsx(BlurToggleButton, {}) })] }));
+};
+
+export { BlurToggleButton, CameraMenuWithBlur };
+//# sourceMappingURL=BlurToggleButton.js.map

package/dist/esm/src/embedded/shared/BlurToggleButton/BlurToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlurToggleButton.js","sources":["../../../../../../../../src/embedded/shared/BlurToggleButton/BlurToggleButton.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  DeviceSelectorVideo,\n  Icon,\n  useBackgroundFilters,\n} from '../../../components';\n\nexport const BlurToggleButton = () => {\n  const { t } = useI18n();\n  const { useCameraState } = useCallStateHooks();\n  const { isMute } = useCameraState();\n\n  const {\n    isSupported,\n    isReady,\n    isLoading,\n    backgroundFilter,\n    applyBackgroundBlurFilter,\n    disableBackgroundFilter,\n  } = useBackgroundFilters();\n\n  const isBlurred = backgroundFilter === 'blur';\n  const isDisabled = !isReady || isLoading || isMute;\n\n  const handleClick = useCallback(() => {\n    if (isDisabled) return;\n\n    if (isBlurred) {\n      disableBackgroundFilter();\n    } else {\n      applyBackgroundBlurFilter('high');\n    }\n  }, [\n    applyBackgroundBlurFilter,\n    disableBackgroundFilter,\n    isBlurred,\n    isDisabled,\n  ]);\n\n  const getLabel = () => {\n    if (isLoading) return t('Applying...');\n    return isBlurred ? t('Disable blur') : t('Blur background');\n  };\n\n  if (!isSupported) return null;\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx(\n        'str-video__embedded-blur-toggle',\n        isBlurred && 'str-video__embedded-blur-toggle--active',\n      )}\n      disabled={isDisabled}\n      aria-pressed={isBlurred}\n      onClick={handleClick}\n    >\n      <Icon icon=\"blur-icon\" />\n      <span>{getLabel()}</span>\n    </button>\n  );\n};\n\nexport const CameraMenuWithBlur = () => {\n  return (\n    <>\n      <DeviceSelectorVideo visualType=\"list\" />\n      <div className=\"str-video__embedded-blur-toggle-container\">\n        <BlurToggleButton />\n      </div>\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AAEnC,IAAA,MAAM,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,GACxB,GAAG,oBAAoB,EAAE;AAE1B,IAAA,MAAM,SAAS,GAAG,gBAAgB,KAAK,MAAM;IAC7C,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,SAAS,IAAI,MAAM;AAElD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,IAAI,UAAU;YAAE;QAEhB,IAAI,SAAS,EAAE;AACb,YAAA,uBAAuB,EAAE;QAC3B;aAAO;YACL,yBAAyB,CAAC,MAAM,CAAC;QACnC;AACF,IAAA,CAAC,EAAE;QACD,yBAAyB;QACzB,uBAAuB;QACvB,SAAS;QACT,UAAU;AACX,KAAA,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAK;AACpB,QAAA,IAAI,SAAS;AAAE,YAAA,OAAO,CAAC,CAAC,aAAa,CAAC;AACtC,QAAA,OAAO,SAAS,GAAG,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC;AAC7D,IAAA,CAAC;AAED,IAAA,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,iCAAiC,EACjC,SAAS,IAAI,yCAAyC,CACvD,EACD,QAAQ,EAAE,UAAU,EAAA,cAAA,EACN,SAAS,EACvB,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CAEpBC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,EAAA,CAAG,EACzBA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,QAAQ,EAAE,EAAA,CAAQ,CAAA,EAAA,CAClB;AAEb;AAEO,MAAM,kBAAkB,GAAG,MAAK;IACrC,QACED,4BACEC,GAAA,CAAC,mBAAmB,IAAC,UAAU,EAAC,MAAM,EAAA,CAAG,EACzCA,aAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EACxDA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CAChB,CAAA,EAAA,CACL;AAEP;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/CallEndedScreen.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useI18n } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const CallEndedScreen = ({ onJoin, onFeedback, }) => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Call ended') }), jsxs("div", { className: "str-video__embedded-call-feedback__ended-actions", children: [onJoin && (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Left by mistake?') }), jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('Rejoin call')] })] }), jsx("div", { className: "str-video__embedded-call-feedback__ended-divider" })] })), jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Help us improve') }), jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onFeedback, children: [jsx(Icon, { icon: "feedback" }), t('Leave feedback')] })] })] })] }));
+};
+
+export { CallEndedScreen };
+//# sourceMappingURL=CallEndedScreen.js.map

package/dist/esm/src/embedded/shared/CallFeedback/CallEndedScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallEndedScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/CallEndedScreen.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface CallEndedScreenProps {\n  onJoin?: () => void;\n  onFeedback: () => void;\n}\n\nexport const CallEndedScreen = ({\n  onJoin,\n  onFeedback,\n}: CallEndedScreenProps) => {\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Call ended')}\n      </h2>\n      <div className=\"str-video__embedded-call-feedback__ended-actions\">\n        {onJoin && (\n          <>\n            <div className=\"str-video__embedded-call-feedback__ended-column\">\n              <p className=\"str-video__embedded-call-feedback__ended-label\">\n                {t('Left by mistake?')}\n              </p>\n              <button\n                type=\"button\"\n                className=\"str-video__embedded-call-feedback__ended-button\"\n                onClick={onJoin}\n              >\n                <Icon icon=\"login\" />\n                {t('Rejoin call')}\n              </button>\n            </div>\n            <div className=\"str-video__embedded-call-feedback__ended-divider\" />\n          </>\n        )}\n        <div className=\"str-video__embedded-call-feedback__ended-column\">\n          <p className=\"str-video__embedded-call-feedback__ended-label\">\n            {t('Help us improve')}\n          </p>\n          <button\n            type=\"button\"\n            className=\"str-video__embedded-call-feedback__ended-button\"\n            onClick={onFeedback}\n          >\n            <Icon icon=\"feedback\" />\n            {t('Leave feedback')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,eAAe,GAAG,CAAC,EAC9B,MAAM,EACN,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,YAAY,CAAC,EAAA,CACb,EACLD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC9D,MAAM,KACLA,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC1D,CAAC,CAAC,kBAAkB,CAAC,EAAA,CACpB,EACJD,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CAEfC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACpB,CAAC,CAAC,aAAa,CAAC,CAAA,EAAA,CACV,CAAA,EAAA,CACL,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,CAAG,CAAA,EAAA,CACnE,CACJ,EACDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC1D,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACnB,EACJD,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,UAAU,EAAA,QAAA,EAAA,CAEnBC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,UAAU,EAAA,CAAG,EACvB,CAAC,CAAC,gBAAgB,CAAC,CAAA,EAAA,CACb,CAAA,EAAA,CACL,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/CallFeedback.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+import { CallEndedScreen } from './CallEndedScreen.js';
+import { RatingScreen } from './RatingScreen.js';
+import { ThankYouScreen } from './ThankYouScreen.js';
+import { useEmbeddedConfiguration } from '../../context/ConfigurationContext.js';
+
+const CallFeedback = ({ onJoin }) => {
+    const call = useCall();
+    const { onError } = useEmbeddedConfiguration();
+    const [state, setState] = useState('ended');
+    const onFeedback = useCallback(() => setState('rating'), []);
+    const handleSubmit = useCallback(async (rating, message) => {
+        if (!call)
+            return;
+        const clampedRating = Math.min(Math.max(1, rating), 5);
+        try {
+            await call.submitFeedback(clampedRating, {
+                reason: message,
+                custom: { message },
+            });
+        }
+        catch (err) {
+            onError?.(err);
+        }
+        finally {
+            setState('submitted');
+        }
+    }, [call, onError]);
+    return (jsx("div", { className: "str-video__embedded-call-feedback", children: state === 'submitted' ? (jsx(ThankYouScreen, {})) : state === 'rating' ? (jsx(RatingScreen, { onSubmit: handleSubmit })) : (jsx(CallEndedScreen, { onJoin: onJoin, onFeedback: onFeedback })) }));
+};
+
+export { CallFeedback };
+//# sourceMappingURL=CallFeedback.js.map

package/dist/esm/src/embedded/shared/CallFeedback/CallFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallFeedback.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/CallFeedback.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { CallEndedScreen } from './CallEndedScreen';\nimport { RatingScreen } from './RatingScreen';\nimport { ThankYouScreen } from './ThankYouScreen';\nimport { useEmbeddedConfiguration } from '../../context';\n\nexport interface CallFeedbackProps {\n  onJoin?: () => void;\n}\n\ntype FeedbackState = 'ended' | 'rating' | 'submitted';\n\nexport const CallFeedback = ({ onJoin }: CallFeedbackProps) => {\n  const call = useCall();\n  const { onError } = useEmbeddedConfiguration();\n  const [state, setState] = useState<FeedbackState>('ended');\n\n  const onFeedback = useCallback(() => setState('rating'), []);\n\n  const handleSubmit = useCallback(\n    async (rating: number, message: string) => {\n      if (!call) return;\n\n      const clampedRating = Math.min(Math.max(1, rating), 5);\n      try {\n        await call.submitFeedback(clampedRating, {\n          reason: message,\n          custom: { message },\n        });\n      } catch (err) {\n        onError?.(err);\n      } finally {\n        setState('submitted');\n      }\n    },\n    [call, onError],\n  );\n\n  return (\n    <div className=\"str-video__embedded-call-feedback\">\n      {state === 'submitted' ? (\n        <ThankYouScreen />\n      ) : state === 'rating' ? (\n        <RatingScreen onSubmit={handleSubmit} />\n      ) : (\n        <CallEndedScreen onJoin={onJoin} onFeedback={onFeedback} />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;MAaa,YAAY,GAAG,CAAC,EAAE,MAAM,EAAqB,KAAI;AAC5D,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,OAAO,CAAC;AAE1D,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;IAE5D,MAAM,YAAY,GAAG,WAAW,CAC9B,OAAO,MAAc,EAAE,OAAe,KAAI;AACxC,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;AACtD,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;AACvC,gBAAA,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,EAAE,OAAO,EAAE;AACpB,aAAA,CAAC;QACJ;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,GAAG,GAAG,CAAC;QAChB;gBAAU;YACR,QAAQ,CAAC,WAAW,CAAC;QACvB;AACF,IAAA,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,YAC/C,KAAK,KAAK,WAAW,IACpBA,GAAA,CAAC,cAAc,EAAA,EAAA,CAAG,IAChB,KAAK,KAAK,QAAQ,IACpBA,GAAA,CAAC,YAAY,EAAA,EAAC,QAAQ,EAAE,YAAY,GAAI,KAExCA,GAAA,CAAC,eAAe,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAA,CAAI,CAC5D,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/RatingScreen.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { StarRating } from './StarRating.js';
+
+const RatingScreen = ({ onSubmit }) => {
+    const { t } = useI18n();
+    const [rating, setRating] = useState(0);
+    const [message, setMessage] = useState('');
+    const handleSubmit = () => {
+        if (rating > 0)
+            onSubmit(rating, message);
+    };
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Share your feedback') }), jsx(StarRating, { value: rating, onChange: setRating }), jsx("textarea", { "aria-label": t('Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsx("button", { type: "button", className: "str-video__button", onClick: handleSubmit, disabled: rating === 0, children: t('Submit feedback') }) })] }));
+};
+
+export { RatingScreen };
+//# sourceMappingURL=RatingScreen.js.map

package/dist/esm/src/embedded/shared/CallFeedback/RatingScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatingScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/RatingScreen.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { StarRating } from './StarRating';\n\ninterface RatingScreenProps {\n  onSubmit: (rating: number, message: string) => void;\n}\n\nexport const RatingScreen = ({ onSubmit }: RatingScreenProps) => {\n  const { t } = useI18n();\n  const [rating, setRating] = useState(0);\n  const [message, setMessage] = useState('');\n\n  const handleSubmit = () => {\n    if (rating > 0) onSubmit(rating, message);\n  };\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Share your feedback')}\n      </h2>\n\n      <StarRating value={rating} onChange={setRating} />\n\n      <textarea\n        aria-label={t('Feedback message')}\n        className=\"str-video__embedded-call-feedback__textarea\"\n        placeholder={t('Tell us about your experience...')}\n        value={message}\n        onChange={(e) => setMessage(e.target.value)}\n        rows={3}\n      />\n\n      <div className=\"str-video__embedded-call-feedback__actions\">\n        <button\n          type=\"button\"\n          className=\"str-video__button\"\n          onClick={handleSubmit}\n          disabled={rating === 0}\n        >\n          {t('Submit feedback')}\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;MAQa,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAC9D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAE1C,MAAM,YAAY,GAAG,MAAK;QACxB,IAAI,MAAM,GAAG,CAAC;AAAE,YAAA,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAC3C,IAAA,CAAC;IAED,QACEA,cAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,qBAAqB,CAAC,EAAA,CACtB,EAELA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAI,EAElDA,GAAA,CAAA,UAAA,EAAA,EAAA,YAAA,EACc,CAAC,CAAC,kBAAkB,CAAC,EACjC,SAAS,EAAC,6CAA6C,EACvD,WAAW,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAClD,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3C,IAAI,EAAE,CAAC,EAAA,CACP,EAEFA,aAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EACzDA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAA,QAAA,EAErB,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACd,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/StarRating.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useI18n } from '@stream-io/video-react-bindings';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const StarRating = ({ value, onChange }) => {
+    const { t } = useI18n();
+    const [hovered, setHovered] = useState(0);
+    const displayValue = hovered || value;
+    const getStarClasses = (star) => clsx('str-video__embedded-call-feedback__star', star <= displayValue && 'str-video__embedded-call-feedback__star--active');
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('How was your call quality?') }), jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('Rate {{ count }} star', { count: star }), children: jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
+};
+
+export { StarRating };
+//# sourceMappingURL=StarRating.js.map

package/dist/esm/src/embedded/shared/CallFeedback/StarRating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StarRating.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/StarRating.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface StarRatingProps {\n  value: number;\n  onChange: (rating: number) => void;\n}\n\nexport const StarRating = ({ value, onChange }: StarRatingProps) => {\n  const { t } = useI18n();\n  const [hovered, setHovered] = useState(0);\n  const displayValue = hovered || value;\n\n  const getStarClasses = (star: number) =>\n    clsx(\n      'str-video__embedded-call-feedback__star',\n      star <= displayValue && 'str-video__embedded-call-feedback__star--active',\n    );\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__rating-section\">\n      <p className=\"str-video__embedded-call-feedback__rating-label\">\n        {t('How was your call quality?')}\n      </p>\n      <div\n        className=\"str-video__embedded-call-feedback__stars\"\n        onMouseLeave={() => setHovered(0)}\n      >\n        {[1, 2, 3, 4, 5].map((star) => (\n          <button\n            key={star}\n            type=\"button\"\n            className={getStarClasses(star)}\n            onClick={() => onChange(star)}\n            onMouseEnter={() => setHovered(star)}\n            aria-label={t('Rate {{ count }} star', { count: star })}\n          >\n            <Icon icon=\"star-filled\" />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK;AAErC,IAAA,MAAM,cAAc,GAAG,CAAC,IAAY,KAClC,IAAI,CACF,yCAAyC,EACzC,IAAI,IAAI,YAAY,IAAI,iDAAiD,CAC1E;IAEH,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,aAChEC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC3D,CAAC,CAAC,4BAA4B,CAAC,EAAA,CAC9B,EACJA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0CAA0C,EACpD,YAAY,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,EAAA,QAAA,EAEhC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAA,QAAA,EAAA,EAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,YAAY,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC,gBACxB,CAAC,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAEvDA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAA,CAAG,EAAA,EAPtB,IAAI,CAQF,CACV,CAAC,EAAA,CACE,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/ThankYouScreen.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useI18n } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const ThankYouScreen = () => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsx(Icon, { icon: "checkmark" }) }), jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Thank you!') }), jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('Your feedback helps improve call quality.') })] }));
+};
+
+export { ThankYouScreen };
+//# sourceMappingURL=ThankYouScreen.js.map

package/dist/esm/src/embedded/shared/CallFeedback/ThankYouScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThankYouScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/ThankYouScreen.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\nexport const ThankYouScreen = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <div className=\"str-video__embedded-call-feedback__checkmark\">\n        <Icon icon=\"checkmark\" />\n      </div>\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Thank you!')}\n      </h2>\n      <p className=\"str-video__embedded-call-feedback__subtitle\">\n        {t('Your feedback helps improve call quality.')}\n      </p>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,aAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC3DA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,EAAA,CAAG,GACrB,EACNA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,YACrD,CAAC,CAAC,YAAY,CAAC,EAAA,CACb,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACvD,CAAC,CAAC,2CAA2C,CAAC,EAAA,CAC7C,CAAA,EAAA,CACA;AAEV;;;;"}