@stream-io/video-react-sdk 0.0.1-alpha.78 → 0.0.1-alpha.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts +2 -1
  3. package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js +12 -3
  4. package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js.map +1 -1
  5. package/dist/src/core/components/CallLayout/SpeakerLayout.js +2 -2
  6. package/dist/src/core/components/CallLayout/SpeakerLayout.js.map +1 -1
  7. package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts +3 -5
  8. package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js +7 -4
  9. package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map +1 -1
  10. package/dist/src/core/components/ParticipantView/ParticipantView.d.ts +16 -19
  11. package/dist/src/core/components/ParticipantView/ParticipantView.js +14 -10
  12. package/dist/src/core/components/ParticipantView/ParticipantView.js.map +1 -1
  13. package/dist/src/core/components/Video/BaseVideo.js +2 -2
  14. package/dist/src/core/components/Video/BaseVideo.js.map +1 -1
  15. package/dist/src/core/components/Video/Video.d.ts +5 -2
  16. package/dist/src/core/components/Video/Video.js +6 -5
  17. package/dist/src/core/components/Video/Video.js.map +1 -1
  18. package/dist/src/core/hooks/useTrackElementVisibility.js +4 -1
  19. package/dist/src/core/hooks/useTrackElementVisibility.js.map +1 -1
  20. package/dist/src/utilities/applyElementToRef.d.ts +2 -0
  21. package/dist/src/utilities/{applyElementRef.js → applyElementToRef.js} +2 -2
  22. package/dist/src/utilities/applyElementToRef.js.map +1 -0
  23. package/dist/src/utilities/index.d.ts +1 -1
  24. package/dist/src/utilities/index.js +1 -1
  25. package/dist/src/utilities/index.js.map +1 -1
  26. package/package.json +5 -5
  27. package/src/components/CallParticipantsList/CallParticipantListingItem.tsx +22 -1
  28. package/src/core/components/CallLayout/SpeakerLayout.tsx +3 -10
  29. package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx +11 -16
  30. package/src/core/components/ParticipantView/ParticipantView.tsx +58 -39
  31. package/src/core/components/Video/BaseVideo.tsx +2 -2
  32. package/src/core/components/Video/Video.tsx +9 -6
  33. package/src/core/hooks/useTrackElementVisibility.ts +6 -3
  34. package/src/utilities/{applyElementRef.ts → applyElementToRef.ts} +1 -1
  35. package/src/utilities/index.ts +1 -1
  36. package/dist/src/utilities/applyElementRef.d.ts +0 -2
  37. package/dist/src/utilities/applyElementRef.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [0.0.1-alpha.79](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.78...@stream-io/video-react-sdk-0.0.1-alpha.79) (2023-05-25)
6
+
7
+
8
+ ### Features
9
+
10
+ * **react-sdk:** ParticipantViewContext + other changes ([#549](https://github.com/GetStream/stream-video-js/issues/549)) ([51edbbc](https://github.com/GetStream/stream-video-js/commit/51edbbc999d405b7e822f094a35c1b5797a5d3df))
11
+
12
+
13
+
5
14
  ## [0.0.1-alpha.78](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.77...@stream-io/video-react-sdk-0.0.1-alpha.78) (2023-05-25)
6
15
 
7
16
 
package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts CHANGED
@@ -9,7 +9,8 @@ type CallParticipantListingItemProps = {
9
9
  }>;
10
10
  };
11
11
  export declare const CallParticipantListingItem: ({ participant, DisplayName, }: CallParticipantListingItemProps) => JSX.Element;
12
- export declare const ParticipantActionsContextMenu: ({ participant, }: {
12
+ export declare const ParticipantActionsContextMenu: ({ participant, participantViewElement, }: {
13
13
  participant: StreamVideoParticipant;
14
+ participantViewElement?: HTMLDivElement | null | undefined;
14
15
  }) => JSX.Element;
15
16
  export {};
package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import clsx from 'clsx';
3
- import { forwardRef } from 'react';
3
+ import { forwardRef, useState } from 'react';
4
4
  import { Restricted, useCall, useConnectedUser, } from '@stream-io/video-react-bindings';
5
5
  import { OwnCapability, SfuModels, } from '@stream-io/video-client';
6
6
  import { IconButton } from '../Button';
@@ -34,7 +34,8 @@ const DefaultDisplayName = ({ participant }) => {
34
34
  const ToggleButton = forwardRef((props, ref) => {
35
35
  return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
36
36
  });
37
- export const ParticipantActionsContextMenu = ({ participant, }) => {
37
+ export const ParticipantActionsContextMenu = ({ participant, participantViewElement, }) => {
38
+ const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
38
39
  const activeCall = useCall();
39
40
  const blockUser = () => {
40
41
  activeCall === null || activeCall === void 0 ? void 0 : activeCall.blockUser(participant.userId);
@@ -71,6 +72,14 @@ export const ParticipantActionsContextMenu = ({ participant, }) => {
71
72
  const toggleParticipantPinnedAt = () => {
72
73
  activeCall === null || activeCall === void 0 ? void 0 : activeCall.setParticipantPinnedAt(participant.sessionId, participant.pinnedAt ? undefined : Date.now());
73
74
  };
74
- return (_jsxs(GenericMenu, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleParticipantPinnedAt }, { children: [_jsx(Icon, { icon: "pin" }), participant.pinnedAt ? 'Unpin' : 'Pin'] })), _jsx(Restricted, Object.assign({ requiredGrants: [OwnCapability.BLOCK_USERS] }, { children: _jsxs(GenericMenuButtonItem, Object.assign({ onClick: blockUser }, { children: [_jsx(Icon, { icon: "not-allowed" }), "Block"] })) })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.MUTE_USERS] }, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.VIDEO), onClick: muteVideo }, { children: [_jsx(Icon, { icon: "camera-off-outline" }), "Turn off video"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE), onClick: muteScreenShare }, { children: [_jsx(Icon, { icon: "screen-share-off" }), "Turn off screen share"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.AUDIO), onClick: muteAudio }, { children: [_jsx(Icon, { icon: "no-audio" }), "Mute audio"] }))] })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS] }, { children: [_jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_AUDIO) }, { children: "Allow audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_VIDEO) }, { children: "Allow video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SCREENSHARE) }, { children: "Allow screen sharing" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_AUDIO) }, { children: "Disable audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_VIDEO) }, { children: "Disable video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SCREENSHARE) }, { children: "Disable screen sharing" }))] }))] }));
75
+ const toggleFullscreenMode = () => {
76
+ if (!fullscreenModeOn)
77
+ return participantViewElement === null || participantViewElement === void 0 ? void 0 : participantViewElement.requestFullscreen().then(() => setFullscreenModeOn(true)).catch(console.error);
78
+ document
79
+ .exitFullscreen()
80
+ .catch(console.error)
81
+ .finally(() => setFullscreenModeOn(false));
82
+ };
83
+ return (_jsxs(GenericMenu, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleParticipantPinnedAt }, { children: [_jsx(Icon, { icon: "pin" }), participant.pinnedAt ? 'Unpin' : 'Pin'] })), _jsx(Restricted, Object.assign({ requiredGrants: [OwnCapability.BLOCK_USERS] }, { children: _jsxs(GenericMenuButtonItem, Object.assign({ onClick: blockUser }, { children: [_jsx(Icon, { icon: "not-allowed" }), "Block"] })) })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.MUTE_USERS] }, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.VIDEO), onClick: muteVideo }, { children: [_jsx(Icon, { icon: "camera-off-outline" }), "Turn off video"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE), onClick: muteScreenShare }, { children: [_jsx(Icon, { icon: "screen-share-off" }), "Turn off screen share"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.AUDIO), onClick: muteAudio }, { children: [_jsx(Icon, { icon: "no-audio" }), "Mute audio"] }))] })), _jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleFullscreenMode }, { children: [fullscreenModeOn ? 'Leave' : 'Enter', " fullscreen"] })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS] }, { children: [_jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_AUDIO) }, { children: "Allow audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_VIDEO) }, { children: "Allow video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SCREENSHARE) }, { children: "Allow screen sharing" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_AUDIO) }, { children: "Disable audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_VIDEO) }, { children: "Disable video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SCREENSHARE) }, { children: "Disable screen sharing" }))] }))] }));
75
84
  };
