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

package/dist/esm/src/core/components/ParticipantView/ParticipantActionsContextMenu.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useCall, useI18n, Restricted } from '@stream-io/video-react-bindings';
+import { hasAudio, hasVideo, hasScreenShare, hasScreenShareAudio, OwnCapability } from '@stream-io/video-client';
+import { useParticipantViewContext } from './ParticipantViewContext.js';
+import { useMenuContext } from '../../../components/Menu/MenuToggle.js';
+import { GenericMenu, GenericMenuButtonItem } from '../../../components/Menu/GenericMenu.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import { usePictureInPictureState } from '../../hooks/usePictureInPictureState.js';
+
+const ParticipantActionsContextMenu = () => {
+    const { participant, participantViewElement, videoElement } = useParticipantViewContext();
+    const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
+    const call = useCall();
+    const isPiP = usePictureInPictureState(videoElement ?? undefined);
+    const { t } = useI18n();
+    const { pin, sessionId, userId } = participant;
+    const hasAudioTrack = hasAudio(participant);
+    const hasVideoTrack = hasVideo(participant);
+    const hasScreenShareTrack = hasScreenShare(participant);
+    const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+    const blockUser = () => call?.blockUser(userId);
+    const kickUser = () => call?.kickUser({ user_id: userId });
+    const muteAudio = () => call?.muteUser(userId, 'audio');
+    const muteVideo = () => call?.muteUser(userId, 'video');
+    const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
+    const muteScreenShareAudio = () => call?.muteUser(userId, 'screenshare_audio');
+    const grantPermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            grant_permissions: [permission],
+        });
+    };
+    const revokePermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            revoke_permissions: [permission],
+        });
+    };
+    const toggleParticipantPin = () => {
+        if (pin) {
+            call?.unpin(sessionId);
+        }
+        else {
+            call?.pin(sessionId);
+        }
+    };
+    const pinForEveryone = () => {
+        call
+            ?.pinForEveryone({ user_id: userId, session_id: sessionId })
+            .catch((err) => {
+            console.error(`Failed to pin participant ${userId}`, err);
+        });
+    };
+    const unpinForEveryone = () => {
+        call
+            ?.unpinForEveryone({ user_id: userId, session_id: sessionId })
+            .catch((err) => {
+            console.error(`Failed to unpin participant ${userId}`, err);
+        });
+    };
+    const toggleFullscreenMode = () => {
+        if (!fullscreenModeOn) {
+            return participantViewElement?.requestFullscreen().catch(console.error);
+        }
+        return document.exitFullscreen().catch(console.error);
+    };
+    useEffect(() => {
+        // handles the case when fullscreen mode is toggled externally,
+        // e.g., by pressing ESC key or some other keyboard shortcut
+        const handleFullscreenChange = () => {
+            setFullscreenModeOn(!!document.fullscreenElement);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+    const togglePictureInPicture = () => {
+        if (videoElement && !isPiP) {
+            return videoElement
+                .requestPictureInPicture()
+                .catch(console.error);
+        }
+        return document.exitPictureInPicture().catch(console.error);
+    };
+    const { close } = useMenuContext() || {};
+    return (jsxs(GenericMenu, { onItemClick: close, children: [jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxs(Restricted, { requiredGrants: [OwnCapability.PIN_FOR_EVERYONE], children: [jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsx(Restricted, { requiredGrants: [OwnCapability.KICK_USER], children: jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), jsxs(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
+                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
+                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+                }) })), videoElement && document.pictureInPictureEnabled && (jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
+                    direction: isPiP ? t('Leave') : t('Enter'),
+                }) })), jsxs(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+};
+
+export { ParticipantActionsContextMenu };
+//# sourceMappingURL=ParticipantActionsContextMenu.js.map

package/dist/esm/src/core/components/ParticipantView/ParticipantActionsContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantActionsContextMenu.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  hasAudio,\n  hasScreenShare,\n  hasScreenShareAudio,\n  hasVideo,\n  OwnCapability,\n  UpdateUserPermissionsRequestGrantPermissionsEnum,\n  UpdateUserPermissionsRequestRevokePermissionsEnum,\n} from '@stream-io/video-client';\nimport { useParticipantViewContext } from './ParticipantViewContext';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  useMenuContext,\n} from '../../../components/Menu';\nimport { Icon } from '../../../components/Icon';\nimport { usePictureInPictureState } from '../../hooks/usePictureInPictureState';\n\nexport const ParticipantActionsContextMenu = () => {\n  const { participant, participantViewElement, videoElement } =\n    useParticipantViewContext();\n  const [fullscreenModeOn, setFullscreenModeOn] = useState(\n    !!document.fullscreenElement,\n  );\n  const call = useCall();\n  const isPiP = usePictureInPictureState(videoElement ?? undefined);\n  const { t } = useI18n();\n\n  const { pin, sessionId, userId } = participant;\n\n  const hasAudioTrack = hasAudio(participant);\n  const hasVideoTrack = hasVideo(participant);\n  const hasScreenShareTrack = hasScreenShare(participant);\n  const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n\n  const blockUser = () => call?.blockUser(userId);\n  const kickUser = () => call?.kickUser({ user_id: userId });\n  const muteAudio = () => call?.muteUser(userId, 'audio');\n  const muteVideo = () => call?.muteUser(userId, 'video');\n  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');\n  const muteScreenShareAudio = () =>\n    call?.muteUser(userId, 'screenshare_audio');\n\n  const grantPermission =\n    (permission: UpdateUserPermissionsRequestGrantPermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        grant_permissions: [permission],\n      });\n    };\n\n  const revokePermission =\n    (permission: UpdateUserPermissionsRequestRevokePermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        revoke_permissions: [permission],\n      });\n    };\n\n  const toggleParticipantPin = () => {\n    if (pin) {\n      call?.unpin(sessionId);\n    } else {\n      call?.pin(sessionId);\n    }\n  };\n\n  const pinForEveryone = () => {\n    call\n      ?.pinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to pin participant ${userId}`, err);\n      });\n  };\n\n  const unpinForEveryone = () => {\n    call\n      ?.unpinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to unpin participant ${userId}`, err);\n      });\n  };\n\n  const toggleFullscreenMode = () => {\n    if (!fullscreenModeOn) {\n      return participantViewElement?.requestFullscreen().catch(console.error);\n    }\n    return document.exitFullscreen().catch(console.error);\n  };\n\n  useEffect(() => {\n    // handles the case when fullscreen mode is toggled externally,\n    // e.g., by pressing ESC key or some other keyboard shortcut\n    const handleFullscreenChange = () => {\n      setFullscreenModeOn(!!document.fullscreenElement);\n    };\n    document.addEventListener('fullscreenchange', handleFullscreenChange);\n    return () => {\n      document.removeEventListener('fullscreenchange', handleFullscreenChange);\n    };\n  }, []);\n\n  const togglePictureInPicture = () => {\n    if (videoElement && !isPiP) {\n      return videoElement\n        .requestPictureInPicture()\n        .catch(console.error) as Promise<void>;\n    }\n\n    return document.exitPictureInPicture().catch(console.error);\n  };\n\n  const { close } = useMenuContext() || {};\n  return (\n    <GenericMenu onItemClick={close}>\n      <GenericMenuButtonItem\n        onClick={toggleParticipantPin}\n        disabled={pin && !pin.isLocalPin}\n      >\n        <Icon icon=\"pin\" />\n        {pin ? t('Unpin') : t('Pin')}\n      </GenericMenuButtonItem>\n      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>\n        <GenericMenuButtonItem\n          onClick={pinForEveryone}\n          disabled={pin && !pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t('Pin for everyone')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={unpinForEveryone}\n          disabled={!pin || pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t('Unpin for everyone')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <GenericMenuButtonItem onClick={blockUser}>\n          <Icon icon=\"not-allowed\" />\n          {t('Block')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.KICK_USER]}>\n        <GenericMenuButtonItem onClick={kickUser}>\n          <Icon icon=\"kick-user\" />\n          {t('Kick')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>\n        {hasVideoTrack && (\n          <GenericMenuButtonItem onClick={muteVideo}>\n            <Icon icon=\"camera-off-outline\" />\n            {t('Turn off video')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShare}>\n            <Icon icon=\"screen-share-off\" />\n            {t('Turn off screen share')}\n          </GenericMenuButtonItem>\n        )}\n        {hasAudioTrack && (\n          <GenericMenuButtonItem onClick={muteAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('Mute audio')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareAudioTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShareAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('Mute screen share audio')}\n          </GenericMenuButtonItem>\n        )}\n      </Restricted>\n      {participantViewElement &&\n        typeof participantViewElement.requestFullscreen !== 'undefined' && (\n          <GenericMenuButtonItem onClick={toggleFullscreenMode}>\n            {t('{{ direction }} fullscreen', {\n              direction: fullscreenModeOn ? t('Leave') : t('Enter'),\n            })}\n          </GenericMenuButtonItem>\n        )}\n      {videoElement && document.pictureInPictureEnabled && (\n        <GenericMenuButtonItem onClick={togglePictureInPicture}>\n          {t('{{ direction }} picture-in-picture', {\n            direction: isPiP ? t('Leave') : t('Enter'),\n          })}\n        </GenericMenuButtonItem>\n      )}\n      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('Allow audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('Allow video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SCREENSHARE)}\n        >\n          {t('Allow screen sharing')}\n        </GenericMenuButtonItem>\n\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('Disable audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('Disable video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SCREENSHARE)}\n        >\n          {t('Disable screen sharing')}\n        </GenericMenuButtonItem>\n      </Restricted>\n    </GenericMenu>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, forwardRef, useState, useMemo } from 'react';
+import clsx from 'clsx';
+import { hasAudio, hasVideo, hasScreenShareAudio } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Audio } from '../Audio/Audio.js';
+import '../Audio/ParticipantsAudio.js';
+import '../Video/BaseVideo.js';
+import { Video } from '../Video/Video.js';
+import { useTrackElementVisibility } from '../../hooks/useTrackElementVisibility.js';
+import { DefaultParticipantViewUI } from './DefaultParticipantViewUI.js';
+import { isComponentType } from '../../../utilities/isComponentType.js';
+import { applyElementToRef } from '../../../utilities/applyElementToRef.js';
+import { ParticipantViewContext } from './ParticipantViewContext.js';
+
+const ParticipantView = memo(forwardRef(function ParticipantViewRender({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
+    const hasAudioTrack = hasAudio(participant);
+    const hasVideoTrack = hasVideo(participant);
+    const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+    const [trackedElement, setTrackedElement] = useState(null);
+    const [contextVideoElement, setContextVideoElement] = useState(null);
+    const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement,] = useState(null);
+    useTrackElementVisibility({
+        sessionId,
+        trackedElement,
+        trackType,
+    });
+    const { useIncomingVideoSettings } = useCallStateHooks();
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+    const participantViewContextValue = useMemo(() => ({
+        participant,
+        participantViewElement: trackedElement,
+        videoElement: contextVideoElement,
+        videoPlaceholderElement: contextVideoPlaceholderElement,
+        trackType,
+    }), [
+        contextVideoElement,
+        contextVideoPlaceholderElement,
+        participant,
+        trackedElement,
+        trackType,
+    ]);
+    const videoRefs = useMemo(() => ({
+        setVideoElement: (element) => {
+            setVideoElement?.(element);
+            setContextVideoElement(element);
+        },
+        setVideoPlaceholderElement: (element) => {
+            setVideoPlaceholderElement?.(element);
+            setContextVideoPlaceholderElement(element);
+        },
+    }), [setVideoElement, setVideoPlaceholderElement]);
+    return (jsx("div", { "data-testid": "participant-view", ref: (element) => {
+            applyElementToRef(ref, element);
+            setTrackedElement(element);
+        }, className: clsx('str-video__participant-view', isDominantSpeaker &&
+            '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: jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxs(Fragment, { children: [hasAudioTrack && (jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsx(Video, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
+                        trackType !== 'videoTrack' ||
+                        isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
+}));
+ParticipantView.displayName = 'ParticipantView';
+
+export { ParticipantView };
+//# sourceMappingURL=ParticipantView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantView.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  memo,\n  ReactElement,\n  useMemo,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport {\n  hasAudio,\n  hasScreenShareAudio,\n  hasVideo,\n  StreamVideoParticipant,\n  VideoTrackType,\n} from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { Audio } from '../Audio';\nimport { Video, VideoProps } from '../Video';\nimport { useTrackElementVisibility } from '../../hooks';\nimport { DefaultParticipantViewUI } from './DefaultParticipantViewUI';\nimport { applyElementToRef, isComponentType } from '../../../utilities';\nimport { ParticipantViewContext } from './ParticipantViewContext';\n\nexport type ParticipantViewProps = {\n  /**\n   * The participant whose video/audio stream we want to play.\n   */\n  participant: StreamVideoParticipant;\n\n  /**\n   * Override the default UI for rendering participant information/actions.\n   * pass `null` if you wish to not render anything\n   * @default DefaultParticipantViewUI\n   */\n  ParticipantViewUI?: ComponentType | ReactElement | null;\n\n  /**\n   * The kind of video stream to play for the given participant.\n   * The default value is `videoTrack`.\n   * You can use `none` if you're building an audio-only call.\n   */\n  trackType?: VideoTrackType | 'none';\n\n  /**\n   * Forces participant's video to be mirrored or unmirrored. By default, video track\n   * from the local participant is mirrored, and all other videos are not mirrored.\n   */\n  mirror?: boolean;\n\n  /**\n   * This prop is only useful for advanced use-cases (for example, building your own layout).\n   * When set to `true` it will mute the give participant's audio stream on the client side.\n   * The local participant is always muted.\n   */\n  muteAudio?: boolean;\n\n  /**\n   * An object with set functions meant for exposing the video\n   * and video placeholder elements to the integrators.\n   * It's useful when you want to attach custom event handlers to these elements.\n   * - `refs.setVideoElement`\n   * - `refs.setVideoPlaceholderElement`\n   */\n  refs?: VideoProps['refs'];\n\n  /**\n   * Custom class applied to the root DOM element.\n   */\n  className?: string;\n} & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;\n\nexport const ParticipantView = memo(\n  forwardRef<HTMLDivElement, ParticipantViewProps>(\n    function ParticipantViewRender(\n      {\n        participant,\n        trackType = 'videoTrack',\n        mirror,\n        muteAudio,\n        refs: { setVideoElement, setVideoPlaceholderElement } = {},\n        className,\n        VideoPlaceholder,\n        PictureInPicturePlaceholder,\n        ParticipantViewUI = DefaultParticipantViewUI as ComponentType,\n      },\n      ref,\n    ) {\n      const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } =\n        participant;\n\n      const hasAudioTrack = hasAudio(participant);\n      const hasVideoTrack = hasVideo(participant);\n      const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n\n      const [trackedElement, setTrackedElement] =\n        useState<HTMLDivElement | null>(null);\n\n      const [contextVideoElement, setContextVideoElement] =\n        useState<HTMLVideoElement | null>(null);\n\n      const [\n        contextVideoPlaceholderElement,\n        setContextVideoPlaceholderElement,\n      ] = useState<HTMLDivElement | null>(null);\n\n      useTrackElementVisibility({\n        sessionId,\n        trackedElement,\n        trackType,\n      });\n\n      const { useIncomingVideoSettings } = useCallStateHooks();\n      const { isParticipantVideoEnabled } = useIncomingVideoSettings();\n\n      const participantViewContextValue = useMemo(\n        () => ({\n          participant,\n          participantViewElement: trackedElement,\n          videoElement: contextVideoElement,\n          videoPlaceholderElement: contextVideoPlaceholderElement,\n          trackType,\n        }),\n        [\n          contextVideoElement,\n          contextVideoPlaceholderElement,\n          participant,\n          trackedElement,\n          trackType,\n        ],\n      );\n\n      const videoRefs: VideoProps['refs'] = useMemo(\n        () => ({\n          setVideoElement: (element) => {\n            setVideoElement?.(element);\n            setContextVideoElement(element);\n          },\n          setVideoPlaceholderElement: (element) => {\n            setVideoPlaceholderElement?.(element);\n            setContextVideoPlaceholderElement(element);\n          },\n        }),\n        [setVideoElement, setVideoPlaceholderElement],\n      );\n\n      return (\n        <div\n          data-testid=\"participant-view\"\n          ref={(element) => {\n            applyElementToRef(ref, element);\n            setTrackedElement(element);\n          }}\n          className={clsx(\n            'str-video__participant-view',\n            isDominantSpeaker &&\n              'str-video__participant-view--dominant-speaker',\n            isSpeaking && 'str-video__participant-view--speaking',\n            !hasVideoTrack && 'str-video__participant-view--no-video',\n            !hasAudioTrack && 'str-video__participant-view--no-audio',\n            className,\n          )}\n        >\n          <ParticipantViewContext.Provider value={participantViewContextValue}>\n            {/* mute the local participant, as we don't want to hear ourselves */}\n            {!isLocalParticipant && !muteAudio && (\n              <>\n                {hasAudioTrack && (\n                  <Audio participant={participant} trackType=\"audioTrack\" />\n                )}\n                {hasScreenShareAudioTrack && (\n                  <Audio\n                    participant={participant}\n                    trackType=\"screenShareAudioTrack\"\n                  />\n                )}\n              </>\n            )}\n            <Video\n              VideoPlaceholder={VideoPlaceholder}\n              PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n              participant={participant}\n              trackType={trackType}\n              refs={videoRefs}\n              enabled={\n                isLocalParticipant ||\n                trackType !== 'videoTrack' ||\n                isParticipantVideoEnabled(participant.sessionId)\n              }\n              mirror={mirror}\n              autoPlay\n            />\n            {isComponentType(ParticipantViewUI) ? (\n              <ParticipantViewUI />\n            ) : (\n              ParticipantViewUI\n            )}\n          </ParticipantViewContext.Provider>\n        </div>\n      );\n    },\n  ),\n);\n\nParticipantView.displayName = 'ParticipantView';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/core/components/ParticipantView/ParticipantViewContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+const ParticipantViewContext = createContext(undefined);
+const useParticipantViewContext = () => useContext(ParticipantViewContext);
+
+export { ParticipantViewContext, useParticipantViewContext };
+//# sourceMappingURL=ParticipantViewContext.js.map

package/dist/esm/src/core/components/ParticipantView/ParticipantViewContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantViewContext.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantViewContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { ParticipantViewProps } from './ParticipantView';\n\nexport type ParticipantViewContextValue = Required<\n  Pick<ParticipantViewProps, 'participant' | 'trackType'>\n> & {\n  participantViewElement?: HTMLDivElement | null;\n  videoElement?: HTMLVideoElement | null;\n  videoPlaceholderElement?: HTMLDivElement | null;\n};\n\nexport const ParticipantViewContext = createContext<\n  ParticipantViewContextValue | undefined\n>(undefined);\n\nexport const useParticipantViewContext = () =>\n  useContext(ParticipantViewContext) as ParticipantViewContextValue;\n"],"names":[],"mappings":";;MAWa,sBAAsB,GAAG,aAAa,CAEjD,SAAS;AAEJ,MAAM,yBAAyB,GAAG,MACvC,UAAU,CAAC,sBAAsB;;;;"}

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

@@ -0,0 +1,8 @@
+import { StreamCallProvider } from '@stream-io/video-react-bindings';
+
+// re-exporting the StreamCallProvider as StreamCall
+const StreamCall = StreamCallProvider;
+StreamCall.displayName = 'StreamCall';
+
+export { StreamCall };
+//# sourceMappingURL=StreamCall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamCall.js","sources":["../../../../../../../../src/core/components/StreamCall/StreamCall.tsx"],"sourcesContent":["import { ComponentType, PropsWithChildren } from 'react';\nimport {\n  StreamCallProvider,\n  StreamCallProviderProps,\n} from '@stream-io/video-react-bindings';\n\n// re-exporting the StreamCallProvider as StreamCall\nexport const StreamCall: ComponentType<\n  PropsWithChildren<StreamCallProviderProps>\n> = StreamCallProvider;\n\nStreamCall.displayName = 'StreamCall';\n"],"names":[],"mappings":";;AAMA;AACO,MAAM,UAAU,GAEnB;AAEJ,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { StreamVideoProvider } from '@stream-io/video-react-bindings';
+import { translations } from '../../../translations/index.js';
+
+const StreamVideo = (props) => {
+    return (jsx(StreamVideoProvider, { translationsOverrides: translations, ...props }));
+};
+StreamVideo.displayName = 'StreamVideo';
+
+export { StreamVideo };
+//# sourceMappingURL=StreamVideo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StreamVideo.js","sources":["../../../../../../../../src/core/components/StreamVideo/StreamVideo.tsx"],"sourcesContent":["import {\n  StreamVideoProps,\n  StreamVideoProvider,\n} from '@stream-io/video-react-bindings';\nimport { PropsWithChildren } from 'react';\nimport { translations } from '../../../translations';\n\nexport const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {\n  return (\n    <StreamVideoProvider translationsOverrides={translations} {...props} />\n  );\n};\n\nStreamVideo.displayName = 'StreamVideo';\n"],"names":["_jsx"],"mappings":";;;;AAOO,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;IACxE,QACEA,GAAA,CAAC,mBAAmB,EAAA,EAAC,qBAAqB,EAAE,YAAY,EAAA,GAAM,KAAK,EAAA,CAAI;AAE3E;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/src/core/components/Video/BaseVideo.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { Browsers } from '@stream-io/video-client';
+import { applyElementToRef } from '../../../utilities/applyElementToRef.js';
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+const BaseVideo = forwardRef(function BaseVideoRender({ stream, ...rest }, ref) {
+    const [videoElement, setVideoElement] = useState(null);
+    useEffect(() => {
+        if (!videoElement || !stream)
+            return;
+        if (stream === videoElement.srcObject)
+            return;
+        videoElement.srcObject = stream;
+        let timeoutId;
+        if (Browsers.isSafari() || Browsers.isFirefox()) {
+            // Firefox and Safari have some timing issue
+            timeoutId = setTimeout(() => {
+                videoElement.srcObject = stream;
+                videoElement.play().catch((e) => {
+                    console.error(`Failed to play stream`, e);
+                });
+            }, 0);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+            videoElement.pause();
+            videoElement.srcObject = null;
+        };
+    }, [stream, videoElement]);
+    return (jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
+            applyElementToRef(ref, element);
+            setVideoElement(element);
+        } }));
+});
+
+export { BaseVideo };
+//# sourceMappingURL=BaseVideo.js.map

package/dist/esm/src/core/components/Video/BaseVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideo.js","sources":["../../../../../../../../src/core/components/Video/BaseVideo.tsx"],"sourcesContent":["import { ComponentPropsWithRef, forwardRef, useEffect, useState } from 'react';\nimport { Browsers } from '@stream-io/video-client';\n\nimport { applyElementToRef } from '../../../utilities';\n\nexport type BaseVideoProps = ComponentPropsWithRef<'video'> & {\n  stream?: MediaStream;\n};\n\n/**\n * @description Extends video element with `stream` property\n * (`srcObject`) to reactively handle stream changes\n */\nexport const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(\n  function BaseVideoRender({ stream, ...rest }, ref) {\n    const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(\n      null,\n    );\n\n    useEffect(() => {\n      if (!videoElement || !stream) return;\n      if (stream === videoElement.srcObject) return;\n\n      videoElement.srcObject = stream;\n      let timeoutId: ReturnType<typeof setTimeout> | undefined;\n      if (Browsers.isSafari() || Browsers.isFirefox()) {\n        // Firefox and Safari have some timing issue\n        timeoutId = setTimeout(() => {\n          videoElement.srcObject = stream;\n          videoElement.play().catch((e) => {\n            console.error(`Failed to play stream`, e);\n          });\n        }, 0);\n      }\n\n      return () => {\n        clearTimeout(timeoutId);\n        videoElement.pause();\n        videoElement.srcObject = null;\n      };\n    }, [stream, videoElement]);\n\n    return (\n      <video\n        autoPlay\n        playsInline\n        {...rest}\n        ref={(element) => {\n          applyElementToRef(ref, element);\n          setVideoElement(element);\n        }}\n      />\n    );\n  },\n);\n"],"names":["_jsx"],"mappings":";;;;;AASA;;;AAGG;AACI,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAA;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;IAED,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE;AAC9B,QAAA,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE;AAEvC,QAAA,YAAY,CAAC,SAAS,GAAG,MAAM;AAC/B,QAAA,IAAI,SAAoD;QACxD,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;;AAE/C,YAAA,SAAS,GAAG,UAAU,CAAC,MAAK;AAC1B,gBAAA,YAAY,CAAC,SAAS,GAAG,MAAM;gBAC/B,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAI;AAC9B,oBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC;AAC3C,gBAAA,CAAC,CAAC;YACJ,CAAC,EAAE,CAAC,CAAC;QACP;AAEA,QAAA,OAAO,MAAK;YACV,YAAY,CAAC,SAAS,CAAC;YACvB,YAAY,CAAC,KAAK,EAAE;AACpB,YAAA,YAAY,CAAC,SAAS,GAAG,IAAI;AAC/B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE1B,IAAA,QACEA,GAAA,CAAA,OAAA,EAAA,EACE,QAAQ,EAAA,IAAA,EACR,WAAW,EAAA,IAAA,EAAA,GACP,IAAI,EACR,GAAG,EAAE,CAAC,OAAO,KAAI;AACf,YAAA,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC;YAC/B,eAAe,CAAC,OAAO,CAAC;QAC1B,CAAC,EAAA,CACD;AAEN,CAAC;;;;"}

package/dist/esm/src/core/components/Video/BaseVideoPlaceholder.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+
+const BaseVideoPlaceholder = forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
+    const [error, setError] = useState(false);
+    const name = participant.name || participant.userId;
+    return (jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
+                (name ? (jsx(InitialsFallback, { name: name })) : (jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))), participant.image && !error && (jsx("img", { onError: () => setError(true), alt: name, className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+});
+const InitialsFallback = (props) => {
+    const { name } = props;
+    const initials = name
+        .split(' ')
+        .slice(0, 2)
+        .map((n) => n[0])
+        .join('');
+    return (jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
+};
+
+export { BaseVideoPlaceholder };
+//# sourceMappingURL=BaseVideoPlaceholder.js.map

package/dist/esm/src/core/components/Video/BaseVideoPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/BaseVideoPlaceholder.tsx"],"sourcesContent":["import { ComponentProps, RefAttributes, forwardRef, useState } from 'react';\nimport type { StreamVideoParticipant } from '@stream-io/video-client';\n\nexport type BaseVideoPlaceholderProps = {\n  participant: StreamVideoParticipant;\n} & RefAttributes<HTMLDivElement> &\n  ComponentProps<'div'>;\n\nexport const BaseVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  BaseVideoPlaceholderProps\n>(function DefaultVideoPlaceholder({ participant, style, children }, ref) {\n  const [error, setError] = useState(false);\n  const name = participant.name || participant.userId;\n  return (\n    <div className=\"str-video__video-placeholder\" style={style} ref={ref}>\n      {(!participant.image || error) &&\n        (name ? (\n          <InitialsFallback name={name} />\n        ) : (\n          <div className=\"str-video__video-placeholder__no-video-label\">\n            {children}\n          </div>\n        ))}\n      {participant.image && !error && (\n        <img\n          onError={() => setError(true)}\n          alt={name}\n          className=\"str-video__video-placeholder__avatar\"\n          src={participant.image}\n        />\n      )}\n    </div>\n  );\n});\n\nconst InitialsFallback = (props: { name: string }) => {\n  const { name } = props;\n  const initials = name\n    .split(' ')\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join('');\n  return (\n    <div className=\"str-video__video-placeholder__initials-fallback\">\n      {initials}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAQO,MAAM,oBAAoB,GAAG,UAAU,CAG5C,SAAS,uBAAuB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAA;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM;IACnD,QACEA,cAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,aACjE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK;AAC3B,iBAAC,IAAI,IACHC,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,KAEhCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACL,CACP,CAAC,EACH,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,KAC1BA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAE,IAAI,EACT,SAAS,EAAC,sCAAsC,EAChD,GAAG,EAAE,WAAW,CAAC,KAAK,EAAA,CACtB,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,KAAuB,KAAI;AACnD,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;IACtB,MAAM,QAAQ,GAAG;SACd,KAAK,CAAC,GAAG;AACT,SAAA,KAAK,CAAC,CAAC,EAAE,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SACf,IAAI,CAAC,EAAE,CAAC;IACX,QACEA,aAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC7D,QAAQ,EAAA,CACL;AAEV,CAAC;;;;"}

package/dist/esm/src/core/components/Video/DefaultPictureInPicturePlaceholder.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { BaseVideoPlaceholder } from './BaseVideoPlaceholder.js';
+
+const DefaultPictureInPicturePlaceholder = forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
+    const { t } = useI18n();
+    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
+});
+
+export { DefaultPictureInPicturePlaceholder };
+//# sourceMappingURL=DefaultPictureInPicturePlaceholder.js.map

package/dist/esm/src/core/components/Video/DefaultPictureInPicturePlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPictureInPicturePlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultPictureInPicturePlaceholder = forwardRef<\n  HTMLDivElement,\n  PictureInPicturePlaceholderProps\n>(function DefaultPictureInPicturePlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('Video is playing in a popup')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AASO,MAAM,kCAAkC,GAAG,UAAU,CAG1D,SAAS,wCAAwC,CAAC,KAAK,EAAE,GAAG,EAAA;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,6BAA6B,CAAC,EAAA,CACZ;AAE3B,CAAC;;;;"}

package/dist/esm/src/core/components/Video/DefaultVideoPlaceholder.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { BaseVideoPlaceholder } from './BaseVideoPlaceholder.js';
+
+const DefaultVideoPlaceholder = forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
+    const { t } = useI18n();
+    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
+});
+
+export { DefaultVideoPlaceholder };
+//# sourceMappingURL=DefaultVideoPlaceholder.js.map

package/dist/esm/src/core/components/Video/DefaultVideoPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultVideoPlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type VideoPlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  VideoPlaceholderProps\n>(function DefaultVideoPlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('Video is disabled')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AASO,MAAM,uBAAuB,GAAG,UAAU,CAG/C,SAAS,6BAA6B,CAAC,KAAK,EAAE,GAAG,EAAA;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,mBAAmB,CAAC,EAAA,CACF;AAE3B,CAAC;;;;"}

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

@@ -0,0 +1,88 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useLayoutEffect, useEffect } from 'react';
+import { hasVideo, hasScreenShare, VisibilityState, hasPausedTrack } from '@stream-io/video-client';
+import clsx from 'clsx';
+import { DefaultVideoPlaceholder } from './DefaultVideoPlaceholder.js';
+import { useCall } from '@stream-io/video-react-bindings';
+import { usePictureInPictureState } from '../../hooks/usePictureInPictureState.js';
+import { DefaultPictureInPicturePlaceholder } from './DefaultPictureInPicturePlaceholder.js';
+
+const ABSOLUTE_POSITION_STYLE = { position: 'absolute' };
+const Video = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
+    const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
+    const call = useCall();
+    const [videoElement, setVideoElement] = useState(null);
+    // start with true, will flip once the video starts playing
+    const [isVideoPaused, setIsVideoPaused] = useState(true);
+    const [isWideMode, setIsWideMode] = useState(true);
+    const isPiP = usePictureInPictureState(videoElement ?? undefined);
+    const stream = trackType === 'videoTrack'
+        ? videoStream
+        : trackType === 'screenShareTrack'
+            ? screenShareStream
+            : undefined;
+    useLayoutEffect(() => {
+        if (!call || !videoElement || trackType === 'none')
+            return;
+        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, trackType, sessionId, videoElement]);
+    useEffect(() => {
+        if (!stream || !videoElement)
+            return;
+        const [track] = stream.getVideoTracks();
+        if (!track)
+            return;
+        const handlePlayPause = () => {
+            setIsVideoPaused(videoElement.paused);
+            const { width = 0, height = 0 } = track.getSettings();
+            setIsWideMode(width >= height);
+        };
+        // playback may have started before we had a chance to
+        // attach the 'play/pause' event listener, so we set the state
+        // here to make sure it's in sync
+        setIsVideoPaused(videoElement.paused);
+        videoElement.addEventListener('play', handlePlayPause);
+        videoElement.addEventListener('pause', handlePlayPause);
+        track.addEventListener('unmute', handlePlayPause);
+        return () => {
+            videoElement.removeEventListener('play', handlePlayPause);
+            videoElement.removeEventListener('pause', handlePlayPause);
+            track.removeEventListener('unmute', handlePlayPause);
+            // reset the 'pause' state once we unmount the video element
+            setIsVideoPaused(true);
+        };
+    }, [stream, videoElement]);
+    if (!call)
+        return null;
+    const isPublishingTrack = trackType === 'videoTrack'
+        ? hasVideo(participant)
+        : trackType === 'screenShareTrack'
+            ? hasScreenShare(participant)
+            : false;
+    const isInvisible = trackType === 'none' ||
+        viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
+    const hasNoVideoOrInvisible = !enabled ||
+        !isPublishingTrack ||
+        isInvisible ||
+        hasPausedTrack(participant, trackType);
+    const mirrorVideo = mirror === undefined
+        ? isLocalParticipant && trackType === 'videoTrack'
+        : mirror;
+    const isScreenShareTrack = trackType === 'screenShareTrack';
+    return (jsxs(Fragment, { children: [!hasNoVideoOrInvisible && (jsx("video", { ...rest, className: clsx('str-video__video', className, {
+                    'str-video__video--not-playing': isVideoPaused,
+                    'str-video__video--tall': !isWideMode,
+                    'str-video__video--mirror': mirrorVideo,
+                    'str-video__video--screen-share': isScreenShareTrack,
+                }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
+                    setVideoElement(element);
+                    refs?.setVideoElement?.(element);
+                } })), isPiP && PictureInPicturePlaceholder && (jsx(PictureInPicturePlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+};
+Video.displayName = 'Video';
+
+export { Video };
+//# sourceMappingURL=Video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sources":["../../../../../../../../src/core/components/Video/Video.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  CSSProperties,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport {\n  hasPausedTrack,\n  hasScreenShare,\n  hasVideo,\n  StreamVideoParticipant,\n  VideoTrackType,\n  VisibilityState,\n} from '@stream-io/video-client';\nimport clsx from 'clsx';\nimport {\n  DefaultVideoPlaceholder,\n  VideoPlaceholderProps,\n} from './DefaultVideoPlaceholder';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { usePictureInPictureState } from '../../hooks/usePictureInPictureState';\nimport {\n  DefaultPictureInPicturePlaceholder,\n  PictureInPicturePlaceholderProps,\n} from './DefaultPictureInPicturePlaceholder';\n\nconst ABSOLUTE_POSITION_STYLE: CSSProperties = { position: 'absolute' };\n\nexport type VideoProps = ComponentPropsWithoutRef<'video'> & {\n  /**\n   * Pass false to disable rendering video and render fallback\n   * even if the participant has published video.\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Forces the video to be mirrored or unmirrored. By default, video track\n   * from the local participant is mirrored, and all other videos are not mirrored.\n   */\n  mirror?: boolean;\n  /**\n   * The track type to display.\n   */\n  trackType: VideoTrackType | 'none';\n  /**\n   * The participant represented by this video element.\n   */\n  participant: StreamVideoParticipant;\n  /**\n   * Override the default UI that's visible when a participant turned off their video.\n   * Set it to `null` if you wish to disable the video placeholder.\n   *\n   * @default DefaultVideoPlaceholder\n   */\n  VideoPlaceholder?: ComponentType<VideoPlaceholderProps> | null;\n  /**\n   * Override the default UI that's dispayed in place of the video when it's playing\n   * in picture-in-picture. Set it to `null` if you wish to display the browser's default\n   * placeholder.\n   *\n   * @default DefaultPictureInPicturePlaceholder\n   */\n  PictureInPicturePlaceholder?: ComponentType<PictureInPicturePlaceholderProps> | null;\n  /**\n  /**\n   * An object with setRef functions\n   * meant for exposing some of the internal elements of this component.\n   */\n  refs?: {\n    /**\n     * The video element that's used to play the video stream.\n     * @param element the video element.\n     */\n    setVideoElement?: (element: HTMLVideoElement | null) => void;\n    /**\n     * The video placeholder element that's used when the video stream is not playing.\n     * @param element the video placeholder element.\n     */\n    setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;\n    setPictureInPicturePlaceholderElement?: (\n      element: HTMLDivElement | null,\n    ) => void;\n  };\n};\n\nexport const Video = ({\n  enabled = true,\n  mirror,\n  trackType,\n  participant,\n  className,\n  VideoPlaceholder = DefaultVideoPlaceholder,\n  PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder,\n  refs,\n  ...rest\n}: VideoProps) => {\n  const {\n    sessionId,\n    videoStream,\n    screenShareStream,\n    viewportVisibilityState,\n    isLocalParticipant,\n    userId,\n  } = participant;\n\n  const call = useCall();\n  const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(\n    null,\n  );\n  // start with true, will flip once the video starts playing\n  const [isVideoPaused, setIsVideoPaused] = useState(true);\n  const [isWideMode, setIsWideMode] = useState(true);\n  const isPiP = usePictureInPictureState(videoElement ?? undefined);\n\n  const stream =\n    trackType === 'videoTrack'\n      ? videoStream\n      : trackType === 'screenShareTrack'\n        ? screenShareStream\n        : undefined;\n\n  useLayoutEffect(() => {\n    if (!call || !videoElement || trackType === 'none') return;\n\n    const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);\n\n    return () => {\n      cleanup?.();\n    };\n  }, [call, trackType, sessionId, videoElement]);\n\n  useEffect(() => {\n    if (!stream || !videoElement) return;\n\n    const [track] = stream.getVideoTracks();\n    if (!track) return;\n\n    const handlePlayPause = () => {\n      setIsVideoPaused(videoElement.paused);\n\n      const { width = 0, height = 0 } = track.getSettings();\n      setIsWideMode(width >= height);\n    };\n\n    // playback may have started before we had a chance to\n    // attach the 'play/pause' event listener, so we set the state\n    // here to make sure it's in sync\n    setIsVideoPaused(videoElement.paused);\n\n    videoElement.addEventListener('play', handlePlayPause);\n    videoElement.addEventListener('pause', handlePlayPause);\n    track.addEventListener('unmute', handlePlayPause);\n    return () => {\n      videoElement.removeEventListener('play', handlePlayPause);\n      videoElement.removeEventListener('pause', handlePlayPause);\n      track.removeEventListener('unmute', handlePlayPause);\n\n      // reset the 'pause' state once we unmount the video element\n      setIsVideoPaused(true);\n    };\n  }, [stream, videoElement]);\n\n  if (!call) return null;\n\n  const isPublishingTrack =\n    trackType === 'videoTrack'\n      ? hasVideo(participant)\n      : trackType === 'screenShareTrack'\n        ? hasScreenShare(participant)\n        : false;\n\n  const isInvisible =\n    trackType === 'none' ||\n    viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;\n\n  const hasNoVideoOrInvisible =\n    !enabled ||\n    !isPublishingTrack ||\n    isInvisible ||\n    hasPausedTrack(participant, trackType);\n  const mirrorVideo =\n    mirror === undefined\n      ? isLocalParticipant && trackType === 'videoTrack'\n      : mirror;\n  const isScreenShareTrack = trackType === 'screenShareTrack';\n  return (\n    <>\n      {!hasNoVideoOrInvisible && (\n        <video\n          {...rest}\n          className={clsx('str-video__video', className, {\n            'str-video__video--not-playing': isVideoPaused,\n            'str-video__video--tall': !isWideMode,\n            'str-video__video--mirror': mirrorVideo,\n            'str-video__video--screen-share': isScreenShareTrack,\n          })}\n          data-user-id={userId}\n          data-session-id={sessionId}\n          ref={(element) => {\n            setVideoElement(element);\n            refs?.setVideoElement?.(element);\n          }}\n        />\n      )}\n      {isPiP && PictureInPicturePlaceholder && (\n        <PictureInPicturePlaceholder\n          style={ABSOLUTE_POSITION_STYLE}\n          participant={participant}\n        />\n      )}\n      {/* TODO: add condition to \"hold\" the placeholder until track unmutes as well */}\n      {(hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (\n        <VideoPlaceholder\n          style={ABSOLUTE_POSITION_STYLE}\n          participant={participant}\n          ref={refs?.setVideoPlaceholderElement}\n        />\n      )}\n    </>\n  );\n};\n\nVideo.displayName = 'Video';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;AA4BA,MAAM,uBAAuB,GAAkB,EAAE,QAAQ,EAAE,UAAU,EAAE;AA2DhE,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,MAAM,EACN,SAAS,EACT,WAAW,EACX,SAAS,EACT,gBAAgB,GAAG,uBAAuB,EAC1C,2BAA2B,GAAG,kCAAkC,EAChE,IAAI,EACJ,GAAG,IAAI,EACI,KAAI;AACf,IAAA,MAAM,EACJ,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,MAAM,GACP,GAAG,WAAW;AAEf,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;;IAED,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAClD,MAAM,KAAK,GAAG,wBAAwB,CAAC,YAAY,IAAI,SAAS,CAAC;AAEjE,IAAA,MAAM,MAAM,GACV,SAAS,KAAK;AACZ,UAAE;UACA,SAAS,KAAK;AACd,cAAE;cACA,SAAS;IAEjB,eAAe,CAAC,MAAK;QACnB,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,SAAS,KAAK,MAAM;YAAE;AAEpD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AAEzE,QAAA,OAAO,MAAK;YACV,OAAO,IAAI;AACb,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;IAE9C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,YAAY;YAAE;QAE9B,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,cAAc,EAAE;AACvC,QAAA,IAAI,CAAC,KAAK;YAAE;QAEZ,MAAM,eAAe,GAAG,MAAK;AAC3B,YAAA,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AAErC,YAAA,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE;AACrD,YAAA,aAAa,CAAC,KAAK,IAAI,MAAM,CAAC;AAChC,QAAA,CAAC;;;;AAKD,QAAA,gBAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AAErC,QAAA,YAAY,CAAC,gBAAgB,CAAC,MAAM,EAAE,eAAe,CAAC;AACtD,QAAA,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,CAAC;AACvD,QAAA,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC;AACjD,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,MAAM,EAAE,eAAe,CAAC;AACzD,YAAA,YAAY,CAAC,mBAAmB,CAAC,OAAO,EAAE,eAAe,CAAC;AAC1D,YAAA,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC;;YAGpD,gBAAgB,CAAC,IAAI,CAAC;AACxB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE1B,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,MAAM,iBAAiB,GACrB,SAAS,KAAK;AACZ,UAAE,QAAQ,CAAC,WAAW;UACpB,SAAS,KAAK;AACd,cAAE,cAAc,CAAC,WAAW;cAC1B,KAAK;AAEb,IAAA,MAAM,WAAW,GACf,SAAS,KAAK,MAAM;QACpB,uBAAuB,GAAG,SAAS,CAAC,KAAK,eAAe,CAAC,SAAS;IAEpE,MAAM,qBAAqB,GACzB,CAAC,OAAO;AACR,QAAA,CAAC,iBAAiB;QAClB,WAAW;AACX,QAAA,cAAc,CAAC,WAAW,EAAE,SAAS,CAAC;AACxC,IAAA,MAAM,WAAW,GACf,MAAM,KAAK;AACT,UAAE,kBAAkB,IAAI,SAAS,KAAK;UACpC,MAAM;AACZ,IAAA,MAAM,kBAAkB,GAAG,SAAS,KAAK,kBAAkB;AAC3D,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,CAAC,qBAAqB,KACrBC,GAAA,CAAA,OAAA,EAAA,EAAA,GACM,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,EAAE;AAC7C,oBAAA,+BAA+B,EAAE,aAAa;oBAC9C,wBAAwB,EAAE,CAAC,UAAU;AACrC,oBAAA,0BAA0B,EAAE,WAAW;AACvC,oBAAA,gCAAgC,EAAE,kBAAkB;iBACrD,CAAC,EAAA,cAAA,EACY,MAAM,EAAA,iBAAA,EACH,SAAS,EAC1B,GAAG,EAAE,CAAC,OAAO,KAAI;oBACf,eAAe,CAAC,OAAO,CAAC;AACxB,oBAAA,IAAI,EAAE,eAAe,GAAG,OAAO,CAAC;gBAClC,CAAC,EAAA,CACD,CACH,EACA,KAAK,IAAI,2BAA2B,KACnCA,GAAA,CAAC,2BAA2B,EAAA,EAC1B,KAAK,EAAE,uBAAuB,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,EAEA,CAAC,qBAAqB,IAAI,aAAa,KAAK,gBAAgB,KAC3DA,GAAA,CAAC,gBAAgB,EAAA,EACf,KAAK,EAAE,uBAAuB,EAC9B,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,IAAI,EAAE,0BAA0B,EAAA,CACrC,CACH,CAAA,EAAA,CACA;AAEP;AAEA,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/src/core/hooks/useCalculateHardLimit.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+const useCalculateHardLimit = (
+/**
+ * Element that stretches to 100% of the whole layout component
+ */
+wrapperElement, 
+/**
+ * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+ */
+hostElement, limit) => {
+    const [calculatedLimit, setCalculatedLimit] = useState({
+        vertical: typeof limit === 'number' ? limit : null,
+        horizontal: typeof limit === 'number' ? limit : null,
+    });
+    useEffect(() => {
+        if (!hostElement ||
+            !wrapperElement ||
+            typeof limit === 'number' ||
+            typeof limit === 'undefined')
+            return;
+        let childWidth = null;
+        let childHeight = null;
+        const resizeObserver = new ResizeObserver((entries, observer) => {
+            // this part should ideally run as little times as possible
+            // get child measurements and disconnect
+            // does not consider dynamically sized children
+            // this hook is for SpeakerLayout use only, where children in the bar are fixed size
+            if (entries.length > 1) {
+                const child = hostElement.firstChild;
+                if (child) {
+                    childHeight = child.clientHeight;
+                    childWidth = child.clientWidth;
+                    observer.unobserve(hostElement);
+                }
+            }
+            // keep the state at { vertical: 1, horizontal: 1 }
+            // until we get the proper child measurements
+            if (childHeight === null || childWidth === null)
+                return;
+            const vertical = Math.floor(wrapperElement.clientHeight / childHeight);
+            const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);
+            setCalculatedLimit((pv) => {
+                if (pv.vertical !== vertical || pv.horizontal !== horizontal)
+                    return { vertical, horizontal };
+                return pv;
+            });
+        });
+        resizeObserver.observe(wrapperElement);
+        resizeObserver.observe(hostElement);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [hostElement, limit, wrapperElement]);
+    return calculatedLimit;
+};
+
+export { useCalculateHardLimit };
+//# sourceMappingURL=useCalculateHardLimit.js.map

package/dist/esm/src/core/hooks/useCalculateHardLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalculateHardLimit.js","sources":["../../../../../../../src/core/hooks/useCalculateHardLimit.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useCalculateHardLimit = (\n  /**\n   * Element that stretches to 100% of the whole layout component\n   */\n  wrapperElement: HTMLDivElement | null,\n  /**\n   * Element that directly hosts individual `ParticipantView` (or wrapper) elements\n   */\n  hostElement: HTMLDivElement | null,\n  limit?: 'dynamic' | number,\n) => {\n  const [calculatedLimit, setCalculatedLimit] = useState<{\n    vertical: number | null;\n    horizontal: number | null;\n  }>({\n    vertical: typeof limit === 'number' ? limit : null,\n    horizontal: typeof limit === 'number' ? limit : null,\n  });\n\n  useEffect(() => {\n    if (\n      !hostElement ||\n      !wrapperElement ||\n      typeof limit === 'number' ||\n      typeof limit === 'undefined'\n    )\n      return;\n\n    let childWidth: number | null = null;\n    let childHeight: number | null = null;\n\n    const resizeObserver = new ResizeObserver((entries, observer) => {\n      // this part should ideally run as little times as possible\n      // get child measurements and disconnect\n      // does not consider dynamically sized children\n      // this hook is for SpeakerLayout use only, where children in the bar are fixed size\n      if (entries.length > 1) {\n        const child = hostElement.firstChild as HTMLElement | null;\n\n        if (child) {\n          childHeight = child.clientHeight;\n          childWidth = child.clientWidth;\n          observer.unobserve(hostElement);\n        }\n      }\n\n      // keep the state at { vertical: 1, horizontal: 1 }\n      // until we get the proper child measurements\n      if (childHeight === null || childWidth === null) return;\n\n      const vertical = Math.floor(wrapperElement.clientHeight / childHeight);\n      const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);\n\n      setCalculatedLimit((pv) => {\n        if (pv.vertical !== vertical || pv.horizontal !== horizontal)\n          return { vertical, horizontal };\n        return pv;\n      });\n    });\n\n    resizeObserver.observe(wrapperElement);\n    resizeObserver.observe(hostElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [hostElement, limit, wrapperElement]);\n\n  return calculatedLimit;\n};\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG;AACnC;;AAEG;AACH,cAAqC;AACrC;;AAEG;AACH,WAAkC,EAClC,KAA0B,KACxB;AACF,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAGnD;AACD,QAAA,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI;AAClD,QAAA,UAAU,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI;AACrD,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IACE,CAAC,WAAW;AACZ,YAAA,CAAC,cAAc;YACf,OAAO,KAAK,KAAK,QAAQ;YACzB,OAAO,KAAK,KAAK,WAAW;YAE5B;QAEF,IAAI,UAAU,GAAkB,IAAI;QACpC,IAAI,WAAW,GAAkB,IAAI;QAErC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAI;;;;;AAK9D,YAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,gBAAA,MAAM,KAAK,GAAG,WAAW,CAAC,UAAgC;gBAE1D,IAAI,KAAK,EAAE;AACT,oBAAA,WAAW,GAAG,KAAK,CAAC,YAAY;AAChC,oBAAA,UAAU,GAAG,KAAK,CAAC,WAAW;AAC9B,oBAAA,QAAQ,CAAC,SAAS,CAAC,WAAW,CAAC;gBACjC;YACF;;;AAIA,YAAA,IAAI,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI;gBAAE;AAEjD,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,GAAG,WAAW,CAAC;AACtE,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,GAAG,UAAU,CAAC;AAEtE,YAAA,kBAAkB,CAAC,CAAC,EAAE,KAAI;gBACxB,IAAI,EAAE,CAAC,QAAQ,KAAK,QAAQ,IAAI,EAAE,CAAC,UAAU,KAAK,UAAU;AAC1D,oBAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE;AACjC,gBAAA,OAAO,EAAE;AACX,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC;AACtC,QAAA,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC;AAEnC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;AAExC,IAAA,OAAO,eAAe;AACxB;;;;"}

package/dist/esm/src/core/hooks/usePictureInPictureState.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function usePictureInPictureState(videoElement) {
+    const [isPiP, setIsPiP] = useState(document.pictureInPictureElement === videoElement);
+    if (!videoElement && isPiP)
+        setIsPiP(false);
+    useEffect(() => {
+        if (!videoElement)
+            return;
+        const handlePiP = () => {
+            setIsPiP(document.pictureInPictureElement === videoElement);
+        };
+        videoElement.addEventListener('enterpictureinpicture', handlePiP);
+        videoElement.addEventListener('leavepictureinpicture', handlePiP);
+        return () => {
+            videoElement.removeEventListener('enterpictureinpicture', handlePiP);
+            videoElement.removeEventListener('leavepictureinpicture', handlePiP);
+        };
+    }, [videoElement]);
+    return isPiP;
+}
+
+export { usePictureInPictureState };
+//# sourceMappingURL=usePictureInPictureState.js.map

package/dist/esm/src/core/hooks/usePictureInPictureState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePictureInPictureState.js","sources":["../../../../../../../src/core/hooks/usePictureInPictureState.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport function usePictureInPictureState(videoElement?: HTMLVideoElement) {\n  const [isPiP, setIsPiP] = useState(\n    document.pictureInPictureElement === videoElement,\n  );\n\n  if (!videoElement && isPiP) setIsPiP(false);\n\n  useEffect(() => {\n    if (!videoElement) return;\n\n    const handlePiP = () => {\n      setIsPiP(document.pictureInPictureElement === videoElement);\n    };\n\n    videoElement.addEventListener('enterpictureinpicture', handlePiP);\n    videoElement.addEventListener('leavepictureinpicture', handlePiP);\n\n    return () => {\n      videoElement.removeEventListener('enterpictureinpicture', handlePiP);\n      videoElement.removeEventListener('leavepictureinpicture', handlePiP);\n    };\n  }, [videoElement]);\n\n  return isPiP;\n}\n"],"names":[],"mappings":";;AAEM,SAAU,wBAAwB,CAAC,YAA+B,EAAA;AACtE,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,QAAQ,CAAC,uBAAuB,KAAK,YAAY,CAClD;IAED,IAAI,CAAC,YAAY,IAAI,KAAK;QAAE,QAAQ,CAAC,KAAK,CAAC;IAE3C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;QAEnB,MAAM,SAAS,GAAG,MAAK;AACrB,YAAA,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,KAAK,YAAY,CAAC;AAC7D,QAAA,CAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AACjE,QAAA,YAAY,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AAEjE,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AACpE,YAAA,YAAY,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AACtE,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,OAAO,KAAK;AACd;;;;"}