@stream-io/video-react-sdk 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.10...@stream-io/video-react-sdk-0.3.11) (2023-08-30)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.1.0`
+* `@stream-io/video-react-bindings` updated to version `0.2.11`
+
+### Features
+
+* **Call:** Dynascale support for Plain-JS SDK ([#914](https://github.com/GetStream/stream-video-js/issues/914)) ([d295fd3](https://github.com/GetStream/stream-video-js/commit/d295fd341bbe325310fc6479f24ef647b013429b))
+
+### [0.3.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.9...@stream-io/video-react-sdk-0.3.10) (2023-08-29)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.1.0`
+* `@stream-io/video-react-bindings` updated to version `0.2.10`
 ### [0.3.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.8...@stream-io/video-react-sdk-0.3.9) (2023-08-29)
 
 ### Dependency Updates

package/dist/src/core/components/Audio/Audio.d.ts

@@ -1,6 +1,6 @@
-import { AudioHTMLAttributes, DetailedHTMLProps } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { StreamVideoParticipant } from '@stream-io/video-client';
-export type AudioProps = DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement> & Pick<StreamVideoParticipant, 'audioStream'> & {
-    sinkId?: string;
+export type AudioProps = ComponentPropsWithoutRef<'audio'> & {
+    participant: StreamVideoParticipant;
 };
-export declare const Audio: ({ audioStream, sinkId, ...rest }: AudioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Audio: ({ participant, ...rest }: AudioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/core/components/Audio/Audio.js

@@ -10,28 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, } from 'react';
-// TODO: rename to BaseAudio
+import { useEffect, useState } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
 export const Audio = (_a) => {
-    var { audioStream, sinkId } = _a, rest = __rest(_a, ["audioStream", "sinkId"]);
-    const audioRef = useRef(null);
+    var { participant } = _a, rest = __rest(_a, ["participant"]);
+    const call = useCall();
+    const [audioElement, setAudioElement] = useState(null);
+    const { userId, sessionId } = participant;
     useEffect(() => {
-        const $el = audioRef.current;
-        if (!($el && audioStream))
+        if (!call || !audioElement)
             return;
-        $el.srcObject = audioStream;
+        const cleanup = call.bindAudioElement(audioElement, sessionId);
         return () => {
-            $el.srcObject = null;
+            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
         };
-    }, [audioStream]);
-    useEffect(() => {
-        const $el = audioRef.current;
-        if (!$el || !sinkId)
-            return;
-        if ($el.setSinkId) {
-            $el.setSinkId(sinkId);
-        }
-    }, [sinkId]);
-    return _jsx("audio", Object.assign({ autoPlay: true, ref: audioRef }, rest));
+    }, [call, sessionId, audioElement]);
+    return (_jsx("audio", Object.assign({ autoPlay: true }, rest, { ref: setAudioElement, "data-user-id": userId, "data-session-id": sessionId })));
 };
 //# sourceMappingURL=Audio.js.map

