@stream-io/video-react-sdk 0.0.34 → 0.0.36

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.0.36](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.35...@stream-io/video-react-sdk-0.0.36) (2023-06-19)
+
+
+### Bug Fixes
+
+* **react-sdk:** vale lint issue in README.md ([#665](https://github.com/GetStream/stream-video-js/issues/665)) ([f21fe8e](https://github.com/GetStream/stream-video-js/commit/f21fe8e74302f3f3b436f3f1bf0f64335d9c936a))
+
+### [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

package/README.md

@@ -1,5 +1,82 @@
-# @stream-io/video-react-sdk
+# Official React SDK for [Stream Video](https://getstream.io/video/docs/)
 
-🚧 **WARNING** This package is not yet stable, it is for internal use only. For more information check out our [video product page](https://getstream.io/video/). 🚧
+## **Quick Links**
 
-TO DO
+- [Register](https://getstream.io/chat/trial/) to get an API key for Stream Video
+- [React Video Tutorial](/sample-apps/react/stream-video-react-tutorial)
+- [Sample application](../../sample-apps/react/stream-video-react-tutorial)
+
+## What is Stream?
+
+Stream allows developers to rapidly deploy scalable feeds, chat messaging and video with an industry leading 99.999% uptime SLA guarantee.
+
+With Stream's video components, you can use their SDK to build in-app video calling, audio rooms, audio calls, or live streaming. The best place to get started is with their tutorials:
+
+- Video & Audio Calling Tutorial
+- Audio Rooms Tutorial
+- Livestreaming Tutorial
+
+Stream provides UI components and state handling that make it easy to build video calling for your app. All calls run on Stream's network of edge servers around the world, ensuring optimal latency and reliability.
+
+## 👩‍💻 Free for Makers 👨‍💻
+
+Stream is free for most side and hobby projects. To qualify, your project/company needs to have < 5 team members and < $10k in monthly revenue. Makers get $100 in monthly credit for video for free.
+
+## 💡Supported Features💡
+
+Here are some of the features we support:
+
+- Developer experience: Great SDKs, docs, tutorials and support so you can build quickly
+- Edge network: Servers around the world ensure optimal latency and reliability
+- Chat: Stored chat, reactions, threads, typing indicators, URL previews etc
+- Security & Privacy: Based in USA and EU, Soc2 certified, GDPR compliant
+- Dynascale: Automatically switch resolutions, fps, bitrate, codecs and paginate video on large calls
+- Screen sharing
+- Picture in picture support
+- Active speaker
+- Custom events
+- Geofencing
+- Notifications and ringing calls
+- Opus DTX & Red for reliable audio
+- Webhooks & SQS
+- Backstage mode
+- Flexible permissions system
+- Joining calls by ID, link or invite
+- Enabling and disabling audio and video when in calls
+- Flipping, Enabling and disabling camera in calls
+- Enabling and disabling speakerphone in calls
+- Push notification providers support
+- Call recording
+- Broadcasting to HLS
+
+## Roadmap
+
+### 0.1 milestone
+- [ ] Call session migration
+- [ ] Hardware-accelerated video encoding on supported platforms
+
+### 0.2 milestone
+- [ ] Composite layout for streaming and recording
+- [ ] Dynascale: turn off incoming video when the browser is in the background
+- [ ] Performance and bundle-size optimizations
+- [ ] Typescript generics enhancements
+- [ ] Logging 2.0
+- [ ] E2E testing platform
+- [ ] Increase test coverage
+
+### 0.3 milestone
+- [ ] Video and audio filters
+- [ ] Transcriptions
+- [ ] Closed captions
+
+### 0.4 milestone
+- [ ] Enhanced UI components and theming
+- [ ] Break-out rooms
+- [ ] Waiting rooms
+
+## Contributing
+
+- How can I submit a sample app?
+    - Apps submissions are always welcome. 🥳 Open a PR with a proper description and we'll review it as soon as possible.
+- Spot a bug 🕷 ?
+    - We welcome code changes that improve the apps or fix a problem. Please make sure to follow all best practices and add tests if applicable before submitting a Pull Request on Github.

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

@@ -47,5 +47,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.34"
+  "version": "0.0.36"
 }

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,