diff --git a/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
index 5326f924a3..d80f1f0db3 100644
--- a/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
@@ -57,8 +57,7 @@ export const SpeakerLayout = ({
useEffect(() => {
if (!scrollWrapper || !call) return;
- const cleanup = call.viewportTracker.setViewport(scrollWrapper);
-
+ const cleanup = call.setViewport(scrollWrapper);
return () => cleanup();
}, [scrollWrapper, call]);
@@ -97,7 +96,9 @@ export const SpeakerLayout = ({
diff --git a/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx b/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
index 6a0d14bdfb..111faffcd5 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
@@ -68,7 +68,7 @@ export const DefaultParticipantViewUI = ({
menuPlacement = 'bottom-end',
showMenuButton = true,
}: DefaultParticipantViewUIProps) => {
- const { participant, participantViewElement, videoMode, videoElement } =
+ const { participant, participantViewElement, trackType, videoElement } =
useParticipantViewContext();
const { publishedTracks } = participant;
@@ -79,14 +79,15 @@ export const DefaultParticipantViewUI = ({
if (
participant.isLocalParticipant &&
hasScreenShare &&
- videoMode === 'screen'
- )
+ trackType === 'screenShareTrack'
+ ) {
return (
<>
);
+ }
return (
<>
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
index 1ba45c148d..090b0c8161 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
@@ -12,8 +12,8 @@ import {
SfuModels,
StreamVideoLocalParticipant,
StreamVideoParticipant,
+ VideoTrackType,
} from '@stream-io/video-client';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
import { Audio } from '../Audio';
import { Video, VideoProps } from '../Video';
@@ -22,7 +22,7 @@ import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
import { applyElementToRef, isComponentType } from '../../../utilities';
export type ParticipantViewContextValue = Required<
- Pick
+ Pick
> & {
participantViewElement: HTMLDivElement | null;
videoElement: HTMLVideoElement | null;
@@ -52,7 +52,7 @@ export type ParticipantViewProps = {
/**
* The kind of video stream to play for the given participant. The default value is `video`. You can use `none` if you're building an audio-only call.
*/
- videoMode?: 'video' | 'screen' | 'none';
+ trackType?: VideoTrackType | 'none';
/**
* This prop is only useful for advanced use-cases (for example building your own paginated layout). When set to `true` it will mute the give participant's audio stream on the client side. The local participant is always muted.
@@ -77,7 +77,7 @@ export const ParticipantView = forwardRef(
(
{
participant,
- videoMode = 'video',
+ trackType = 'videoTrack',
muteAudio,
refs: { setVideoElement, setVideoPlaceholderElement } = {},
className,
@@ -87,15 +87,12 @@ export const ParticipantView = forwardRef(
ref,
) => {
const {
- audioStream,
isLocalParticipant,
isSpeaking,
isDominantSpeaker,
publishedTracks,
sessionId,
} = participant;
- const { useLocalParticipant } = useCallStateHooks();
- const localParticipant = useLocalParticipant();
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
@@ -114,6 +111,7 @@ export const ParticipantView = forwardRef(
useTrackElementVisibility({
sessionId,
trackedElement,
+ trackType,
});
const participantViewContextValue = useMemo(
@@ -122,14 +120,14 @@ export const ParticipantView = forwardRef(
participantViewElement: trackedElement,
videoElement: contextVideoElement,
videoPlaceholderElement: contextVideoPlaceholderElement,
- videoMode,
+ trackType,
}),
[
contextVideoElement,
contextVideoPlaceholderElement,
participant,
trackedElement,
- videoMode,
+ trackType,
],
);
@@ -165,15 +163,12 @@ export const ParticipantView = forwardRef(
{/* mute the local participant, as we don't want to hear ourselves */}
{!isLocalParticipant && !muteAudio && (
- (
null,
);
-
- // const [videoTrackMuted, setVideoTrackMuted] = useState(false);
const [videoPlaying, setVideoPlaying] = useState(false);
- const viewportVisibilityRef = useRef(
- viewportVisibilityState,
- );
+ const [isWideMode, setIsWideMode] = useState(true);
const stream =
- kind === 'none'
+ trackType === 'none'
? undefined
- : kind === 'video'
+ : trackType === 'videoTrack'
? videoStream
: screenShareStream;
- // TODO: handle track muting
- // useEffect(() => {
- // if (!stream) return;
-
- // const [track] = stream.getVideoTracks();
- // setVideoTrackMuted(track.muted);
-
- // const handleMute = () => {
- // setVideoTrackMuted(true);
- // };
- // const handleUnmute = () => {
- // setVideoTrackMuted(false);
- // };
-
- // track.addEventListener('mute', handleMute);
- // track.addEventListener('unmute', handleUnmute);
-
- // return () => {
- // track.removeEventListener('mute', handleMute);
- // track.removeEventListener('unmute', handleUnmute);
- // };
- // }, [stream]);
-
const isPublishingTrack =
- kind === 'none'
+ trackType === 'none'
? false
: publishedTracks.includes(
- kind === 'video'
+ trackType === 'videoTrack'
? SfuModels.TrackType.VIDEO
: SfuModels.TrackType.SCREEN_SHARE,
);
- const displayPlaceholder =
- !isPublishingTrack ||
- (viewportVisibilityState === VisibilityState.INVISIBLE &&
- !screenShareStream) ||
- !videoPlaying;
-
- const lastDimensionRef = useRef();
- const updateSubscription = useCallback(
- (
- dimension?: SfuModels.VideoDimension,
- type: DebounceType = DebounceType.SLOW,
- ) => {
- if (!call || kind === 'none') return;
-
- call.updateSubscriptionsPartial(
- kind,
- {
- [sessionId]: {
- dimension,
- },
- },
- type,
- );
- },
- [call, kind, sessionId],
- );
-
- // handle visibility subscription updates
- useEffect(() => {
- viewportVisibilityRef.current = viewportVisibilityState;
-
- if (!videoElement || !isPublishingTrack || isLocalParticipant) return;
-
- const isInvisibleVVS =
- viewportVisibilityState === VisibilityState.INVISIBLE;
-
- updateSubscription(
- isInvisibleVVS
- ? undefined
- : {
- height: videoElement.clientHeight,
- width: videoElement.clientWidth,
- },
- DebounceType.MEDIUM,
- );
- }, [
- updateSubscription,
- viewportVisibilityState,
- videoElement,
- isPublishingTrack,
- isLocalParticipant,
- ]);
-
- // handle resize subscription updates
- useEffect(() => {
- if (!videoElement || !isPublishingTrack || isLocalParticipant) return;
-
- const resizeObserver = new ResizeObserver(() => {
- const currentDimensions = `${videoElement.clientWidth},${videoElement.clientHeight}`;
+ const isInvisible =
+ trackType === 'none' ||
+ viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
- // skip initial trigger of the observer
- if (!lastDimensionRef.current) {
- return (lastDimensionRef.current = currentDimensions);
- }
+ const displayPlaceholder = !isPublishingTrack || isInvisible || !videoPlaying;
- if (
- lastDimensionRef.current === currentDimensions ||
- viewportVisibilityRef.current === VisibilityState.INVISIBLE
- )
- return;
-
- updateSubscription(
- {
- height: videoElement.clientHeight,
- width: videoElement.clientWidth,
- },
- DebounceType.SLOW,
- );
- lastDimensionRef.current = currentDimensions;
- });
- resizeObserver.observe(videoElement);
-
- return () => {
- resizeObserver.disconnect();
- };
- }, [
- updateSubscription,
- videoElement,
- viewportVisibilityState,
- isPublishingTrack,
- isLocalParticipant,
- ]);
-
- // handle generic subscription updates
useEffect(() => {
- if (!isPublishingTrack || !videoElement || isLocalParticipant) return;
+ if (!call || !videoElement || trackType === 'none') return;
- updateSubscription(
- {
- height: videoElement.clientHeight,
- width: videoElement.clientWidth,
- },
- DebounceType.FAST,
- );
+ const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
return () => {
- updateSubscription(undefined, DebounceType.FAST);
+ cleanup?.();
};
- }, [updateSubscription, videoElement, isPublishingTrack, isLocalParticipant]);
+ }, [call, trackType, sessionId, videoElement]);
- const [isWideMode, setIsWideMode] = useState(true);
useEffect(() => {
if (!stream || !videoElement) return;
- setVideoPlaying(!videoElement.paused);
+ const handlePlayPause = () => {
+ setVideoPlaying(!videoElement.paused);
- const calculateVideoRatio = () => {
- setVideoPlaying(true);
const [track] = stream.getVideoTracks();
if (!track) return;
+ // TODO: find out why track dimensions aren't coming in
const { width = 0, height = 0 } = track.getSettings();
- setIsWideMode(width > height);
+ setIsWideMode(width >= height);
};
- videoElement.addEventListener('play', calculateVideoRatio);
+
+ videoElement.addEventListener('play', handlePlayPause);
+ videoElement.addEventListener('pause', handlePlayPause);
return () => {
- videoElement.removeEventListener('play', calculateVideoRatio);
+ videoElement.removeEventListener('play', handlePlayPause);
+ videoElement.removeEventListener('pause', handlePlayPause);
};
}, [stream, videoElement]);
@@ -236,13 +119,13 @@ export const Video = ({
return (
<>
- ({
trackedElement,
- viewportTracker: propsViewportTracker,
+ dynascaleManager: propsDynascaleManager,
sessionId,
+ trackType,
}: {
trackedElement: T | null;
sessionId: string;
- viewportTracker?: ViewportTracker;
+ dynascaleManager?: DynascaleManager;
+ trackType: VideoTrackType | 'none';
}) => {
const call = useCall();
-
- const viewportTracker = propsViewportTracker ?? call?.viewportTracker;
-
+ const manager = propsDynascaleManager ?? call?.dynascaleManager;
useEffect(() => {
- if (!trackedElement || !viewportTracker || !call) return;
-
- const unobserve = viewportTracker.observe(trackedElement, (entry) => {
- call.state.updateParticipant(sessionId, (p) => ({
- ...p,
- viewportVisibilityState:
- // observer triggers when element is "moved" to be a fullscreen element
- // keep it VISIBLE if that happens to prevent fullscreen with placeholder
- entry.isIntersecting || document.fullscreenElement === trackedElement
- ? VisibilityState.VISIBLE
- : VisibilityState.INVISIBLE,
- }));
- });
-
+ if (!trackedElement || !manager || !call || trackType === 'none') return;
+ const unobserve = manager.trackElementVisibility(
+ trackedElement,
+ sessionId,
+ trackType,
+ );
return () => {
unobserve();
- // reset visibility state to UNKNOWN upon cleanup
- // so that the layouts that are not actively observed
- // can still function normally (runtime layout switching)
- call.state.updateParticipant(sessionId, (p) => ({
- ...p,
- viewportVisibilityState: VisibilityState.UNKNOWN,
- }));
};
- }, [trackedElement, viewportTracker, call, sessionId]);
+ }, [trackedElement, manager, call, sessionId, trackType]);
};
diff --git a/sample-apps/client/ts-quickstart/.env-example b/sample-apps/client/ts-quickstart/.env-example
index 5a9ed8e5da..3ef370dfa0 100644
--- a/sample-apps/client/ts-quickstart/.env-example
+++ b/sample-apps/client/ts-quickstart/.env-example
@@ -1,3 +1,3 @@
VITE_STREAM_API_KEY=
-VITE_STREAM_USER_ID=
VITE_STREAM_USER_TOKEN=
+VITE_STREAM_CALL_ID= # optional
diff --git a/sample-apps/client/ts-quickstart/package.json b/sample-apps/client/ts-quickstart/package.json
index 4d41b8f670..c891f09c33 100644
--- a/sample-apps/client/ts-quickstart/package.json
+++ b/sample-apps/client/ts-quickstart/package.json
@@ -4,16 +4,16 @@
"version": "0.0.0",
"type": "module",
"scripts": {
- "dev": "vite --host 0.0.0.0 --https",
+ "dev": "vite --host 0.0.0.0",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
- "@stream-io/video-client": "workspace:^"
+ "@stream-io/video-client": "workspace:^",
+ "js-base64": "^3.7.5"
},
"devDependencies": {
- "@vitejs/plugin-basic-ssl": "^1.0.1",
"typescript": "^5.0.2",
- "vite": "^4.4.5"
+ "vite": "^4.4.9"
}
}
diff --git a/sample-apps/client/ts-quickstart/src/main.ts b/sample-apps/client/ts-quickstart/src/main.ts
index 9dfc13ef3e..cada9ea27f 100644
--- a/sample-apps/client/ts-quickstart/src/main.ts
+++ b/sample-apps/client/ts-quickstart/src/main.ts
@@ -1,6 +1,7 @@
import './style.css';
import { StreamVideoClient, User } from '@stream-io/video-client';
-import { renderParticipant } from './participant';
+import { decode } from 'js-base64';
+import { cleanupParticipant, renderParticipant } from './participant';
import { renderControls } from './controls';
import {
renderAudioDeviceSelector,
@@ -8,21 +9,28 @@ import {
} from './device-selector';
import { isMobile } from './mobile';
-const apiKey = import.meta.env.VITE_STREAM_API_KEY;
-const token = import.meta.env.VITE_STREAM_USER_TOKEN;
-const user: User = { id: import.meta.env.VITE_STREAM_USER_ID };
+const searchParams = new URLSearchParams(window.location.search);
+const extractPayloadFromToken = (token: string) => {
+ const [, payload] = token.split('.');
-const client = new StreamVideoClient({
- apiKey,
- token,
- user,
-});
+ if (!payload) throw new Error('Malformed token, missing payload');
+
+ return (JSON.parse(decode(payload)) ?? {}) as Record;
+};
+
+const apiKey = import.meta.env.VITE_STREAM_API_KEY;
+const token = searchParams.get('ut') ?? import.meta.env.VITE_STREAM_USER_TOKEN;
+const user: User = {
+ id: extractPayloadFromToken(token)['user_id'] as string,
+};
const callId =
+ searchParams.get('call_id') ||
import.meta.env.VITE_STREAM_CALL_ID ||
(new Date().getTime() + Math.round(Math.random() * 100)).toString();
-const call = client.call('default', callId);
+const client = new StreamVideoClient({ apiKey, token, user });
+const call = client.call('default', callId);
call.join({ create: true }).then(async () => {
// render mic and camera controls
const controls = renderControls(call);
@@ -45,18 +53,23 @@ window.addEventListener('beforeunload', () => {
});
const parentContainer = document.getElementById('participants')!;
+call.setViewport(parentContainer);
call.state.participants$.subscribe((participants) => {
- const participantElements = participants.map((participant) =>
- renderParticipant(call, participant),
- );
-
- // Update UI
- parentContainer.innerHTML = '';
- participantElements
- .flatMap((e) => [e.audioEl, e.videoEl])
- .filter((el) => !!el)
+ // render / update existing participants
+ participants.forEach((participant) => {
+ renderParticipant(call, participant, parentContainer);
+ });
+
+ // Remove stale elements for stale participants
+ parentContainer
+ .querySelectorAll('video, audio')
.forEach((el) => {
- parentContainer.appendChild(el!);
+ const sessionId = el.dataset.sessionId!;
+ const participant = participants.find((p) => p.sessionId === sessionId);
+ if (!participant) {
+ cleanupParticipant(sessionId);
+ el.remove();
+ }
});
});
diff --git a/sample-apps/client/ts-quickstart/src/participant.ts b/sample-apps/client/ts-quickstart/src/participant.ts
index e11c6a2d9d..9e986ecc89 100644
--- a/sample-apps/client/ts-quickstart/src/participant.ts
+++ b/sample-apps/client/ts-quickstart/src/participant.ts
@@ -1,8 +1,4 @@
-import {
- StreamVideoParticipant,
- Call,
- SfuModels,
-} from '@stream-io/video-client';
+import { Call, StreamVideoParticipant } from '@stream-io/video-client';
// The quickstart uses fixed video dimensions for simplification
const videoDimension = {
@@ -10,72 +6,98 @@ const videoDimension = {
height: 250,
};
-const renderVideo = (call: Call, participant: StreamVideoParticipant) => {
- let videoEl = document.getElementById(
- `video-${participant.sessionId}`,
- ) as HTMLVideoElement | null;
+const videoBindingsCache = new Map();
+const videoTrackingCache = new Map();
+const audioBindingsCache = new Map();
+const renderVideo = (
+ call: Call,
+ participant: StreamVideoParticipant,
+ parentContainer: HTMLElement,
+) => {
+ const id = `video-${participant.sessionId}`;
+ let videoEl = document.getElementById(id) as HTMLVideoElement | null;
if (!videoEl) {
videoEl = document.createElement('video');
videoEl.style.setProperty('object-fit', 'contain');
videoEl.id = `video-${participant.sessionId}`;
videoEl.width = videoDimension.width;
videoEl.height = videoDimension.height;
- videoEl.playsInline = true;
- videoEl.autoplay = true;
- }
- if (videoEl.srcObject !== participant.videoStream) {
- videoEl.srcObject = participant.videoStream || null;
- }
- if (
- !participant.isLocalParticipant &&
- participant.publishedTracks.includes(SfuModels.TrackType.VIDEO) &&
- !participant.videoDimension
- ) {
- // We need to subscribe to video tracks
- // We provide the rendered video dimension to save bandwidth
- call.updateSubscriptionsPartial('video', {
- [participant.sessionId]: {
- dimension: {
- width: videoDimension.width,
- height: videoDimension.height,
- },
- },
- });
- }
+ videoEl.dataset.sessionId = participant.sessionId;
- return videoEl;
-};
+ parentContainer.appendChild(videoEl);
-const renderAudio = (participant: StreamVideoParticipant) => {
- // We don't render audio for local participant
- if (participant.isLocalParticipant) {
- return null;
+ const untrack = call.trackElementVisibility(
+ videoEl,
+ participant.sessionId,
+ 'videoTrack',
+ );
+
+ // keep reference to untrack function to call it later
+ videoTrackingCache.set(id, untrack);
+
+ // registers subscription updates and stream changes
+ const unbind = call.bindVideoElement(
+ videoEl,
+ participant.sessionId,
+ 'videoTrack',
+ );
+
+ // keep reference to unbind function to call it later
+ videoBindingsCache.set(id, unbind);
}
+};
- let audioEl = document.getElementById(
- `audio-${participant.sessionId}`,
- ) as HTMLAudioElement | null;
+const renderAudio = (
+ call: Call,
+ participant: StreamVideoParticipant,
+ parentContainer: HTMLElement,
+) => {
+ // We don't render audio for local participant
+ if (participant.isLocalParticipant) return;
+ const id = `audio-${participant.sessionId}`;
+ let audioEl = document.getElementById(id) as HTMLAudioElement | null;
if (!audioEl) {
audioEl = document.createElement('audio');
- audioEl.id = `audio-${participant.sessionId}`;
- audioEl.autoplay = true;
- }
+ audioEl.id = id;
+ audioEl.dataset.sessionId = participant.sessionId;
- if (audioEl.srcObject !== participant.audioStream) {
- audioEl.srcObject = participant.audioStream || null;
- }
+ parentContainer.appendChild(audioEl);
- return audioEl;
+ // registers subscription updates and stream changes for audio
+ const unbind = call.bindAudioElement(audioEl, participant.sessionId);
+
+ // keep reference to unbind function to call it later
+ audioBindingsCache.set(id, unbind);
+ }
};
export const renderParticipant = (
call: Call,
participant: StreamVideoParticipant,
+ parentContainer: HTMLElement,
) => {
- return {
- audioEl: renderAudio(participant),
- videoEl: renderVideo(call, participant),
- };
+ renderAudio(call, participant, parentContainer);
+ renderVideo(call, participant, parentContainer);
+};
+
+export const cleanupParticipant = (sessionId: string) => {
+ const unbindVideo = videoBindingsCache.get(`video-${sessionId}`);
+ if (unbindVideo) {
+ unbindVideo();
+ videoBindingsCache.delete(`video-${sessionId}`);
+ }
+
+ const untrackVideo = videoTrackingCache.get(`video-${sessionId}`);
+ if (untrackVideo) {
+ untrackVideo();
+ videoTrackingCache.delete(`video-${sessionId}`);
+ }
+
+ const unbindAudio = audioBindingsCache.get(`audio-${sessionId}`);
+ if (unbindAudio) {
+ unbindAudio();
+ audioBindingsCache.delete(`audio-${sessionId}`);
+ }
};
diff --git a/sample-apps/client/ts-quickstart/vite.config.ts b/sample-apps/client/ts-quickstart/vite.config.ts
deleted file mode 100644
index 49b440d77b..0000000000
--- a/sample-apps/client/ts-quickstart/vite.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import basicSsl from '@vitejs/plugin-basic-ssl';
-
-export default {
- plugins: [basicSsl()],
-};
diff --git a/sample-apps/react/audio-rooms/package.json b/sample-apps/react/audio-rooms/package.json
index 9b8d025f83..d1d9a465c4 100644
--- a/sample-apps/react/audio-rooms/package.json
+++ b/sample-apps/react/audio-rooms/package.json
@@ -20,7 +20,7 @@
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"typescript": "^4.9.5",
- "vercel": "^30.2.1",
- "vite": "^4.3.9"
+ "vercel": "^32.1.0",
+ "vite": "^4.4.9"
}
}
diff --git a/sample-apps/react/audio-rooms/src/components/Room/SpeakerElement.tsx b/sample-apps/react/audio-rooms/src/components/Room/SpeakerElement.tsx
index ecb7ce3895..8ab113a99d 100644
--- a/sample-apps/react/audio-rooms/src/components/Room/SpeakerElement.tsx
+++ b/sample-apps/react/audio-rooms/src/components/Room/SpeakerElement.tsx
@@ -32,7 +32,7 @@ export const SpeakerElement = ({
const displayName = speaker.name || speaker.userId;
return (
-
+
{
{call && participantInSpotlight && (
diff --git a/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx
index 102cd7bae4..373d78c7fe 100644
--- a/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx
+++ b/sample-apps/react/egress-composite/src/components/layouts/DominantSpeaker/DominantSpeakerScreenShare.tsx
@@ -30,7 +30,7 @@ export const DominantSpeakerScreenShare = () => {
{
useEffect(() => {
if (!scrollWrapper) return;
-
- const cleanup = call.viewportTracker.setViewport(scrollWrapper);
-
+ const cleanup = call.setViewport(scrollWrapper);
return () => cleanup();
- }, [scrollWrapper, call.viewportTracker]);
+ }, [scrollWrapper, call]);
const scrollUpClickHandler = () => {
scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
@@ -61,7 +59,7 @@ export const CallParticipantsScreenView = (props: { call: Call }) => {
= ({
useEffect(() => {
if (!scrollWrapper || !call) return;
-
- const cleanup = call.viewportTracker.setViewport(scrollWrapper);
-
+ const cleanup = call.setViewport(scrollWrapper);
return () => cleanup();
}, [scrollWrapper, call]);
diff --git a/sample-apps/react/react-video-demo/src/components/ScreenShareParticipants/ScreenShareParticipants.tsx b/sample-apps/react/react-video-demo/src/components/ScreenShareParticipants/ScreenShareParticipants.tsx
index eefcb008dc..c90aaf2d1e 100644
--- a/sample-apps/react/react-video-demo/src/components/ScreenShareParticipants/ScreenShareParticipants.tsx
+++ b/sample-apps/react/react-video-demo/src/components/ScreenShareParticipants/ScreenShareParticipants.tsx
@@ -63,7 +63,7 @@ export const ScreenShareParticipants: FC = ({ call }) => {
= ({ call }) => {
":
- version: 5.0.4
- resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin::version=5.0.4&hash=85af82"
- bin:
- tsc: bin/tsc
- tsserver: bin/tsserver
- checksum: bb309d320c59a26565fb3793dba550576ab861018ff3fd1b7fccabbe46ae4a35546bc45f342c0a0b6f265c801ccdf64ffd68f548f117ceb7f0eac4b805cd52a9
- languageName: node
- linkType: hard
-
-"typescript@patch:typescript@^5.0.2#~builtin":
+"typescript@patch:typescript@^4.6.4 || ^5.0.0#~builtin, typescript@patch:typescript@^5.0.2#~builtin":
version: 5.1.6
resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin::version=5.1.6&hash=85af82"
bin:
@@ -28421,10 +26649,10 @@ __metadata:
languageName: node
linkType: hard
-"ufo@npm:^1.1.1":
- version: 1.1.1
- resolution: "ufo@npm:1.1.1"
- checksum: 6bd210ed93d8c0dedd76c456b1d1dfb0e3b08c2216ee6080e61f0f545de0bac24b3d3a5530cd6a403810855f8d8fc3922583965296142e04cfc287442635e6c7
+"ufo@npm:^1.1.2":
+ version: 1.2.0
+ resolution: "ufo@npm:1.2.0"
+ checksum: eaac059b5fd64a6f80557093a49bb6bfd5d97aca433e641d5022db9cbd4be3e6a4011d2ffe1254cdb2fc8ab5cbe9942b0af834ee7ac7c63240ab542f5981f68e
languageName: node
linkType: hard
@@ -28470,6 +26698,15 @@ __metadata:
languageName: node
linkType: hard
+"undici@npm:5.23.0":
+ version: 5.23.0
+ resolution: "undici@npm:5.23.0"
+ dependencies:
+ busboy: ^1.6.0
+ checksum: 906ca4fb1d47163d2cee2ecbbc664a1d92508a2cdf1558146621109f525c983a83597910b36e6ba468240e95259be5939cea6babc99fc0c36360b16630f66784
+ languageName: node
+ linkType: hard
+
"unfetch@npm:^4.2.0":
version: 4.2.0
resolution: "unfetch@npm:4.2.0"
@@ -28678,15 +26915,6 @@ __metadata:
languageName: node
linkType: hard
-"unist-util-position-from-estree@npm:^1.0.0, unist-util-position-from-estree@npm:^1.1.0":
- version: 1.1.2
- resolution: "unist-util-position-from-estree@npm:1.1.2"
- dependencies:
- "@types/unist": ^2.0.0
- checksum: e3f4060e2a9e894c6ed63489c5a7cb58ff282e5dae9497cbc2073033ca74d6e412af4d4d342c97aea08d997c908b8bce2fe43a2062aafc2bb3f266533016588b
- languageName: node
- linkType: hard
-
"unist-util-position@npm:^3.0.0":
version: 3.1.0
resolution: "unist-util-position@npm:3.1.0"
@@ -28712,16 +26940,6 @@ __metadata:
languageName: node
linkType: hard
-"unist-util-remove-position@npm:^4.0.0":
- version: 4.0.2
- resolution: "unist-util-remove-position@npm:4.0.2"
- dependencies:
- "@types/unist": ^2.0.0
- unist-util-visit: ^4.0.0
- checksum: 989831da913d09a82a99ed9b47b78471b6409bde95942cde47e09da54b7736516f17e3c7e026af468684c1efcec5fb52df363381b2f9dc7fd96ce791c5a2fa4a
- languageName: node
- linkType: hard
-
"unist-util-remove@npm:^2.0.0":
version: 2.1.0
resolution: "unist-util-remove@npm:2.1.0"
@@ -29094,7 +27312,7 @@ __metadata:
languageName: node
linkType: hard
-"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.0.1":
+"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.0.1, v8-to-istanbul@npm:^9.1.0":
version: 9.1.0
resolution: "v8-to-istanbul@npm:9.1.0"
dependencies:
@@ -29122,24 +27340,24 @@ __metadata:
languageName: node
linkType: hard
-"vercel@npm:^30.2.1":
- version: 30.2.1
- resolution: "vercel@npm:30.2.1"
+"vercel@npm:^32.1.0":
+ version: 32.1.0
+ resolution: "vercel@npm:32.1.0"
dependencies:
- "@vercel/build-utils": 6.7.5
- "@vercel/go": 2.5.1
- "@vercel/hydrogen": 0.0.64
- "@vercel/next": 3.8.6
- "@vercel/node": 2.15.1
- "@vercel/python": 3.1.60
- "@vercel/redwood": 1.1.15
- "@vercel/remix-builder": 1.8.13
- "@vercel/ruby": 1.3.76
- "@vercel/static-build": 1.3.36
+ "@vercel/build-utils": 7.1.0
+ "@vercel/go": 3.0.0
+ "@vercel/hydrogen": 1.0.0
+ "@vercel/next": 4.0.1
+ "@vercel/node": 3.0.3
+ "@vercel/python": 4.0.0
+ "@vercel/redwood": 2.0.0
+ "@vercel/remix-builder": 2.0.2
+ "@vercel/ruby": 2.0.0
+ "@vercel/static-build": 2.0.3
bin:
vc: dist/index.js
vercel: dist/index.js
- checksum: 3aca7a133a05361ef99ebe61659b1fe01643a8ce5bc0fb4b1d0e9575e896c615446fb5ae92bbcb993be972561bf7f1a595f264e222cb82a327e985f10c379266
+ checksum: d7e5285284467f77e1c7498277c12ef5a24a367ddfe1a47ab6f5d8f2e3774181c2ffe48ca70dff2dff92ddfb218e4c87150f02b627101d549329b3442ec39718
languageName: node
linkType: hard
@@ -29150,16 +27368,6 @@ __metadata:
languageName: node
linkType: hard
-"vfile-location@npm:^4.0.0":
- version: 4.1.0
- resolution: "vfile-location@npm:4.1.0"
- dependencies:
- "@types/unist": ^2.0.0
- vfile: ^5.0.0
- checksum: c894e8e5224170d1f85288f4a1d1ebcee0780823ea2b49d881648ab360ebf01b37ecb09b1c4439a75f9a51f31a9f9742cd045e987763e367c352a1ef7c50d446
- languageName: node
- linkType: hard
-
"vfile-message@npm:^2.0.0":
version: 2.0.4
resolution: "vfile-message@npm:2.0.4"
@@ -29204,37 +27412,19 @@ __metadata:
languageName: node
linkType: hard
-"vite-node@npm:0.30.1":
- version: 0.30.1
- resolution: "vite-node@npm:0.30.1"
- dependencies:
- cac: ^6.7.14
- debug: ^4.3.4
- mlly: ^1.2.0
- pathe: ^1.1.0
- picocolors: ^1.0.0
- vite: ^3.0.0 || ^4.0.0
- bin:
- vite-node: vite-node.mjs
- checksum: 2a17cca94aaf9ea689aeff0b5e900aab9e9385e97189446a7bc9c067f094556a5fcdff4a04367811694c3dcd2001bef7f5133ac66cdf4307d90742c30aff5fea
- languageName: node
- linkType: hard
-
-"vite-node@npm:^0.28.5":
- version: 0.28.5
- resolution: "vite-node@npm:0.28.5"
+"vite-node@npm:0.34.3":
+ version: 0.34.3
+ resolution: "vite-node@npm:0.34.3"
dependencies:
cac: ^6.7.14
debug: ^4.3.4
- mlly: ^1.1.0
- pathe: ^1.1.0
+ mlly: ^1.4.0
+ pathe: ^1.1.1
picocolors: ^1.0.0
- source-map: ^0.6.1
- source-map-support: ^0.5.21
vite: ^3.0.0 || ^4.0.0
bin:
vite-node: vite-node.mjs
- checksum: b3813b784f551613e561bf85e64ceb8e869d760d34f135dc3351b093618c6fc3c64f23839ac530ddc49724beb83c3f70ee6392e62676c78141ed04c7ab1e0aa0
+ checksum: 366c4f3fb7c038e2180abc6b18cfbac3b8684cd878eaf7ebf1ffb07d95d2ea325713fc575a7949a13bb00cfe264acbc28c02e2836b8647e1f443fe631c17805a
languageName: node
linkType: hard
@@ -29294,44 +27484,7 @@ __metadata:
languageName: node
linkType: hard
-"vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.1.4, vite@npm:^4.3.9":
- version: 4.3.9
- resolution: "vite@npm:4.3.9"
- dependencies:
- esbuild: ^0.17.5
- fsevents: ~2.3.2
- postcss: ^8.4.23
- rollup: ^3.21.0
- peerDependencies:
- "@types/node": ">= 14"
- less: "*"
- sass: "*"
- stylus: "*"
- sugarss: "*"
- terser: ^5.4.0
- dependenciesMeta:
- fsevents:
- optional: true
- peerDependenciesMeta:
- "@types/node":
- optional: true
- less:
- optional: true
- sass:
- optional: true
- stylus:
- optional: true
- sugarss:
- optional: true
- terser:
- optional: true
- bin:
- vite: bin/vite.js
- checksum: 8c45a516278d1e0425fac00c0877336790f71484a851a318346a70e0d2aef9f3b9651deb2f9f002c791ceb920eda7d6a3cda753bdefd657321c99f448b02dd25
- languageName: node
- linkType: hard
-
-"vite@npm:^4.4.5":
+"vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.4.9":
version: 4.4.9
resolution: "vite@npm:4.4.9"
dependencies:
@@ -29371,47 +27524,45 @@ __metadata:
languageName: node
linkType: hard
-"vitest-mock-extended@npm:^1.1.3":
- version: 1.1.3
- resolution: "vitest-mock-extended@npm:1.1.3"
+"vitest-mock-extended@npm:^1.2.0":
+ version: 1.2.0
+ resolution: "vitest-mock-extended@npm:1.2.0"
dependencies:
- ts-essentials: ^9.3.1
+ ts-essentials: ^9.3.2
peerDependencies:
typescript: 3.x || 4.x || 5.x
- vitest: ">=0.29.2"
- checksum: d457dc1dcbf6b0570e9845dff7423c2b88504ce6bb189e71c0984b09b4d6c5894d883706a7639262c92e12b0b4b0d5db747e1d0b93e253b4d6c189cba15c70f9
+ vitest: ">=0.31.1"
+ checksum: 8b8c7a4085a7988f0ce1b764fe6d94428eb9c1454647401f5da7a9eda3230660dc4ec0ab63ccab735c9b03e536b278a9c2697f5bbce54f0dc1cb2ff125534de8
languageName: node
linkType: hard
-"vitest@npm:^0.30.1":
- version: 0.30.1
- resolution: "vitest@npm:0.30.1"
+"vitest@npm:^0.34.3":
+ version: 0.34.3
+ resolution: "vitest@npm:0.34.3"
dependencies:
- "@types/chai": ^4.3.4
+ "@types/chai": ^4.3.5
"@types/chai-subset": ^1.3.3
"@types/node": "*"
- "@vitest/expect": 0.30.1
- "@vitest/runner": 0.30.1
- "@vitest/snapshot": 0.30.1
- "@vitest/spy": 0.30.1
- "@vitest/utils": 0.30.1
- acorn: ^8.8.2
+ "@vitest/expect": 0.34.3
+ "@vitest/runner": 0.34.3
+ "@vitest/snapshot": 0.34.3
+ "@vitest/spy": 0.34.3
+ "@vitest/utils": 0.34.3
+ acorn: ^8.9.0
acorn-walk: ^8.2.0
cac: ^6.7.14
chai: ^4.3.7
- concordance: ^5.0.4
debug: ^4.3.4
local-pkg: ^0.4.3
- magic-string: ^0.30.0
- pathe: ^1.1.0
+ magic-string: ^0.30.1
+ pathe: ^1.1.1
picocolors: ^1.0.0
- source-map: ^0.6.1
- std-env: ^3.3.2
+ std-env: ^3.3.3
strip-literal: ^1.0.1
- tinybench: ^2.4.0
- tinypool: ^0.4.0
+ tinybench: ^2.5.0
+ tinypool: ^0.7.0
vite: ^3.0.0 || ^4.0.0
- vite-node: 0.30.1
+ vite-node: 0.34.3
why-is-node-running: ^2.2.2
peerDependencies:
"@edge-runtime/vm": "*"
@@ -29441,7 +27592,7 @@ __metadata:
optional: true
bin:
vitest: vitest.mjs
- checksum: 68e33226dde914600270df9834bdc1f45fd225250051c046c9bc53ca51b8e0bf76dee29a5cf1a51a4c1524f00c414f81764bb463734bdcc9c3f483f2140ec516
+ checksum: 4535d080feede94db5015eb60c6ed5f7b0d8cd67f12072de5ae1faded133cc640043c0c2646ef51ab9b61c2f885589da57458a65e82cf91a25cf954470018a40
languageName: node
linkType: hard
@@ -29459,18 +27610,6 @@ __metadata:
languageName: node
linkType: hard
-"vm2@npm:^3.9.8":
- version: 3.9.14
- resolution: "vm2@npm:3.9.14"
- dependencies:
- acorn: ^8.7.0
- acorn-walk: ^8.2.0
- bin:
- vm2: bin/vm2
- checksum: 1ed7481e07ce8e03055101b382bfbf0d725a5c9b9bbe8bf75f71501cb43a6bd22f6a0a151975ff7cea8cad136d47e66d64f0a3248913f6d3ca3c405db12bacc0
- languageName: node
- linkType: hard
-
"vt-pbf@npm:^3.1.3":
version: 3.1.3
resolution: "vt-pbf@npm:3.1.3"
@@ -29580,6 +27719,13 @@ __metadata:
languageName: node
linkType: hard
+"webidl-conversions@npm:^7.0.0":
+ version: 7.0.0
+ resolution: "webidl-conversions@npm:7.0.0"
+ checksum: f05588567a2a76428515333eff87200fae6c83c3948a7482ebb109562971e77ef6dc49749afa58abb993391227c5697b3ecca52018793e0cb4620a48f10bd21b
+ languageName: node
+ linkType: hard
+
"webpack-dev-middleware@npm:^3.7.3":
version: 3.7.3
resolution: "webpack-dev-middleware@npm:3.7.3"
@@ -29735,10 +27881,12 @@ __metadata:
languageName: node
linkType: hard
-"well-known-symbols@npm:^2.0.0":
+"whatwg-encoding@npm:^2.0.0":
version: 2.0.0
- resolution: "well-known-symbols@npm:2.0.0"
- checksum: 4f54bbc3012371cb4d228f436891b8e7536d34ac61a57541890257e96788608e096231e0121ac24d08ef2f908b3eb2dc0adba35023eaeb2a7df655da91415402
+ resolution: "whatwg-encoding@npm:2.0.0"
+ dependencies:
+ iconv-lite: 0.6.3
+ checksum: 7087810c410aa9b689cbd6af8773341a53cdc1f3aae2a882c163bd5522ec8ca4cdfc269aef417a5792f411807d5d77d50df4c24e3abb00bb60192858a40cc675
languageName: node
linkType: hard
@@ -29749,6 +27897,13 @@ __metadata:
languageName: node
linkType: hard
+"whatwg-mimetype@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "whatwg-mimetype@npm:3.0.0"
+ checksum: ce08bbb36b6aaf64f3a84da89707e3e6a31e5ab1c1a2379fd68df79ba712a4ab090904f0b50e6693b0dafc8e6343a6157e40bf18fdffd26e513cf95ee2a59824
+ languageName: node
+ linkType: hard
+
"whatwg-url-without-unicode@npm:8.0.0-3":
version: 8.0.0-3
resolution: "whatwg-url-without-unicode@npm:8.0.0-3"
@@ -29962,21 +28117,6 @@ __metadata:
languageName: node
linkType: hard
-"ws@npm:8.13.0, ws@npm:^8.13.0, ws@npm:^8.2.3":
- version: 8.13.0
- resolution: "ws@npm:8.13.0"
- peerDependencies:
- bufferutil: ^4.0.1
- utf-8-validate: ">=5.0.2"
- peerDependenciesMeta:
- bufferutil:
- optional: true
- utf-8-validate:
- optional: true
- checksum: 53e991bbf928faf5dc6efac9b8eb9ab6497c69feeb94f963d648b7a3530a720b19ec2e0ec037344257e05a4f35bd9ad04d9de6f289615ffb133282031b18c61c
- languageName: node
- linkType: hard
-
"ws@npm:^6.2.2":
version: 6.2.2
resolution: "ws@npm:6.2.2"
@@ -29986,7 +28126,7 @@ __metadata:
languageName: node
linkType: hard
-"ws@npm:^7, ws@npm:^7.4.4, ws@npm:^7.4.5, ws@npm:^7.5.1":
+"ws@npm:^7, ws@npm:^7.4.4, ws@npm:^7.5.1":
version: 7.5.9
resolution: "ws@npm:7.5.9"
peerDependencies:
@@ -30001,6 +28141,21 @@ __metadata:
languageName: node
linkType: hard
+"ws@npm:^8.13.0, ws@npm:^8.2.3":
+ version: 8.13.0
+ resolution: "ws@npm:8.13.0"
+ peerDependencies:
+ bufferutil: ^4.0.1
+ utf-8-validate: ">=5.0.2"
+ peerDependenciesMeta:
+ bufferutil:
+ optional: true
+ utf-8-validate:
+ optional: true
+ checksum: 53e991bbf928faf5dc6efac9b8eb9ab6497c69feeb94f963d648b7a3530a720b19ec2e0ec037344257e05a4f35bd9ad04d9de6f289615ffb133282031b18c61c
+ languageName: node
+ linkType: hard
+
"x-default-browser@npm:^0.4.0":
version: 0.4.0
resolution: "x-default-browser@npm:0.4.0"
@@ -30015,46 +28170,6 @@ __metadata:
languageName: node
linkType: hard
-"xdm@npm:^2.0.0":
- version: 2.1.0
- resolution: "xdm@npm:2.1.0"
- dependencies:
- "@rollup/pluginutils": ^4.0.0
- "@types/estree-jsx": ^0.0.1
- astring: ^1.6.0
- deasync: ^0.1.0
- estree-util-build-jsx: ^2.0.0
- estree-util-is-identifier-name: ^2.0.0
- estree-walker: ^3.0.0
- got: ^11.0.0
- hast-util-to-estree: ^2.0.0
- loader-utils: ^2.0.0
- markdown-extensions: ^1.0.0
- mdast-util-mdx: ^1.0.0
- micromark-extension-mdxjs: ^1.0.0
- periscopic: ^3.0.0
- remark-parse: ^10.0.0
- remark-rehype: ^9.0.0
- source-map: ^0.7.0
- unified: ^10.0.0
- unist-util-position-from-estree: ^1.0.0
- unist-util-stringify-position: ^3.0.0
- unist-util-visit: ^4.0.0
- vfile: ^5.0.0
- dependenciesMeta:
- deasync:
- optional: true
- checksum: 5a3f2434a5390aaebc66aa7d1a90d582de29c2256c94e542df7476cd5ffac6c160ebcb4f75a1a0593dfd8c6d0e650e1ad18f023a57262e0b3abc89c3e1f5c86e
- languageName: node
- linkType: hard
-
-"xregexp@npm:2.0.0":
- version: 2.0.0
- resolution: "xregexp@npm:2.0.0"
- checksum: de62d1f01c9f1a67c80cafe48a3dc081b324249a0e88e65dc9acae9cce6d8e63c9d91c0f97e2ad2d8c5351c856c139c04dc55ebd941e59b7d1d5c1169e164cff
- languageName: node
- linkType: hard
-
"xtend@npm:^4.0.0, xtend@npm:^4.0.1, xtend@npm:~4.0.1":
version: 4.0.2
resolution: "xtend@npm:4.0.2"
@@ -30097,13 +28212,6 @@ __metadata:
languageName: node
linkType: hard
-"yaml@npm:^2.1.1":
- version: 2.2.1
- resolution: "yaml@npm:2.2.1"
- checksum: 84f68cbe462d5da4e7ded4a8bded949ffa912bc264472e5a684c3d45b22d8f73a3019963a32164023bdf3d83cfb6f5b58ff7b2b10ef5b717c630f40bd6369a23
- languageName: node
- linkType: hard
-
"yargs-parser@npm:21.1.1, yargs-parser@npm:^21.0.1, yargs-parser@npm:^21.1.1":
version: 21.1.1
resolution: "yargs-parser@npm:21.1.1"