package/dist/src/core/components/Audio/Audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Audio.js","sourceRoot":"","sources":["../../../../../src/core/components/Audio/Audio.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAGL,SAAS,EACT,MAAM,GACP,MAAM,OAAO,CAAC;AAWf,4BAA4B;AAC5B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAA4C,EAAE,EAAE;QAAhD,EAAE,WAAW,EAAE,MAAM,OAAuB,EAAlB,IAAI,cAA9B,yBAAgC,CAAF;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC;YAAE,OAAO;QAElC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;QAC5B,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM;YAAE,OAAO;QAE5B,IAAK,GAAW,CAAC,SAAS,EAAE;YACzB,GAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,8BAAO,QAAQ,QAAC,GAAG,EAAE,QAAQ,IAAM,IAAI,EAAI,CAAC;AACrD,CAAC,CAAC"}
+{"version":3,"file":"Audio.js","sourceRoot":"","sources":["../../../../../src/core/components/Audio/Audio.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAA4B,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAM1D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAoC,EAAE,EAAE;QAAxC,EAAE,WAAW,OAAuB,EAAlB,IAAI,cAAtB,eAAwB,CAAF;IAC1C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL,CAAC;IACF,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAEnC,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/D,OAAO,GAAG,EAAE;YACV,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,8BACE,QAAQ,UACJ,IAAI,IACR,GAAG,EAAE,eAAe,kBACN,MAAM,qBACH,SAAS,IAC1B,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/core/components/CallLayout/PaginatedGridLayout.js

@@ -17,11 +17,10 @@ const PaginatedGridLayoutGroup = ({ group, VideoPlaceholder, ParticipantViewUI,
 export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalParticipant = false, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }) => {
     const [page, setPage] = useState(0);
     const call = useCall();
-    const { useParticipants, useRemoteParticipants, useLocalParticipant } = useCallStateHooks();
+    const { useParticipants, useRemoteParticipants } = useCallStateHooks();
     const participants = useParticipants();
     // used to render audio elements
     const remoteParticipants = useRemoteParticipants();
-    const localParticipant = useLocalParticipant();
     // only used to render video elements
     const participantGroups = useMemo(() => chunk(excludeLocalParticipant ? remoteParticipants : participants, groupSize), [excludeLocalParticipant, remoteParticipants, participants, groupSize]);
     const pageCount = participantGroups.length;
@@ -34,6 +33,6 @@ export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalPartic
     const selectedGroup = participantGroups[page];
     if (!call)
         return null;
-    return (_jsxs(_Fragment, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { muted: false, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, audioStream: participant.audioStream }, participant.sessionId))), _jsx("div", Object.assign({ className: "str-video__paginated-grid-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: "str-video__paginated-grid-layout" }, { children: [pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (_jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })) }))] }));
+    return (_jsxs(_Fragment, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { participant: participant }, participant.sessionId))), _jsx("div", Object.assign({ className: "str-video__paginated-grid-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: "str-video__paginated-grid-layout" }, { children: [pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (_jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })) }))] }));
 };
 //# sourceMappingURL=PaginatedGridLayout.js.map

package/dist/src/core/components/CallLayout/PaginatedGridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":"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"}

package/dist/src/core/components/CallLayout/SpeakerLayout.js

@@ -17,7 +17,7 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
     useEffect(() => {
         if (!scrollWrapper || !call)
             return;
-        const cleanup = call.viewportTracker.setViewport(scrollWrapper);
+        const cleanup = call.setViewport(scrollWrapper);
         return () => cleanup();
     }, [scrollWrapper, call]);
     useEffect(() => {
@@ -40,7 +40,7 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
         return null;
     const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
     return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', participantsBarPosition &&
-                `str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: isSpeakerScreenSharing, videoMode: isSpeakerScreenSharing ? 'screen' : 'video', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setScrollWrapper }, { children: _jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar" }, { children: [isSpeakerScreenSharing && (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participantInSpotlight.sessionId)), otherParticipants.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
+                `str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: isSpeakerScreenSharing, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setScrollWrapper }, { children: _jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar" }, { children: [isSpeakerScreenSharing && (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participantInSpotlight.sessionId)), otherParticipants.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
                             participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
                             participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
 };

package/dist/src/core/components/CallLayout/SpeakerLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
+{"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.js

@@ -20,13 +20,14 @@ export const DefaultScreenShareOverlay = () => {
     return (_jsxs("div", Object.assign({ className: "str-video__screen-share-overlay" }, { children: [_jsx(Icon, { icon: "screen-share-off" }), _jsx("span", Object.assign({ className: "str-video__screen-share-overlay__title" }, { children: "You are presenting your screen" })), _jsxs("button", Object.assign({ onClick: stopScreenShare, className: "str-video__screen-share-overlay__button" }, { children: [_jsx(Icon, { icon: "close" }), " Stop Screen Sharing"] }))] })));
 };
 export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
-    const { participant, participantViewElement, videoMode, videoElement } = useParticipantViewContext();
+    const { participant, participantViewElement, trackType, videoElement } = useParticipantViewContext();
     const { publishedTracks } = participant;
     const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
     if (participant.isLocalParticipant &&
         hasScreenShare &&
-        videoMode === 'screen')
+        trackType === 'screenShareTrack') {
         return (_jsxs(_Fragment, { children: [_jsx(DefaultScreenShareOverlay, {}), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+    }
     return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participantViewElement: participantViewElement, participant: participant, videoElement: videoElement }) }))), _jsx(Reaction, { participant: participant }), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
 };
 export const ParticipantDetails = ({ indicatorsVisible = true, }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
+{"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

@@ -1,7 +1,7 @@
 import { ComponentType, ReactElement } from 'react';
-import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
+import { StreamVideoLocalParticipant, StreamVideoParticipant, VideoTrackType } from '@stream-io/video-client';
 import { VideoProps } from '../Video';
-export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'videoMode'>> & {
+export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'trackType'>> & {
     participantViewElement: HTMLDivElement | null;
     videoElement: HTMLVideoElement | null;
     videoPlaceholderElement: HTMLDivElement | null;
@@ -21,7 +21,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.
      */
@@ -52,7 +52,7 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
     /**
      * 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" | "none" | "screen" | undefined;
+    trackType?: "none" | VideoTrackType | undefined;
     /**
      * 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.
      */

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo, useState, } from 'react';
 import clsx from 'clsx';
 import { SfuModels, } from '@stream-io/video-client';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { Audio } from '../Audio';
 import { Video } from '../Video';
 import { useTrackElementVisibility } from '../../hooks';
@@ -10,10 +9,8 @@ import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
 import { applyElementToRef, isComponentType } from '../../../utilities';
 const ParticipantViewContext = createContext(undefined);
 export const useParticipantViewContext = () => useContext(ParticipantViewContext);
-export const ParticipantView = forwardRef(({ participant, videoMode = 'video', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
-    const { audioStream, isLocalParticipant, isSpeaking, isDominantSpeaker, publishedTracks, sessionId, } = participant;
-    const { useLocalParticipant } = useCallStateHooks();
-    const localParticipant = useLocalParticipant();
+export const ParticipantView = forwardRef(({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, publishedTracks, sessionId, } = participant;
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
     const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
     const [trackedElement, setTrackedElement] = useState(null);
@@ -23,19 +20,20 @@ export const ParticipantView = forwardRef(({ participant, videoMode = 'video', m
     useTrackElementVisibility({
         sessionId,
         trackedElement,
+        trackType,
     });
     const participantViewContextValue = useMemo(() => ({
         participant,
         participantViewElement: trackedElement,
         videoElement: contextVideoElement,
         videoPlaceholderElement: contextVideoPlaceholderElement,
-        videoMode,
+        trackType,
     }), [
         contextVideoElement,
         contextVideoPlaceholderElement,
         participant,
         trackedElement,
-        videoMode,
+        trackType,
     ]);
     const videoRefs = useMemo(() => ({
         setVideoElement: (element) => {
@@ -50,6 +48,6 @@ export const ParticipantView = forwardRef(({ participant, videoMode = 'video', m
     return (_jsx("div", Object.assign({ ref: (element) => {
             applyElementToRef(ref, element);
             setTrackedElement(element);
-        }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className) }, { children: _jsxs(ParticipantViewContext.Provider, Object.assign({ value: participantViewContextValue }, { children: [!isLocalParticipant && !muteAudio && (_jsx(Audio, { sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, audioStream: audioStream })), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoMode, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
+        }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', 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: [!isLocalParticipant && !muteAudio && (_jsx(Audio, { participant: participant })), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
 });
 //# sourceMappingURL=ParticipantView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":"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"}

package/dist/src/core/components/Video/Video.d.ts

@@ -1,8 +1,14 @@
 import { ComponentPropsWithoutRef, ComponentType } from 'react';
-import { StreamVideoParticipant } from '@stream-io/video-client';
+import { StreamVideoParticipant, VideoTrackType } from '@stream-io/video-client';
 import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
-    kind: 'video' | 'screen' | 'none';
+    /**
+     * The track type to display.
+     */
+    trackType: VideoTrackType | 'none';
+    /**
+     * The participant represented by this video element.
+     */
     participant: StreamVideoParticipant;
     /**
      * Override the default UI that's visible when a participant turned off their video.
@@ -13,4 +19,4 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
         setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
     };
 };
-export declare const Video: ({ kind, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Video: ({ trackType, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -10,147 +10,64 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, } from 'react';
-import { DebounceType, SfuModels, VisibilityState, } from '@stream-io/video-client';
+import { useEffect, useState, } from 'react';
+import { SfuModels, VisibilityState, } from '@stream-io/video-client';
 import clsx from 'clsx';
 import { DefaultVideoPlaceholder, } from './DefaultVideoPlaceholder';
-import { BaseVideo } from './BaseVideo';
 import { useCall } from '@stream-io/video-react-bindings';
 export const Video = (_a) => {
-    var { kind, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs } = _a, rest = __rest(_a, ["kind", "participant", "className", "VideoPlaceholder", "refs"]);
+    var { trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs } = _a, rest = __rest(_a, ["trackType", "participant", "className", "VideoPlaceholder", "refs"]);
     const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLocalParticipant, userId, } = participant;
     const call = useCall();
     const [videoElement, setVideoElement] = useState(null);
-    // const [videoTrackMuted, setVideoTrackMuted] = useState(false);
     const [videoPlaying, setVideoPlaying] = useState(false);
-    const viewportVisibilityRef = useRef(viewportVisibilityState);
-    const stream = kind === 'none'
+    const [isWideMode, setIsWideMode] = useState(true);
+    const stream = 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'
+    const isPublishingTrack = trackType === 'none'
         ? false
-        : publishedTracks.includes(kind === 'video'
+        : publishedTracks.includes(trackType === 'videoTrack'
             ? SfuModels.TrackType.VIDEO
             : SfuModels.TrackType.SCREEN_SHARE);
-    const displayPlaceholder = !isPublishingTrack ||
-        (viewportVisibilityState === VisibilityState.INVISIBLE &&
-            !screenShareStream) ||
-        !videoPlaying;
-    const lastDimensionRef = useRef();
-    const updateSubscription = useCallback((dimension, type = 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}`;
-            // skip initial trigger of the observer
-            if (!lastDimensionRef.current) {
-                return (lastDimensionRef.current = currentDimensions);
-            }
-            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
+    const isInvisible = trackType === 'none' ||
+        (viewportVisibilityState === null || viewportVisibilityState === void 0 ? void 0 : viewportVisibilityState[trackType]) === VisibilityState.INVISIBLE;
+    const displayPlaceholder = !isPublishingTrack || isInvisible || !videoPlaying;
     useEffect(() => {
-        if (!isPublishingTrack || !videoElement || isLocalParticipant)
+        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 === null || cleanup === void 0 ? void 0 : cleanup();
         };
-    }, [updateSubscription, videoElement, isPublishingTrack, isLocalParticipant]);
-    const [isWideMode, setIsWideMode] = useState(true);
+    }, [call, trackType, sessionId, videoElement]);
     useEffect(() => {
         if (!stream || !videoElement)
             return;
-        setVideoPlaying(!videoElement.paused);
-        const calculateVideoRatio = () => {
-            setVideoPlaying(true);
+        const handlePlayPause = () => {
+            setVideoPlaying(!videoElement.paused);
             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]);
     if (!call)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(BaseVideo, Object.assign({}, rest, { stream: stream, className: clsx(className, 'str-video__video', {
+    return (_jsxs(_Fragment, { children: [_jsx("video", Object.assign({}, rest, { className: clsx(className, 'str-video__video', {
                     'str-video__video--tall': !isWideMode,
-                    'str-video__video--mirror': isLocalParticipant && kind === 'video',
-                    'str-video__video--screen-share': kind === 'screen',
+                    'str-video__video--mirror': isLocalParticipant && trackType === 'videoTrack',
+                    'str-video__video--screen-share': trackType === 'screenShareTrack',
                 }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
                     var _a;
                     setVideoElement(element);

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

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/Video.tsx"],"names":[],"mappings":"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"}
+{"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.d.ts

@@ -1,6 +1,7 @@
-import { ViewportTracker } from '@stream-io/video-client';
-export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, viewportTracker: propsViewportTracker, sessionId, }: {
+import { DynascaleManager, VideoTrackType } from '@stream-io/video-client';
+export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }: {
     trackedElement: T | null;
     sessionId: string;
-    viewportTracker?: ViewportTracker | undefined;
+    dynascaleManager?: DynascaleManager | undefined;
+    trackType: VideoTrackType | 'none';
 }) => void;

package/dist/src/core/hooks/useTrackElementVisibility.js

@@ -1,27 +1,15 @@
 import { useEffect } from 'react';
-import { VisibilityState } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
-export const useTrackElementVisibility = ({ trackedElement, viewportTracker: propsViewportTracker, sessionId, }) => {
+export const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
     const call = useCall();
-    const viewportTracker = propsViewportTracker !== null && propsViewportTracker !== void 0 ? propsViewportTracker : call === null || call === void 0 ? void 0 : call.viewportTracker;
+    const manager = propsDynascaleManager !== null && propsDynascaleManager !== void 0 ? propsDynascaleManager : call === null || call === void 0 ? void 0 : call.dynascaleManager;
     useEffect(() => {
-        if (!trackedElement || !viewportTracker || !call)
+        if (!trackedElement || !manager || !call || trackType === 'none')
             return;
-        const unobserve = viewportTracker.observe(trackedElement, (entry) => {
-            call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, 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 })));
-        });
+        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) => (Object.assign(Object.assign({}, p), { viewportVisibilityState: VisibilityState.UNKNOWN })));
         };
-    }, [trackedElement, viewportTracker, call, sessionId]);
+    }, [trackedElement, manager, call, sessionId, trackType]);
 };
 //# sourceMappingURL=useTrackElementVisibility.js.map

package/dist/src/core/hooks/useTrackElementVisibility.js.map

@@ -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;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"}
+{"version":3,"file":"useTrackElementVisibility.js","sourceRoot":"","sources":["../../../../src/core/hooks/useTrackElementVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,gBAAgB,EAAE,qBAAqB,EACvC,SAAS,EACT,SAAS,GAMV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,OAAO,GAAG,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC;IAChE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,IAAI,SAAS,KAAK,MAAM;YAAE,OAAO;QACzE,MAAM,SAAS,GAAG,OAAO,CAAC,sBAAsB,CAC9C,cAAc,EACd,SAAS,EACT,SAAS,CACV,CAAC;QACF,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,CAAC;QACd,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;AAC5D,CAAC,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.9";
+export declare const version = "0.3.11";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '0.3.9';
+export const version = '0.3.11';
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -33,8 +33,8 @@
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@stream-io/i18n": "^0.1.1",
-    "@stream-io/video-client": "^0.3.8",
-    "@stream-io/video-react-bindings": "^0.2.9",
+    "@stream-io/video-client": "^0.3.10",
+    "@stream-io/video-react-bindings": "^0.2.11",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "rxjs": "~7.8.1"

package/src/core/components/Audio/Audio.tsx

@@ -1,40 +1,35 @@
-import {
-  AudioHTMLAttributes,
-  DetailedHTMLProps,
-  useEffect,
-  useRef,
-} from 'react';
+import { ComponentPropsWithoutRef, useEffect, useState } from 'react';
 import { StreamVideoParticipant } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
 
-export type AudioProps = DetailedHTMLProps<
-  AudioHTMLAttributes<HTMLAudioElement>,
-  HTMLAudioElement
-> &
-  Pick<StreamVideoParticipant, 'audioStream'> & {
-    sinkId?: string;
-  };
+export type AudioProps = ComponentPropsWithoutRef<'audio'> & {
+  participant: StreamVideoParticipant;
+};
+
+export const Audio = ({ participant, ...rest }: AudioProps) => {
+  const call = useCall();
+  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+    null,
+  );
+  const { userId, sessionId } = participant;
 
-// TODO: rename to BaseAudio
-export const Audio = ({ audioStream, sinkId, ...rest }: AudioProps) => {
-  const audioRef = useRef<HTMLAudioElement>(null);
   useEffect(() => {
-    const $el = audioRef.current;
-    if (!($el && audioStream)) return;
+    if (!call || !audioElement) return;
+
+    const cleanup = call.bindAudioElement(audioElement, sessionId);
 
-    $el.srcObject = audioStream;
     return () => {
-      $el.srcObject = null;
+      cleanup?.();
     };
-  }, [audioStream]);
-
-  useEffect(() => {
-    const $el = audioRef.current;
-    if (!$el || !sinkId) return;
-
-    if (($el as any).setSinkId) {
-      ($el as any).setSinkId(sinkId);
-    }
-  }, [sinkId]);
+  }, [call, sessionId, audioElement]);
 
-  return <audio autoPlay ref={audioRef} {...rest} />;
+  return (
+    <audio
+      autoPlay
+      {...rest}
+      ref={setAudioElement}
+      data-user-id={userId}
+      data-session-id={sessionId}
+    />
+  );
 };

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -80,12 +80,10 @@ export const PaginatedGridLayout = ({
   const [page, setPage] = useState(0);
 
   const call = useCall();
-  const { useParticipants, useRemoteParticipants, useLocalParticipant } =
-    useCallStateHooks();
+  const { useParticipants, useRemoteParticipants } = useCallStateHooks();
   const participants = useParticipants();
   // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
-  const localParticipant = useLocalParticipant();
 
   // only used to render video elements
   const participantGroups = useMemo(
@@ -113,12 +111,7 @@ export const PaginatedGridLayout = ({
   return (
     <>
       {remoteParticipants.map((participant) => (
-        <Audio
-          muted={false}
-          sinkId={localParticipant?.audioOutputDeviceId}
-          key={participant.sessionId}
-          audioStream={participant.audioStream}
-        />
+        <Audio key={participant.sessionId} participant={participant} />
       ))}
       <div className="str-video__paginated-grid-layout__wrapper">
         <div className="str-video__paginated-grid-layout">

package/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 = ({
             <ParticipantView
               participant={participantInSpotlight}
               muteAudio={isSpeakerScreenSharing}
-              videoMode={isSpeakerScreenSharing ? 'screen' : 'video'}
+              trackType={
+                isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack'
+              }
               ParticipantViewUI={ParticipantViewUISpotlight}
               VideoPlaceholder={VideoPlaceholder}
             />

package/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 (
       <>
         <DefaultScreenShareOverlay />
         <ParticipantDetails indicatorsVisible={indicatorsVisible} />
       </>
     );
+  }
 
   return (
     <>

package/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<ParticipantViewProps, 'participant' | 'videoMode'>
+  Pick<ParticipantViewProps, 'participant' | 'trackType'>
 > & {
   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<HTMLDivElement, ParticipantViewProps>(
   (
     {
       participant,
-      videoMode = 'video',
+      trackType = 'videoTrack',
       muteAudio,
       refs: { setVideoElement, setVideoPlaceholderElement } = {},
       className,
@@ -87,15 +87,12 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     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<HTMLDivElement, ParticipantViewProps>(
     useTrackElementVisibility({
       sessionId,
       trackedElement,
+      trackType,
     });
 
     const participantViewContextValue = useMemo(
@@ -122,14 +120,14 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
         participantViewElement: trackedElement,
         videoElement: contextVideoElement,
         videoPlaceholderElement: contextVideoPlaceholderElement,
-        videoMode,
+        trackType,
       }),
       [
         contextVideoElement,
         contextVideoPlaceholderElement,
         participant,
         trackedElement,
-        videoMode,
+        trackType,
       ],
     );
 
@@ -165,15 +163,12 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
         <ParticipantViewContext.Provider value={participantViewContextValue}>
           {/* mute the local participant, as we don't want to hear ourselves */}
           {!isLocalParticipant && !muteAudio && (
-            <Audio
-              sinkId={localParticipant?.audioOutputDeviceId}
-              audioStream={audioStream}
-            />
+            <Audio participant={participant} />
           )}
           <Video
             VideoPlaceholder={VideoPlaceholder}
             participant={participant}
-            kind={videoMode}
+            trackType={trackType}
             refs={videoRefs}
             autoPlay
           />

package/src/core/components/Video/Video.tsx

@@ -1,15 +1,13 @@
 import {
   ComponentPropsWithoutRef,
   ComponentType,
-  useCallback,
   useEffect,
-  useRef,
   useState,
 } from 'react';
 import {
-  DebounceType,
   SfuModels,
   StreamVideoParticipant,
+  VideoTrackType,
   VisibilityState,
 } from '@stream-io/video-client';
 import clsx from 'clsx';
@@ -17,11 +15,16 @@ import {
   DefaultVideoPlaceholder,
   VideoPlaceholderProps,
 } from './DefaultVideoPlaceholder';
-import { BaseVideo } from './BaseVideo';
 import { useCall } from '@stream-io/video-react-bindings';
 
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
-  kind: 'video' | 'screen' | 'none';
+  /**
+   * The track type to display.
+   */
+  trackType: VideoTrackType | 'none';
+  /**
+   * The participant represented by this video element.
+   */
   participant: StreamVideoParticipant;
   /**
    * Override the default UI that's visible when a participant turned off their video.
@@ -34,7 +37,7 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
 };
 
 export const Video = ({
-  kind,
+  trackType,
   participant,
   className,
   VideoPlaceholder = DefaultVideoPlaceholder,
@@ -52,183 +55,63 @@ export const Video = ({
   } = participant;
 
   const call = useCall();
-
   const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
     null,
   );
-
-  // const [videoTrackMuted, setVideoTrackMuted] = useState(false);
   const [videoPlaying, setVideoPlaying] = useState(false);
-  const viewportVisibilityRef = useRef<VisibilityState | undefined>(
-    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<string | undefined>();
-  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 (
     <>
-      <BaseVideo
+      <video
         {...rest}
-        stream={stream}
         className={clsx(className, 'str-video__video', {
           'str-video__video--tall': !isWideMode,
-          'str-video__video--mirror': isLocalParticipant && kind === 'video',
-          'str-video__video--screen-share': kind === 'screen',
+          'str-video__video--mirror':
+            isLocalParticipant && trackType === 'videoTrack',
+          'str-video__video--screen-share': trackType === 'screenShareTrack',
         })}
         data-user-id={userId}
         data-session-id={sessionId}

package/src/core/hooks/useTrackElementVisibility.ts

@@ -1,44 +1,29 @@
 import { useEffect } from 'react';
-import { ViewportTracker, VisibilityState } from '@stream-io/video-client';
+import { DynascaleManager, VideoTrackType } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
 
 export const useTrackElementVisibility = <T extends HTMLElement>({
   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]);
 };