@stream-io/video-react-sdk 0.0.1-alpha.100

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { forwardRef, useState, createContext, } from 'react';
+import clsx from 'clsx';
+import { SfuModels, } from '@stream-io/video-client';
+import { Audio } from '../Audio';
+import { Video } from '../Video';
+import { useTrackElementVisibility } from '../../hooks';
+import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
+import { isComponentType, applyElementToRef } from '../../../utilities';
+const ParticipantViewContext = createContext(undefined);
+export const useParticipantViewContext = () => useContext(ParticipantViewContext);
+export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'video', muteAudio, refs, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
+    const { audioStream, isLoggedInUser, isSpeaking, publishedTracks, sessionId, } = participant;
+    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+    const [trackedElement, setTrackedElement] = useState(null);
+    // TODO: allow to pass custom ViewportTracker instance from props
+    useTrackElementVisibility({
+        sessionId,
+        trackedElement,
+    });
+    const participantViewContextValue = useMemo(() => ({ participant, participantViewElement: trackedElement }), [participant, trackedElement]);
+    return (_jsx("div", Object.assign({ ref: (element) => {
+            applyElementToRef(ref, element);
+            setTrackedElement(element);
+        }, className: clsx('str-video__participant-view', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className) }, { children: _jsxs(ParticipantViewContext.Provider, Object.assign({ value: participantViewContextValue }, { children: [_jsx(Audio
+                // mute the local participant, as we don't want to hear ourselves
+                , { 
+                    // mute the local participant, as we don't want to hear ourselves
+                    muted: isLoggedInUser || muteAudio, sinkId: sinkId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, refs: refs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
+});
+//# sourceMappingURL=ParticipantView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,UAAU,EAEV,QAAQ,EAER,aAAa,GACd,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,SAAS,GAGV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASxE,MAAM,sBAAsB,GAAG,aAAa,CAE1C,SAAS,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAC5C,UAAU,CAAC,sBAAsB,CAAgC,CAAC;AA6CpE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,WAAW,EACX,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GAAG,wBAAyC,GAC9D,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,WAAW,EACX,cAAc,EACd,UAAU,EACV,eAAe,EACf,SAAS,GACV,GAAG,WAAW,CAAC;IAEhB,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAErE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,IAAI,CACL,CAAC;IAEF,iEAAiE;IACjE,yBAAyB,CAAC;QACxB,SAAS;QACT,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,2BAA2B,GAAG,OAAO,CACzC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,sBAAsB,EAAE,cAAc,EAAE,CAAC,EAC/D,CAAC,WAAW,EAAE,cAAc,CAAC,CAC9B,CAAC;IAEF,OAAO,CACL,4BACE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAChC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,UAAU,IAAI,uCAAuC,EACrD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,SAAS,CACV,gBAED,MAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,2BAA2B,iBACjE,KAAC,KAAK;gBACJ,iEAAiE;;oBAAjE,iEAAiE;oBACjE,KAAK,EAAE,cAAc,IAAI,SAAS,EAClC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,GACxB,EACF,KAAC,KAAK,IACJ,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,SACR,EACD,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACpC,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,KAC+B,IAC9B,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/src/core/components/ParticipantView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ParticipantView';
+export * from './DefaultParticipantViewUI';

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

@@ -0,0 +1,3 @@
+export * from './ParticipantView';
+export * from './DefaultParticipantViewUI';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}

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

@@ -0,0 +1,73 @@
+import { PropsWithChildren } from 'react';
+import { Call, JoinCallData } from '@stream-io/video-client';
+import { MediaDevicesProviderProps } from '../../contexts';
+type InitWithCallCID = {
+    /**
+     * The call type.
+     */
+    callType: string;
+    /**
+     * The call id.
+     */
+    callId: string;
+    /**
+     * The call instance to use.
+     */
+    call?: never;
+};
+type InitWithCallInstance = {
+    /**
+     * The call instance to use.
+     */
+    call: Call | undefined;
+    /**
+     * The call type.
+     */
+    callType?: never;
+    /**
+     * The call id.
+     */
+    callId?: never;
+};
+type InitStreamCall = InitWithCallCID | InitWithCallInstance;
+export type StreamCallProps = InitStreamCall & {
+    /**
+     * If true, the call will be joined automatically.
+     * Set it to true if you want to join the call immediately.
+     * Useful for scenarios where you want to skip prompting the user to join the call.
+     *
+     * @default false.
+     */
+    autoJoin?: boolean;
+    /**
+     * If true, the call data will be loaded automatically from the server.
+     *
+     * This property is useful for the scenarios where you declaratively create
+     * the call instance by using the `callId` and `callType` props,
+     * and you have a UI that depends on the call metadata.
+     *
+     * @example
+     * ```jsx
+     * <StreamCall callId="call-id" callType="call-type" autoLoad>
+     *   <CallMetadata /> // has access to `call.metadata` although not joined yet
+     *   <CallUI />
+     *   <CallControls />
+     * </StreamCall>
+     * ```
+     *
+     * This property is ignored if you pass the `call` prop or enable `autoJoin`.
+     *
+     * @default true.
+     */
+    autoLoad?: boolean;
+    /**
+     * An optional data to pass when joining the call.
+     */
+    data?: JoinCallData;
+    /**
+     * An optional props to pass to the `MediaDevicesProvider`.
+     */
+    mediaDevicesProviderProps?: MediaDevicesProviderProps;
+};
+export declare const StreamCall: ({ children, callId, callType, call, autoJoin, autoLoad, data, mediaDevicesProviderProps, }: PropsWithChildren<StreamCallProps>) => JSX.Element;
+export {};

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CallingState } from '@stream-io/video-client';
+import { StreamCallProvider, useConnectedUser, useStreamVideoClient, } from '@stream-io/video-react-bindings';
+import { MediaDevicesProvider, } from '../../contexts';
+export const StreamCall = ({ children, callId, callType, call, autoJoin = false, autoLoad = true, data, mediaDevicesProviderProps, }) => {
+    const client = useStreamVideoClient();
+    const [activeCall, setActiveCall] = useState(() => {
+        if (call)
+            return call;
+        if (!client || !callId || !callType)
+            return;
+        return client.call(callType, callId);
+    });
+    useEffect(() => {
+        if (!client)
+            return;
+        if (callId && callType && !activeCall) {
+            const newCall = client.call(callType, callId);
+            setActiveCall(newCall);
+        }
+    }, [activeCall, callId, callType, client]);
+    const connectedUser = useConnectedUser();
+    useEffect(() => {
+        // run the effect only when the user is connected and the call
+        // is created declaratively by using the `callId` and `callType` props.
+        if (!connectedUser)
+            return;
+        if (activeCall && callType && callId && autoLoad && !autoJoin) {
+            activeCall
+                .getOrCreate({
+                ring: data === null || data === void 0 ? void 0 : data.ring,
+                data: data === null || data === void 0 ? void 0 : data.data,
+                members_limit: data === null || data === void 0 ? void 0 : data.members_limit,
+            })
+                .catch((err) => {
+                console.error(`Failed to get or create call`, err);
+            });
+        }
+    }, [
+        activeCall,
+        autoJoin,
+        autoLoad,
+        callId,
+        callType,
+        connectedUser,
+        data === null || data === void 0 ? void 0 : data.data,
+        data === null || data === void 0 ? void 0 : data.members_limit,
+        data === null || data === void 0 ? void 0 : data.ring,
+    ]);
+    useEffect(() => {
+        if (autoJoin && (activeCall === null || activeCall === void 0 ? void 0 : activeCall.state.callingState) === CallingState.IDLE) {
+            activeCall.join(data).catch((err) => {
+                console.error(`Failed to join call`, err);
+            });
+        }
+    }, [activeCall, autoJoin, data]);
+    return (_jsx(StreamCallProvider, Object.assign({ call: activeCall }, { children: _jsx(MediaDevicesProvider, Object.assign({}, mediaDevicesProviderProps, { children: children })) })));
+};
+//# sourceMappingURL=StreamCall.js.map

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

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

package/dist/src/core/components/StreamCall/index.d.ts

@@ -0,0 +1 @@
+export * from './StreamCall';

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

@@ -0,0 +1,2 @@
+export * from './StreamCall';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/StreamCall/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef } from 'react';
+export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
+    stream?: MediaStream;
+};
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+export declare const BaseVideo: import("react").ForwardRefExoticComponent<Omit<BaseVideoProps, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;

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

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import { Browsers } from '@stream-io/video-client';
+import { applyElementToRef } from '../../../utilities';
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+export const BaseVideo = forwardRef((_a, ref) => {
+    var { stream } = _a, rest = __rest(_a, ["stream"]);
+    const [videoElement, setVideoElement] = useState(null);
+    useEffect(() => {
+        if (!videoElement || !stream)
+            return;
+        if (stream === videoElement.srcObject)
+            return;
+        videoElement.srcObject = stream;
+        if (Browsers.isSafari() || Browsers.isFirefox()) {
+            // Firefox and Safari have some timing issue
+            setTimeout(() => {
+                videoElement.srcObject = stream;
+                videoElement.play().catch((e) => {
+                    console.error(`Failed to play stream`, e);
+                });
+            }, 0);
+        }
+        return () => {
+            videoElement.pause();
+            videoElement.srcObject = null;
+        };
+    }, [stream, videoElement]);
+    return (_jsx("video", Object.assign({ autoPlay: true, playsInline: true }, rest, { ref: (element) => {
+            applyElementToRef(ref, element);
+            setVideoElement(element);
+        } })));
+});
+//# sourceMappingURL=BaseVideo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideo.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/BaseVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMvD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAmB,EAAE,GAAG,EAAE,EAAE;QAA5B,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IAChB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE,OAAO;QACrC,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE,OAAO;QAE9C,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;QAChC,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;YAC/C,4CAA4C;YAC5C,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;gBAChC,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC9B,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;gBAC5C,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,8BACE,QAAQ,QACR,WAAW,UACP,IAAI,IACR,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAChC,eAAe,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+import type { StreamVideoParticipant } from '@stream-io/video-client';
+export type VideoPlaceholderProps = {
+    participant: StreamVideoParticipant;
+} & ComponentPropsWithRef<'div'>;
+export declare const DefaultVideoPlaceholder: import("react").ForwardRefExoticComponent<Omit<VideoPlaceholderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+export const DefaultVideoPlaceholder = forwardRef(({ participant, style }, ref) => {
+    const [error, setError] = useState(false);
+    const name = (participant === null || participant === void 0 ? void 0 : participant.name) || (participant === null || participant === void 0 ? void 0 : participant.userId);
+    return (_jsxs("div", Object.assign({ className: "str-video__video-placeholder", style: style, ref: ref }, { children: [(!participant.image || error) &&
+                (name ? (_jsx("div", Object.assign({ className: "str-video__video-placeholder__initials-fallback" }, { children: _jsx("div", { children: name[0] }) }))) : (_jsx("div", { children: "Video is disabled" }))), participant.image && !error && (_jsx("img", { onError: () => setError(true), alt: "video-placeholder", className: "str-video__video-placeholder__avatar", src: participant.image }))] })));
+});
+//# sourceMappingURL=DefaultVideoPlaceholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultVideoPlaceholder.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/DefaultVideoPlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyB,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOpE,MAAM,CAAC,MAAM,uBAAuB,GAAG,UAAU,CAG/C,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,MAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAA,CAAC;IAEtD,OAAO,CACL,6BAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,iBACjE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK,CAAC;gBAC5B,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,4BAAK,SAAS,EAAC,iDAAiD,gBAC9D,wBAAM,IAAI,CAAC,CAAC,CAAC,GAAO,IAChB,CACP,CAAC,CAAC,CAAC,CACF,8CAA4B,CAC7B,CAAC,EACH,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,IAAI,CAC9B,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,mBAAmB,EACvB,SAAS,EAAC,sCAAsC,EAChD,GAAG,EAAE,WAAW,CAAC,KAAK,GACtB,CACH,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { StreamVideoParticipant } from '@stream-io/video-client';
+import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
+export type VideoProps = ComponentPropsWithoutRef<'video'> & {
+    kind: 'video' | 'screen';
+    participant: StreamVideoParticipant;
+    VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+    refs?: {
+        setVideoElement?: (element: HTMLVideoElement | null) => void;
+        setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
+    };
+};
+export declare const Video: ({ kind, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps) => JSX.Element | null;

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

@@ -0,0 +1,154 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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 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"]);
+    const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLoggedInUser, 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 === 'video' ? 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 = publishedTracks.includes(kind === 'video'
+        ? 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)
+            return;
+        call.updateSubscriptionsPartial(kind, {
+            [sessionId]: {
+                dimension,
+            },
+        }, type);
+    }, [call, kind, sessionId]);
+    // handle visibility subscription updates
+    useEffect(() => {
+        viewportVisibilityRef.current = viewportVisibilityState;
+        if (!videoElement || !isPublishingTrack || isLoggedInUser)
+            return;
+        const isInvisibleVVS = viewportVisibilityState === VisibilityState.INVISIBLE;
+        updateSubscription(isInvisibleVVS
+            ? undefined
+            : {
+                height: videoElement.clientHeight,
+                width: videoElement.clientWidth,
+            }, DebounceType.MEDIUM);
+    }, [
+        updateSubscription,
+        viewportVisibilityState,
+        videoElement,
+        isPublishingTrack,
+        isLoggedInUser,
+    ]);
+    // handle resize subscription updates
+    useEffect(() => {
+        if (!videoElement || !isPublishingTrack || isLoggedInUser)
+            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,
+        isLoggedInUser,
+    ]);
+    // handle generic subscription updates
+    useEffect(() => {
+        if (!isPublishingTrack || !videoElement || isLoggedInUser)
+            return;
+        updateSubscription({
+            height: videoElement.clientHeight,
+            width: videoElement.clientWidth,
+        }, DebounceType.FAST);
+        return () => {
+            updateSubscription(undefined, DebounceType.FAST);
+        };
+    }, [updateSubscription, videoElement, isPublishingTrack, isLoggedInUser]);
+    const [isWideMode, setIsWideMode] = useState(true);
+    useEffect(() => {
+        if (!stream || !videoElement)
+            return;
+        setVideoPlaying(!videoElement.paused);
+        const calculateVideoRatio = () => {
+            setVideoPlaying(true);
+            const [track] = stream.getVideoTracks();
+            if (!track)
+                return;
+            const { width = 0, height = 0 } = track.getSettings();
+            setIsWideMode(width > height);
+        };
+        videoElement.addEventListener('play', calculateVideoRatio);
+        return () => {
+            videoElement.removeEventListener('play', calculateVideoRatio);
+        };
+    }, [stream, videoElement]);
+    if (!call)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(BaseVideo, Object.assign({}, rest, { stream: stream, className: clsx(className, 'str-video__video', {
+                    'str-video__video--tall': !isWideMode,
+                    'str-video__video--mirror': isLoggedInUser && kind === 'video',
+                    'str-video__video--screen-share': kind === 'screen',
+                }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
+                    var _a;
+                    setVideoElement(element);
+                    (_a = refs === null || refs === void 0 ? void 0 : refs.setVideoElement) === null || _a === void 0 ? void 0 : _a.call(refs, element);
+                } })), displayPlaceholder && (_jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs === null || refs === void 0 ? void 0 : refs.setVideoPlaceholderElement }))] }));
+};
+//# sourceMappingURL=Video.js.map

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

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

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

@@ -0,0 +1,2 @@
+export * from './BaseVideo';
+export * from './Video';

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

@@ -0,0 +1,3 @@
+export * from './BaseVideo';
+export * from './Video';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,6 @@
+export * from './Audio';
+export * from './ParticipantView';
+export * from './StreamCall';
+export { Video } from './Video';
+export type { BaseVideoProps, VideoProps } from './Video';
+export * from './CallLayout';

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

@@ -0,0 +1,6 @@
+export * from './Audio';
+export * from './ParticipantView';
+export * from './StreamCall';
+export { Video } from './Video';
+export * from './CallLayout';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,cAAc,cAAc,CAAC"}