@stream-io/video-react-sdk 0.0.33 → 0.0.35

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.0.35](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.34...@stream-io/video-react-sdk-0.0.35) (2023-06-16)
+
+
+### Features
+
+* Rename videoKind prop to videoMode ([#661](https://github.com/GetStream/stream-video-js/issues/661)) ([781e908](https://github.com/GetStream/stream-video-js/commit/781e9081fd43f2a433f9c4c7b32a549d77fb26c1))
+
+### [0.0.34](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.33...@stream-io/video-react-sdk-0.0.34) (2023-06-16)
+
+### Dependency Updates
+
+* `@stream-io/i18n` updated to version `0.0.5`
+* `@stream-io/video-client` updated to version `0.0.1`
+* `@stream-io/video-react-bindings` updated to version `0.0.17`
+
+### Documentation
+
+* **react-sdk:** Runtime layout switching guide ([#642](https://github.com/GetStream/stream-video-js/issues/642)) ([1557168](https://github.com/GetStream/stream-video-js/commit/1557168da69660b71a0a420a94a0c354466681a7))
+
 ### [0.0.33](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.32...@stream-io/video-react-sdk-0.0.33) (2023-06-16)
 
 ### Dependency Updates

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

@@ -39,7 +39,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, videoKind: 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, 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' ||
                             participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
                             participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
 };

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

@@ -21,12 +21,12 @@ export const DefaultScreenShareOverlay = () => {
 };
 export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
     const call = useCall();
-    const { participant, participantViewElement, videoKind, videoElement } = useParticipantViewContext();
+    const { participant, participantViewElement, videoMode, videoElement } = useParticipantViewContext();
     const { reaction, sessionId, publishedTracks } = participant;
     const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
     if (participant.isLocalParticipant &&
         hasScreenShare &&
-        videoKind === 'screen')
+        videoMode === 'screen')
         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 }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
 };

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 { VideoProps } from '../Video';
-export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'videoKind'>> & {
+export type ParticipantViewContextValue = Required<Pick<ParticipantViewProps, 'participant' | 'videoMode'>> & {
     participantViewElement: HTMLDivElement | null;
     videoElement: HTMLVideoElement | null;
     videoPlaceholderElement: HTMLDivElement | null;
@@ -19,11 +19,11 @@ export type ParticipantViewProps = {
      */
     ParticipantViewUI?: ComponentType | ReactElement | null;
     /**
-     * The kind of video stream to play for the given participant.
+     * 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.
      */
-    videoKind?: 'video' | 'screen';
+    videoMode?: 'video' | 'screen' | 'none';
     /**
-     * You can mute the audio of the given participant (this is a local action, it won't have any effect on the published audio of the participant). The `ParticipantView` will mute the audio of the local participant by default.
+     * 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.
      */
     muteAudio?: boolean;
     /**
@@ -50,11 +50,11 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
      */
     ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<{}> | null | undefined;
     /**
-     * The kind of video stream to play for the given participant.
+     * 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.
      */
-    videoKind?: "video" | "screen" | undefined;
+    videoMode?: "video" | "none" | "screen" | undefined;
     /**
-     * You can mute the audio of the given participant (this is a local action, it won't have any effect on the published audio of the participant). The `ParticipantView` will mute the audio of the local participant by default.
+     * 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.
      */
     muteAudio?: boolean | undefined;
     /**

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

@@ -11,7 +11,7 @@ import { isComponentType, applyElementToRef } from '../../../utilities';
 import { useLocalParticipant } from '@stream-io/video-react-bindings';
 const ParticipantViewContext = createContext(undefined);
 export const useParticipantViewContext = () => useContext(ParticipantViewContext);
-export const ParticipantView = forwardRef(({ participant, videoKind = 'video', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
+export const ParticipantView = forwardRef(({ participant, videoMode = 'video', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
     const { audioStream, isLocalParticipant, isSpeaking, publishedTracks, sessionId, } = participant;
     const localParticipant = useLocalParticipant();
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
@@ -29,13 +29,13 @@ export const ParticipantView = forwardRef(({ participant, videoKind = 'video', m
         participantViewElement: trackedElement,
         videoElement: contextVideoElement,
         videoPlaceholderElement: contextVideoPlaceholderElement,
-        videoKind,
+        videoMode,
     }), [
         contextVideoElement,
         contextVideoPlaceholderElement,
         participant,
         trackedElement,
-        videoKind,
+        videoMode,
     ]);
     const videoRefs = useMemo(() => ({
         setVideoElement: (element) => {
@@ -54,6 +54,6 @@ export const ParticipantView = forwardRef(({ participant, videoKind = 'video', m
                 // 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: isLocalParticipant || muteAudio, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
+                    muted: isLocalParticipant || muteAudio, 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)] })) })));
 });
 //# sourceMappingURL=ParticipantView.js.map

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

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, ComponentType } from 'react';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
-    kind: 'video' | 'screen';
+    kind: 'video' | 'screen' | 'none';
     participant: StreamVideoParticipant;
     /**
      * Override the default UI that's visible when a participant turned off their video.

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

@@ -24,7 +24,11 @@ export const Video = (_a) => {
     // const [videoTrackMuted, setVideoTrackMuted] = useState(false);
     const [videoPlaying, setVideoPlaying] = useState(false);
     const viewportVisibilityRef = useRef(viewportVisibilityState);
-    const stream = kind === 'video' ? videoStream : screenShareStream;
+    const stream = kind === 'none'
+        ? undefined
+        : kind === 'video'
+            ? videoStream
+            : screenShareStream;
     // TODO: handle track muting
     // useEffect(() => {
     //   if (!stream) return;
@@ -43,16 +47,18 @@ export const Video = (_a) => {
     //     track.removeEventListener('unmute', handleUnmute);
     //   };
     // }, [stream]);
-    const isPublishingTrack = publishedTracks.includes(kind === 'video'
-        ? SfuModels.TrackType.VIDEO
-        : SfuModels.TrackType.SCREEN_SHARE);
+    const isPublishingTrack = kind === 'none'
+        ? false
+        : 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)
+        if (!call || kind === 'none')
             return;
         call.updateSubscriptionsPartial(kind, {
             [sessionId]: {

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/package.json

@@ -25,9 +25,9 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.0.4",
-    "@stream-io/video-client": "^0.0.15",
-    "@stream-io/video-react-bindings": "^0.0.16",
+    "@stream-io/i18n": "^0.0.5",
+    "@stream-io/video-client": "^0.0.16",
+    "@stream-io/video-react-bindings": "^0.0.17",
     "clsx": "^1.2.1",
     "rxjs": "~7.8.1"
   },
@@ -47,5 +47,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.33"
+  "version": "0.0.35"
 }

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

@@ -96,7 +96,7 @@ export const SpeakerLayout = ({
             <ParticipantView
               participant={participantInSpotlight}
               muteAudio={isSpeakerScreenSharing}
-              videoKind={isSpeakerScreenSharing ? 'screen' : 'video'}
+              videoMode={isSpeakerScreenSharing ? 'screen' : 'video'}
               ParticipantViewUI={ParticipantViewUISpotlight}
               VideoPlaceholder={VideoPlaceholder}
             />

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -69,7 +69,7 @@ export const DefaultParticipantViewUI = ({
   showMenuButton = true,
 }: DefaultParticipantViewUIProps) => {
   const call = useCall()!;
-  const { participant, participantViewElement, videoKind, videoElement } =
+  const { participant, participantViewElement, videoMode, videoElement } =
     useParticipantViewContext();
   const { reaction, sessionId, publishedTracks } = participant;
 
@@ -80,7 +80,7 @@ export const DefaultParticipantViewUI = ({
   if (
     participant.isLocalParticipant &&
     hasScreenShare &&
-    videoKind === 'screen'
+    videoMode === 'screen'
   )
     return (
       <>

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -21,7 +21,7 @@ import { isComponentType, applyElementToRef } from '../../../utilities';
 import { useLocalParticipant } from '@stream-io/video-react-bindings';
 
 export type ParticipantViewContextValue = Required<
-  Pick<ParticipantViewProps, 'participant' | 'videoKind'>
+  Pick<ParticipantViewProps, 'participant' | 'videoMode'>
 > & {
   participantViewElement: HTMLDivElement | null;
   videoElement: HTMLVideoElement | null;
@@ -49,12 +49,12 @@ export type ParticipantViewProps = {
   ParticipantViewUI?: ComponentType | ReactElement | null;
 
   /**
-   * The kind of video stream to play for the given participant.
+   * 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.
    */
-  videoKind?: 'video' | 'screen';
+  videoMode?: 'video' | 'screen' | 'none';
 
   /**
-   * You can mute the audio of the given participant (this is a local action, it won't have any effect on the published audio of the participant). The `ParticipantView` will mute the audio of the local participant by default.
+   * 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.
    */
   muteAudio?: boolean;
 
@@ -76,7 +76,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
   (
     {
       participant,
-      videoKind = 'video',
+      videoMode = 'video',
       muteAudio,
       refs: { setVideoElement, setVideoPlaceholderElement } = {},
       className,
@@ -119,14 +119,14 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
         participantViewElement: trackedElement,
         videoElement: contextVideoElement,
         videoPlaceholderElement: contextVideoPlaceholderElement,
-        videoKind,
+        videoMode,
       }),
       [
         contextVideoElement,
         contextVideoPlaceholderElement,
         participant,
         trackedElement,
-        videoKind,
+        videoMode,
       ],
     );
 
@@ -168,7 +168,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
           <Video
             VideoPlaceholder={VideoPlaceholder}
             participant={participant}
-            kind={videoKind}
+            kind={videoMode}
             refs={videoRefs}
             autoPlay
           />

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

@@ -21,7 +21,7 @@ import { BaseVideo } from './BaseVideo';
 import { useCall } from '@stream-io/video-react-bindings';
 
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
-  kind: 'video' | 'screen';
+  kind: 'video' | 'screen' | 'none';
   participant: StreamVideoParticipant;
   /**
    * Override the default UI that's visible when a participant turned off their video.
@@ -63,7 +63,12 @@ export const Video = ({
     viewportVisibilityState,
   );
 
-  const stream = kind === 'video' ? videoStream : screenShareStream;
+  const stream =
+    kind === 'none'
+      ? undefined
+      : kind === 'video'
+      ? videoStream
+      : screenShareStream;
 
   // TODO: handle track muting
   // useEffect(() => {
@@ -88,11 +93,14 @@ export const Video = ({
   //   };
   // }, [stream]);
 
-  const isPublishingTrack = publishedTracks.includes(
-    kind === 'video'
-      ? SfuModels.TrackType.VIDEO
-      : SfuModels.TrackType.SCREEN_SHARE,
-  );
+  const isPublishingTrack =
+    kind === 'none'
+      ? false
+      : publishedTracks.includes(
+          kind === 'video'
+            ? SfuModels.TrackType.VIDEO
+            : SfuModels.TrackType.SCREEN_SHARE,
+        );
 
   const displayPlaceholder =
     !isPublishingTrack ||
@@ -106,7 +114,7 @@ export const Video = ({
       dimension?: SfuModels.VideoDimension,
       type: DebounceType = DebounceType.SLOW,
     ) => {
-      if (!call) return;
+      if (!call || kind === 'none') return;
 
       call.updateSubscriptionsPartial(
         kind,