76
85
  //# sourceMappingURL=CallParticipantListingItem.js.map
package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":"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"}
package/dist/src/core/components/CallLayout/SpeakerLayout.js CHANGED
@@ -5,8 +5,8 @@ import { useCall, useLocalParticipant, useParticipants, } from '@stream-io/video
5
5
  import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
6
6
  import { IconButton } from '../../../components';
7
7
  import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
8
- const DefaultParticipantViewUIBar = ({ participant, }) => (_jsx(DefaultParticipantViewUI, { participant: participant, menuPlacement: "top-end" }));
9
- const DefaultParticipantViewUISpotlight = ({ participant, }) => (_jsx(DefaultParticipantViewUI, { participant: participant }));
8
+ const DefaultParticipantViewUIBar = () => (_jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
9
+ const DefaultParticipantViewUISpotlight = () => _jsx(DefaultParticipantViewUI, {});
10
10
  export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, }) => {
11
11
  const call = useCall();
12
12
  const [participantInSpotlight, ...otherParticipants] = useParticipants();
package/dist/src/core/components/CallLayout/SpeakerLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { Placement } from '@floating-ui/react';
3
- import { ParticipantViewProps } from './ParticipantView';
4
- export type ParticipantViewUIProps = Pick<ParticipantViewProps, 'participant'>;
5
3
  export type DefaultParticipantViewUIProps = {
6
4
  /**
7
5
  * Turns on/off the status indicator icons (mute, connection quality, etc...).
@@ -15,6 +13,6 @@ export type DefaultParticipantViewUIProps = {
15
13
  * Option to show/hide menu button component
16
14
  */
17
15
  showMenuButton?: boolean;
18
- } & ParticipantViewUIProps;
19
- export declare const DefaultParticipantViewUI: ({ participant, indicatorsVisible, menuPlacement, showMenuButton, }: DefaultParticipantViewUIProps) => JSX.Element;
20
- export declare const ParticipantDetails: ({ participant, indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, 'participant' | 'indicatorsVisible'>) => JSX.Element;
16
+ };
17
+ export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, }: DefaultParticipantViewUIProps) => JSX.Element;
18
+ export declare const ParticipantDetails: ({ indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => JSX.Element;
package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js CHANGED
@@ -8,19 +8,22 @@ import { Reaction } from '../../../components/Reaction';
8
8
  import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
9
9
  import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
10
10
  import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
11
+ import { useParticipantViewContext } from './ParticipantView';
11
12
  const ToggleButton = forwardRef((props, ref) => {
12
13
  return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
13
14
  });
14
- export const DefaultParticipantViewUI = ({ participant, indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
15
+ export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
15
16
  const call = useCall();
17
+ const { participant, participantViewElement } = useParticipantViewContext();
16
18
  const { reaction, sessionId } = participant;
17
- return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participant: participant }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { participant: participant, indicatorsVisible: indicatorsVisible })] }));
19
+ return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participantViewElement: participantViewElement, participant: participant }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
18
20
  };
19
- export const ParticipantDetails = ({ participant, indicatorsVisible = true, }) => {
21
+ export const ParticipantDetails = ({ indicatorsVisible = true, }) => {
22
+ const { participant } = useParticipantViewContext();
20
23
  const { isDominantSpeaker, isLoggedInUser, connectionQuality, publishedTracks, pinnedAt, sessionId, name, userId, videoStream, } = participant;
21
24
  const call = useCall();
22
25
  const connectionQualityAsString = !!connectionQuality &&
23
- String(SfuModels.ConnectionQuality[connectionQuality]).toLowerCase();
26
+ SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
24
27
  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
25
28
  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
26
29
  const isPinned = !!pinnedAt;
package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
package/dist/src/core/components/ParticipantView/ParticipantView.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { ComponentType, ReactElement } from 'react';
2
2
  import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
3
3
  import { VideoProps } from '../Video';
4
- import { ParticipantViewUIProps } from './DefaultParticipantViewUI';
4
+ export type ParticipantViewContextValue = Pick<ParticipantViewProps, 'participant'> & {
5
+ participantViewElement: HTMLDivElement | null;
6
+ };
7
+ export declare const useParticipantViewContext: () => ParticipantViewContextValue;
5
8
  export type ParticipantViewProps = {
6
9
  /**
7
10
  * The participant bound to this component.
@@ -12,7 +15,7 @@ export type ParticipantViewProps = {
12
15
  * pass `null` if you wish to not render anything
13
16
  * @default DefaultParticipantViewUI
14
17
  */
15
- ParticipantViewUI?: ComponentType<ParticipantViewUIProps> | ReactElement | null;
18
+ ParticipantViewUI?: ComponentType | ReactElement | null;
16
19
  /**
17
20
  * In supported browsers, this sets the default audio output.
18
21
  * The value of this prop should be a valid Audio Output `deviceId`.
@@ -27,15 +30,12 @@ export type ParticipantViewProps = {
27
30
  */
28
31
  muteAudio?: boolean;
29
32
  /**
30
- * A function meant for exposing the "native" element ref to the integrators.
31
- * The element can either be:
32
- * - `<video />` for participants with enabled video.
33
- * - `<div />` for participants with disabled video. This ref would point to
34
- * the VideoPlaceholder component.
35
- *
36
- * @param element the element ref.
33
+ * An object with set functions meant for exposing the "native" video
34
+ * and video placeholder elements to the integrators.
35
+ * - `refs.setVideoElement`
36
+ * - `refs.setVideoPlaceholderElement`
37
37
  */
38
- setVideoElementRef?: (element: HTMLElement | null) => void;
38
+ refs?: VideoProps['refs'];
39
39
  /**
40
40
  * Custom class applied to the root DOM element.
41
41
  */
@@ -51,7 +51,7 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
51
51
  * pass `null` if you wish to not render anything
52
52
  * @default DefaultParticipantViewUI
53
53
  */
54
- ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<ParticipantViewUIProps> | null | undefined;
54
+ ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<{}> | null | undefined;
55
55
  /**
56
56
  * In supported browsers, this sets the default audio output.
57
57
  * The value of this prop should be a valid Audio Output `deviceId`.
@@ -66,15 +66,12 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
66
66
  */
67
67
  muteAudio?: boolean | undefined;
68
68
  /**
69
- * A function meant for exposing the "native" element ref to the integrators.
70
- * The element can either be:
71
- * - `<video />` for participants with enabled video.
72
- * - `<div />` for participants with disabled video. This ref would point to
73
- * the VideoPlaceholder component.
74
- *
75
- * @param element the element ref.
69
+ * An object with set functions meant for exposing the "native" video
70
+ * and video placeholder elements to the integrators.
71
+ * - `refs.setVideoElement`
72
+ * - `refs.setVideoPlaceholderElement`
76
73
  */
77
- setVideoElementRef?: ((element: HTMLElement | null) => void) | undefined;
74
+ refs?: VideoProps['refs'];
78
75
  /**
79
76
  * Custom class applied to the root DOM element.
80
77
  */
package/dist/src/core/components/ParticipantView/ParticipantView.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useState } from 'react';
2
+ import { useContext, useMemo } from 'react';
3
+ import { forwardRef, useState, createContext, } from 'react';
3
4
  import clsx from 'clsx';
4
5
  import { SfuModels, } from '@stream-io/video-client';
5
6
  import { Audio } from '../Audio';
6
7
  import { Video } from '../Video';
7
8
  import { useTrackElementVisibility } from '../../hooks';
8
- import { DefaultParticipantViewUI, } from './DefaultParticipantViewUI';
9
- import { isComponentType, applyElementRef } from '../../../utilities';
10
- export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'video', muteAudio, setVideoElementRef, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
9
+ import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
10
+ import { isComponentType, applyElementToRef } from '../../../utilities';
11
+ const ParticipantViewContext = createContext(undefined);
12
+ export const useParticipantViewContext = () => useContext(ParticipantViewContext);
13
+ export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'video', muteAudio, refs, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
11
14
  const { audioStream, isLoggedInUser, isSpeaking, publishedTracks, sessionId, } = participant;
12
15
  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
13
16
  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
@@ -17,13 +20,14 @@ export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'v
17
20
  sessionId,
18
21
  trackedElement,
19
22
  });
20
- return (_jsxs("div", Object.assign({ ref: (element) => {
21
- applyElementRef(ref, element);
23
+ const participantViewContextValue = useMemo(() => ({ participant, participantViewElement: trackedElement }), [participant, trackedElement]);
24
+ return (_jsx("div", Object.assign({ ref: (element) => {
25
+ applyElementToRef(ref, element);
22
26
  setTrackedElement(element);
23
- }, className: clsx('str-video__participant-view', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className) }, { children: [_jsx(Audio
24
- // mute the local participant, as we don't want to hear ourselves
25
- , {
27
+ }, className: clsx('str-video__participant-view', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className) }, { children: _jsxs(ParticipantViewContext.Provider, Object.assign({ value: participantViewContextValue }, { children: [_jsx(Audio
26
28
  // mute the local participant, as we don't want to hear ourselves
27
- muted: isLoggedInUser || muteAudio, sinkId: sinkId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, setVideoElementRef: setVideoElementRef, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, { participant: participant })) : (ParticipantViewUI)] })));
29
+ , {
30
+ // mute the local participant, as we don't want to hear ourselves
31
+ muted: isLoggedInUser || muteAudio, sinkId: sinkId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, refs: refs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
28
32
  });
29
33
  //# sourceMappingURL=ParticipantView.js.map
package/dist/src/core/components/ParticipantView/ParticipantView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAiB,QAAQ,EAAgB,MAAM,OAAO,CAAC;AAC1E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,SAAS,GAGV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAmDtE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,WAAW,EACX,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,kBAAkB,EAClB,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GAAG,wBAAiE,GACtF,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,WAAW,EACX,cAAc,EACd,UAAU,EACV,eAAe,EACf,SAAS,GACV,GAAG,WAAW,CAAC;IAEhB,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAErE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,IAAI,CACL,CAAC;IAEF,iEAAiE;IACjE,yBAAyB,CAAC;QACxB,SAAS;QACT,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAC9B,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,UAAU,IAAI,uCAAuC,EACrD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,SAAS,CACV,iBAED,KAAC,KAAK;YACJ,iEAAiE;;gBAAjE,iEAAiE;gBACjE,KAAK,EAAE,cAAc,IAAI,SAAS,EAClC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,GACxB,EACF,KAAC,KAAK,IACJ,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,SACR,EACD,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACpC,KAAC,iBAAiB,IAAC,WAAW,EAAE,WAAW,GAAI,CAChD,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,KACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
1
+ {"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,UAAU,EAEV,QAAQ,EAER,aAAa,GACd,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,SAAS,GAGV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASxE,MAAM,sBAAsB,GAAG,aAAa,CAE1C,SAAS,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAC5C,UAAU,CAAC,sBAAsB,CAAgC,CAAC;AA6CpE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,WAAW,EACX,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GAAG,wBAAyC,GAC9D,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,WAAW,EACX,cAAc,EACd,UAAU,EACV,eAAe,EACf,SAAS,GACV,GAAG,WAAW,CAAC;IAEhB,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAErE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,IAAI,CACL,CAAC;IAEF,iEAAiE;IACjE,yBAAyB,CAAC;QACxB,SAAS;QACT,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,2BAA2B,GAAG,OAAO,CACzC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,sBAAsB,EAAE,cAAc,EAAE,CAAC,EAC/D,CAAC,WAAW,EAAE,cAAc,CAAC,CAC9B,CAAC;IAEF,OAAO,CACL,4BACE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAChC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,UAAU,IAAI,uCAAuC,EACrD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,SAAS,CACV,gBAED,MAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,2BAA2B,iBACjE,KAAC,KAAK;gBACJ,iEAAiE;;oBAAjE,iEAAiE;oBACjE,KAAK,EAAE,cAAc,IAAI,SAAS,EAClC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,GACxB,EACF,KAAC,KAAK,IACJ,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,SACR,EACD,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACpC,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,KAC+B,IAC9B,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
package/dist/src/core/components/Video/BaseVideo.js CHANGED
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { forwardRef, useEffect, useState } from 'react';
14
14
  import { Browsers } from '@stream-io/video-client';
15
- import { applyElementRef } from '../../../utilities';
15
+ import { applyElementToRef } from '../../../utilities';
16
16
  /**
17
17
  * @description Extends video element with `stream` property
18
18
  * (`srcObject`) to reactively handle stream changes
@@ -41,7 +41,7 @@ export const BaseVideo = forwardRef((_a, ref) => {
41
41
  };
42
42
  }, [stream, videoElement]);
43
43
  return (_jsx("video", Object.assign({ autoPlay: true, playsInline: true }, rest, { ref: (element) => {
44
- applyElementRef(ref, element);
44
+ applyElementToRef(ref, element);
45
45
  setVideoElement(element);
46
46
  } })));
47
47
  });
package/dist/src/core/components/Video/BaseVideo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseVideo.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/BaseVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAMrD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAmB,EAAE,GAAG,EAAE,EAAE;QAA5B,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IAChB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE,OAAO;QACrC,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE,OAAO;QAE9C,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;QAChC,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;YAC/C,4CAA4C;YAC5C,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;gBAChC,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC9B,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;gBAC5C,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,8BACE,QAAQ,QACR,WAAW,UACP,IAAI,IACR,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAC9B,eAAe,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
1
+ {"version":3,"file":"BaseVideo.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/BaseVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMvD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAmB,EAAE,GAAG,EAAE,EAAE;QAA5B,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IAChB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE,OAAO;QACrC,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE,OAAO;QAE9C,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;QAChC,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;YAC/C,4CAA4C;YAC5C,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;gBAChC,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC9B,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;gBAC5C,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,8BACE,QAAQ,QACR,WAAW,UACP,IAAI,IACR,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAChC,eAAe,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
package/dist/src/core/components/Video/Video.d.ts CHANGED
@@ -4,7 +4,10 @@ import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
4
4
  export type VideoProps = ComponentPropsWithoutRef<'video'> & {
5
5
  kind: 'video' | 'screen';
6
6
  participant: StreamVideoParticipant;
7
- setVideoElementRef?: (element: HTMLElement | null) => void;
8
7
  VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
8
+ refs?: {
9
+ setVideoElement?: (element: HTMLVideoElement | null) => void;
10
+ setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
11
+ };
9
12
  };
10
- export declare const Video: ({ kind, participant, className, setVideoElementRef, VideoPlaceholder, ...rest }: VideoProps) => JSX.Element | null;
13
+ export declare const Video: ({ kind, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps) => JSX.Element | null;
package/dist/src/core/components/Video/Video.js CHANGED
@@ -17,7 +17,7 @@ import { DefaultVideoPlaceholder, } from './DefaultVideoPlaceholder';
17
17
  import { BaseVideo } from './BaseVideo';
18
18
  import { useCall } from '@stream-io/video-react-bindings';
19
19
  export const Video = (_a) => {
20
- var { kind, participant, className, setVideoElementRef, VideoPlaceholder = DefaultVideoPlaceholder } = _a, rest = __rest(_a, ["kind", "participant", "className", "setVideoElementRef", "VideoPlaceholder"]);
20
+ var { kind, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs } = _a, rest = __rest(_a, ["kind", "participant", "className", "VideoPlaceholder", "refs"]);
21
21
  const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLoggedInUser, userId, } = participant;
22
22
  const call = useCall();
23
23
  const [videoElement, setVideoElement] = useState(null);
@@ -145,9 +145,10 @@ export const Video = (_a) => {
145
145
  'str-video__video--tall': !isWideMode,
146
146
  'str-video__video--mirror': isLoggedInUser && kind === 'video',
147
147
  'str-video__video--screen-share': kind === 'screen',
148
- }), "data-user-id": userId, "data-session-id": sessionId, ref: (ref) => {
149
- setVideoElement(ref);
150
- setVideoElementRef === null || setVideoElementRef === void 0 ? void 0 : setVideoElementRef(ref);
151
- } })), displayPlaceholder && (_jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: setVideoElementRef }))] }));
148
+ }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
149
+ var _a;
150
+ setVideoElement(element);
151
+ (_a = refs === null || refs === void 0 ? void 0 : refs.setVideoElement) === null || _a === void 0 ? void 0 : _a.call(refs, element);
152
+ } })), displayPlaceholder && (_jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs === null || refs === void 0 ? void 0 : refs.setVideoPlaceholderElement }))] }));
152
153
  };
153
154
  //# sourceMappingURL=Video.js.map
package/dist/src/core/components/Video/Video.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/Video.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/Video.tsx"],"names":[],"mappings":"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"}
package/dist/src/core/hooks/useTrackElementVisibility.js CHANGED
@@ -8,7 +8,10 @@ export const useTrackElementVisibility = ({ trackedElement, viewportTracker: pro
8
8
  if (!trackedElement || !viewportTracker || !call)
9
9
  return;
10
10
  const unobserve = viewportTracker.observe(trackedElement, (entry) => {
11
- call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, p), { viewportVisibilityState: entry.isIntersecting
11
+ call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, p), { viewportVisibilityState:
12
+ // observer triggers when element is "moved" to be a fullscreen element
13
+ // keep it VISIBLE if that happens to prevent fullscreen with placeholder
14
+ entry.isIntersecting || document.fullscreenElement === trackedElement
12
15
  ? VisibilityState.VISIBLE
13
16
  : VisibilityState.INVISIBLE })));
14
17
  });
package/dist/src/core/hooks/useTrackElementVisibility.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTrackElementVisibility.js","sourceRoot":"","sources":["../../../../src/core/hooks/useTrackElementVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,eAAe,EAAE,oBAAoB,EACrC,SAAS,GAKV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,eAAe,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI;YAAE,OAAO;QAEzD,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YAClE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,EAAE,KAAK,CAAC,cAAc;oBAC3C,CAAC,CAAC,eAAe,CAAC,OAAO;oBACzB,CAAC,CAAC,eAAe,CAAC,SAAS,IAC7B,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,CAAC;YACZ,iDAAiD;YACjD,qDAAqD;YACrD,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,EAAE,eAAe,CAAC,OAAO,IAChD,CAAC,CAAC;QACN,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC"}
1
+ {"version":3,"file":"useTrackElementVisibility.js","sourceRoot":"","sources":["../../../../src/core/hooks/useTrackElementVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,eAAe,EAAE,oBAAoB,EACrC,SAAS,GAKV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,eAAe,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI;YAAE,OAAO;QAEzD,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YAClE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB;gBACrB,uEAAuE;gBACvE,yEAAyE;gBACzE,KAAK,CAAC,cAAc,IAAI,QAAQ,CAAC,iBAAiB,KAAK,cAAc;oBACnE,CAAC,CAAC,eAAe,CAAC,OAAO;oBACzB,CAAC,CAAC,eAAe,CAAC,SAAS,IAC/B,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,CAAC;YACZ,iDAAiD;YACjD,qDAAqD;YACrD,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,EAAE,eAAe,CAAC,OAAO,IAChD,CAAC,CAAC;QACN,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC"}
package/dist/src/utilities/applyElementToRef.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ForwardedRef } from 'react';
2
+ export declare const applyElementToRef: <T extends HTMLElement | null>(ref: ForwardedRef<T>, element: T) => void;
package/dist/src/utilities/{applyElementRef.js → applyElementToRef.js} RENAMED
@@ -1,8 +1,8 @@
1
- export const applyElementRef = (ref, element) => {
1
+ export const applyElementToRef = (ref, element) => {
2
2
  if (!ref)
3
3
  return;
4
4
  if (typeof ref === 'function')
5
5
  return ref(element);
6
6
  ref.current = element;
7
7
  };
8
- //# sourceMappingURL=applyElementRef.js.map
8
+ //# sourceMappingURL=applyElementToRef.js.map
package/dist/src/utilities/applyElementToRef.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"applyElementToRef.js","sourceRoot":"","sources":["../../../src/utilities/applyElementToRef.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAAoB,EACpB,OAAU,EACV,EAAE;IACF,IAAI,CAAC,GAAG;QAAE,OAAO;IAEjB,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;IAEnD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,CAAC,CAAC"}
package/dist/src/utilities/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from './isComponentType';
2
2
  export * from './chunk';
3
- export * from './applyElementRef';
3
+ export * from './applyElementToRef';
package/dist/src/utilities/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export * from './isComponentType';
2
2
  export * from './chunk';
3
- export * from './applyElementRef';
3
+ export * from './applyElementToRef';
4
4
  //# sourceMappingURL=index.js.map
package/dist/src/utilities/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
package/package.json CHANGED
@@ -25,9 +25,9 @@
25
25
  "@floating-ui/react": "^0.22.0",
26
26
  "@nivo/core": "^0.80.0",
27
27
  "@nivo/line": "^0.80.0",
28
- "@stream-io/i18n": "^0.0.1-alpha.60",
29
- "@stream-io/video-client": "^0.0.1-alpha.184",
30
- "@stream-io/video-react-bindings": "^0.0.1-alpha.71",
28
+ "@stream-io/i18n": "^0.0.1-alpha.61",
29
+ "@stream-io/video-client": "^0.0.1-alpha.185",
30
+ "@stream-io/video-react-bindings": "^0.0.1-alpha.72",
31
31
  "clsx": "^1.2.1",
32
32
  "rxjs": "~7.8.1"
33
33
  },
@@ -36,7 +36,7 @@
36
36
  "react-dom": "^18.0.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@stream-io/video-styling": "^0.0.1-alpha.56",
39
+ "@stream-io/video-styling": "^0.0.1-alpha.57",
40
40
  "@types/rimraf": "^3.0.2",
41
41
  "react": "^18.2.0",
42
42
  "react-dom": "^18.2.0",
@@ -45,5 +45,5 @@
45
45
  "typedoc": "^0.24.7",
46
46
  "typescript": "^4.9.5"
47
47
  },
48
- "version": "0.0.1-alpha.78"
48
+ "version": "0.0.1-alpha.79"
49
49
  }
package/src/components/CallParticipantsList/CallParticipantListingItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import clsx from 'clsx';
2
- import { ComponentProps, ComponentType, forwardRef } from 'react';
2
+ import { ComponentProps, ComponentType, forwardRef, useState } from 'react';
3
3
  import {
4
4
  Restricted,
5
5
  useCall,
@@ -119,9 +119,14 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
119
119
 
120
120
  export const ParticipantActionsContextMenu = ({
121
121
  participant,
122
+ participantViewElement,
122
123
  }: {
123
124
  participant: StreamVideoParticipant;
125
+ participantViewElement?: HTMLDivElement | null;
124
126
  }) => {
127
+ const [fullscreenModeOn, setFullscreenModeOn] = useState(
128
+ !!document.fullscreenElement,
129
+ );
125
130
  const activeCall = useCall();
126
131
 
127
132
  const blockUser = () => {
@@ -168,6 +173,19 @@ export const ParticipantActionsContextMenu = ({
168
173
  );
169
174
  };
170
175
 
176
+ const toggleFullscreenMode = () => {
177
+ if (!fullscreenModeOn)
178
+ return participantViewElement
179
+ ?.requestFullscreen()
180
+ .then(() => setFullscreenModeOn(true))
181
+ .catch(console.error);
182
+
183
+ document
184
+ .exitFullscreen()
185
+ .catch(console.error)
186
+ .finally(() => setFullscreenModeOn(false));
187
+ };
188
+
171
189
  return (
172
190
  <GenericMenu>
173
191
  <GenericMenuButtonItem onClick={toggleParticipantPinnedAt}>
@@ -214,6 +232,9 @@ export const ParticipantActionsContextMenu = ({
214
232
  Mute audio
215
233
  </GenericMenuButtonItem>
216
234
  </Restricted>
235
+ <GenericMenuButtonItem onClick={toggleFullscreenMode}>
236
+ {fullscreenModeOn ? 'Leave' : 'Enter'} fullscreen
237
+ </GenericMenuButtonItem>
217
238
  <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
218
239
  <GenericMenuButtonItem
219
240
  onClick={grantPermission(OwnCapability.SEND_AUDIO)}
package/src/core/components/CallLayout/SpeakerLayout.tsx CHANGED
@@ -20,7 +20,6 @@ import {
20
20
  DefaultParticipantViewUI,
21
21
  ParticipantView,
22
22
  ParticipantViewProps,
23
- ParticipantViewUIProps,
24
23
  } from '../ParticipantView';
25
24
  import { IconButton } from '../../../components';
26
25
  import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
@@ -30,17 +29,11 @@ export type SpeakerLayoutProps = {
30
29
  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
31
30
  } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
32
31
 
33
- const DefaultParticipantViewUIBar = ({
34
- participant,
35
- }: ParticipantViewUIProps) => (
36
- <DefaultParticipantViewUI participant={participant} menuPlacement="top-end" />
32
+ const DefaultParticipantViewUIBar = () => (
33
+ <DefaultParticipantViewUI menuPlacement="top-end" />
37
34
  );
38
35
 
39
- const DefaultParticipantViewUISpotlight = ({
40
- participant,
41
- }: ParticipantViewUIProps) => (
42
- <DefaultParticipantViewUI participant={participant} />
43
- );
36
+ const DefaultParticipantViewUISpotlight = () => <DefaultParticipantViewUI />;
44
37
 
45
38
  export const SpeakerLayout = ({
46
39
  ParticipantViewUIBar = DefaultParticipantViewUIBar,
package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx CHANGED
@@ -12,13 +12,11 @@ import {
12
12
  ToggleMenuButtonProps,
13
13
  } from '../../../components';
14
14
  import { Reaction } from '../../../components/Reaction';
15
- import { ParticipantViewProps } from './ParticipantView';
16
15
 
17
16
  import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
18
17
  import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
19
18
  import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
20
-
21
- export type ParticipantViewUIProps = Pick<ParticipantViewProps, 'participant'>;
19
+ import { useParticipantViewContext } from './ParticipantView';
22
20
 
23
21
  export type DefaultParticipantViewUIProps = {
24
22
  /**
@@ -33,7 +31,7 @@ export type DefaultParticipantViewUIProps = {
33
31
  * Option to show/hide menu button component
34
32
  */
35
33
  showMenuButton?: boolean;
36
- } & ParticipantViewUIProps;
34
+ };
37
35
 
38
36
  const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
39
37
  (props, ref) => {
@@ -42,12 +40,12 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
42
40
  );
43
41
 
44
42
  export const DefaultParticipantViewUI = ({
45
- participant,
46
43
  indicatorsVisible = true,
47
44
  menuPlacement = 'bottom-end',
48
45
  showMenuButton = true,
49
46
  }: DefaultParticipantViewUIProps) => {
50
47
  const call = useCall()!;
48
+ const { participant, participantViewElement } = useParticipantViewContext();
51
49
  const { reaction, sessionId } = participant;
52
50
 
53
51
  return (
@@ -58,27 +56,24 @@ export const DefaultParticipantViewUI = ({
58
56
  placement={menuPlacement}
59
57
  ToggleButton={ToggleButton}
60
58
  >
61
- <ParticipantActionsContextMenu participant={participant} />
59
+ <ParticipantActionsContextMenu
60
+ participantViewElement={participantViewElement}
61
+ participant={participant}
62
+ />
62
63
  </MenuToggle>
63
64
  )}
64
65
  {reaction && (
65
66
  <Reaction reaction={reaction} sessionId={sessionId} call={call} />
66
67
  )}
67
- <ParticipantDetails
68
- participant={participant}
69
- indicatorsVisible={indicatorsVisible}
70
- />
68
+ <ParticipantDetails indicatorsVisible={indicatorsVisible} />
71
69
  </>
72
70
  );
73
71
  };
74
72
 
75
73
  export const ParticipantDetails = ({
76
- participant,
77
74
  indicatorsVisible = true,
78
- }: Pick<
79
- DefaultParticipantViewUIProps,
80
- 'participant' | 'indicatorsVisible'
81
- >) => {
75
+ }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {
76
+ const { participant } = useParticipantViewContext();
82
77
  const {
83
78
  isDominantSpeaker,
84
79
  isLoggedInUser,
@@ -94,7 +89,7 @@ export const ParticipantDetails = ({
94
89
 
95
90
  const connectionQualityAsString =
96
91
  !!connectionQuality &&
97
- String(SfuModels.ConnectionQuality[connectionQuality]).toLowerCase();
92
+ SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
98
93
 
99
94
  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
100
95
  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
package/src/core/components/ParticipantView/ParticipantView.tsx CHANGED
@@ -1,4 +1,11 @@
1
- import { forwardRef, ComponentType, useState, ReactElement } from 'react';
1
+ import { useContext, useMemo } from 'react';
2
+ import {
3
+ forwardRef,
4
+ ComponentType,
5
+ useState,
6
+ ReactElement,
7
+ createContext,
8
+ } from 'react';
2
9
  import clsx from 'clsx';
3
10
  import {
4
11
  SfuModels,
@@ -9,11 +16,22 @@ import {
9
16
  import { Audio } from '../Audio';
10
17
  import { Video, VideoProps } from '../Video';
11
18
  import { useTrackElementVisibility } from '../../hooks';
12
- import {
13
- DefaultParticipantViewUI,
14
- ParticipantViewUIProps,
15
- } from './DefaultParticipantViewUI';
16
- import { isComponentType, applyElementRef } from '../../../utilities';
19
+ import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
20
+ import { isComponentType, applyElementToRef } from '../../../utilities';
21
+
22
+ export type ParticipantViewContextValue = Pick<
23
+ ParticipantViewProps,
24
+ 'participant'
25
+ > & {
26
+ participantViewElement: HTMLDivElement | null;
27
+ };
28
+
29
+ const ParticipantViewContext = createContext<
30
+ ParticipantViewContextValue | undefined
31
+ >(undefined);
32
+
33
+ export const useParticipantViewContext = () =>
34
+ useContext(ParticipantViewContext) as ParticipantViewContextValue;
17
35
 
18
36
  export type ParticipantViewProps = {
19
37
  /**
@@ -26,10 +44,7 @@ export type ParticipantViewProps = {
26
44
  * pass `null` if you wish to not render anything
27
45
  * @default DefaultParticipantViewUI
28
46
  */
29
- ParticipantViewUI?:
30
- | ComponentType<ParticipantViewUIProps>
31
- | ReactElement
32
- | null;
47
+ ParticipantViewUI?: ComponentType | ReactElement | null;
33
48
 
34
49
  /**
35
50
  * In supported browsers, this sets the default audio output.
@@ -48,15 +63,12 @@ export type ParticipantViewProps = {
48
63
  muteAudio?: boolean;
49
64
 
50
65
  /**
51
- * A function meant for exposing the "native" element ref to the integrators.
52
- * The element can either be:
53
- * - `<video />` for participants with enabled video.
54
- * - `<div />` for participants with disabled video. This ref would point to
55
- * the VideoPlaceholder component.
56
- *
57
- * @param element the element ref.
66
+ * An object with set functions meant for exposing the "native" video
67
+ * and video placeholder elements to the integrators.
68
+ * - `refs.setVideoElement`
69
+ * - `refs.setVideoPlaceholderElement`
58
70
  */
59
- setVideoElementRef?: (element: HTMLElement | null) => void;
71
+ refs?: VideoProps['refs'];
60
72
 
61
73
  /**
62
74
  * Custom class applied to the root DOM element.
@@ -71,10 +83,10 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
71
83
  sinkId,
72
84
  videoKind = 'video',
73
85
  muteAudio,
74
- setVideoElementRef,
86
+ refs,
75
87
  className,
76
88
  VideoPlaceholder,
77
- ParticipantViewUI = DefaultParticipantViewUI as ComponentType<ParticipantViewUIProps>,
89
+ ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
78
90
  },
79
91
  ref,
80
92
  ) => {
@@ -99,10 +111,15 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
99
111
  trackedElement,
100
112
  });
101
113
 
114
+ const participantViewContextValue = useMemo(
115
+ () => ({ participant, participantViewElement: trackedElement }),
116
+ [participant, trackedElement],
117
+ );
118
+
102
119
  return (
103
120
  <div
104
121
  ref={(element) => {
105
- applyElementRef(ref, element);
122
+ applyElementToRef(ref, element);
106
123
  setTrackedElement(element);
107
124
  }}
108
125
  className={clsx(
@@ -113,24 +130,26 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
113
130
  className,
114
131
  )}
115
132
  >
116
- <Audio
117
- // mute the local participant, as we don't want to hear ourselves
118
- muted={isLoggedInUser || muteAudio}
119
- sinkId={sinkId}
120
- audioStream={audioStream}
121
- />
122
- <Video
123
- VideoPlaceholder={VideoPlaceholder}
124
- participant={participant}
125
- kind={videoKind}
126
- setVideoElementRef={setVideoElementRef}
127
- autoPlay
128
- />
129
- {isComponentType(ParticipantViewUI) ? (
130
- <ParticipantViewUI participant={participant} />
131
- ) : (
132
- ParticipantViewUI
133
- )}
133
+ <ParticipantViewContext.Provider value={participantViewContextValue}>
134
+ <Audio
135
+ // mute the local participant, as we don't want to hear ourselves
136
+ muted={isLoggedInUser || muteAudio}
137
+ sinkId={sinkId}
138
+ audioStream={audioStream}
139
+ />
140
+ <Video
141
+ VideoPlaceholder={VideoPlaceholder}
142
+ participant={participant}
143
+ kind={videoKind}
144
+ refs={refs}
145
+ autoPlay
146
+ />
147
+ {isComponentType(ParticipantViewUI) ? (
148
+ <ParticipantViewUI />
149
+ ) : (
150
+ ParticipantViewUI
151
+ )}
152
+ </ParticipantViewContext.Provider>
134
153
  </div>
135
154
  );
136
155
  },
package/src/core/components/Video/BaseVideo.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ComponentPropsWithRef, forwardRef, useEffect, useState } from 'react';
2
2
  import { Browsers } from '@stream-io/video-client';
3
3
 
4
- import { applyElementRef } from '../../../utilities';
4
+ import { applyElementToRef } from '../../../utilities';
5
5
 
6
6
  export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
7
7
  stream?: MediaStream;
@@ -44,7 +44,7 @@ export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
44
44
  playsInline
45
45
  {...rest}
46
46
  ref={(element) => {
47
- applyElementRef(ref, element);
47
+ applyElementToRef(ref, element);
48
48
  setVideoElement(element);
49
49
  }}
50
50
  />
package/src/core/components/Video/Video.tsx CHANGED
@@ -23,16 +23,19 @@ import { useCall } from '@stream-io/video-react-bindings';
23
23
  export type VideoProps = ComponentPropsWithoutRef<'video'> & {
24
24
  kind: 'video' | 'screen';
25
25
  participant: StreamVideoParticipant;
26
- setVideoElementRef?: (element: HTMLElement | null) => void;
27
26
  VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
27
+ refs?: {
28
+ setVideoElement?: (element: HTMLVideoElement | null) => void;
29
+ setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
30
+ };
28
31
  };
29
32
 
30
33
  export const Video = ({
31
34
  kind,
32
35
  participant,
33
36
  className,
34
- setVideoElementRef,
35
37
  VideoPlaceholder = DefaultVideoPlaceholder,
38
+ refs,
36
39
  ...rest
37
40
  }: VideoProps) => {
38
41
  const {
@@ -232,16 +235,16 @@ export const Video = ({
232
235
  })}
233
236
  data-user-id={userId}
234
237
  data-session-id={sessionId}
235
- ref={(ref) => {
236
- setVideoElement(ref);
237
- setVideoElementRef?.(ref);
238
+ ref={(element) => {
239
+ setVideoElement(element);
240
+ refs?.setVideoElement?.(element);
238
241
  }}
239
242
  />
240
243
  {displayPlaceholder && (
241
244
  <VideoPlaceholder
242
245
  style={{ position: 'absolute' }}
243
246
  participant={participant}
244
- ref={setVideoElementRef}
247
+ ref={refs?.setVideoPlaceholderElement}
245
248
  />
246
249
  )}
247
250
  </>
package/src/core/hooks/useTrackElementVisibility.ts CHANGED
@@ -21,9 +21,12 @@ export const useTrackElementVisibility = <T extends HTMLElement>({
21
21
  const unobserve = viewportTracker.observe(trackedElement, (entry) => {
22
22
  call.state.updateParticipant(sessionId, (p) => ({
23
23
  ...p,
24
- viewportVisibilityState: entry.isIntersecting
25
- ? VisibilityState.VISIBLE
26
- : VisibilityState.INVISIBLE,
24
+ viewportVisibilityState:
25
+ // observer triggers when element is "moved" to be a fullscreen element
26
+ // keep it VISIBLE if that happens to prevent fullscreen with placeholder
27
+ entry.isIntersecting || document.fullscreenElement === trackedElement
28
+ ? VisibilityState.VISIBLE
29
+ : VisibilityState.INVISIBLE,
27
30
  }));
28
31
  });
29
32
 
package/src/utilities/{applyElementRef.ts → applyElementToRef.ts} RENAMED
@@ -1,6 +1,6 @@
1
1
  import type { ForwardedRef } from 'react';
2
2
 
3
- export const applyElementRef = <T extends HTMLElement | null>(
3
+ export const applyElementToRef = <T extends HTMLElement | null>(
4
4
  ref: ForwardedRef<T>,
5
5
  element: T,
6
6
  ) => {
package/src/utilities/index.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from './isComponentType';
2
2
  export * from './chunk';
3
- export * from './applyElementRef';
3
+ export * from './applyElementToRef';
package/dist/src/utilities/applyElementRef.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import type { ForwardedRef } from 'react';
2
- export declare const applyElementRef: <T extends HTMLElement | null>(ref: ForwardedRef<T>, element: T) => void;
package/dist/src/utilities/applyElementRef.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"applyElementRef.js","sourceRoot":"","sources":["../../../src/utilities/applyElementRef.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAoB,EACpB,OAAU,EACV,EAAE;IACF,IAAI,CAAC,GAAG;QAAE,OAAO;IAEjB,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;IAEnD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,CAAC,CAAC"}