@stream-io/video-react-sdk 0.4.11 → 0.4.13

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

@@ -13,16 +13,21 @@ export type ParticipantViewProps = {
      */
     ParticipantViewUI?: ComponentType | ReactElement | null;
     /**
-     * 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.
+     * The kind of video stream to play for the given participant.
+     * The default value is `videoTrack`.
+     * You can use `none` if you're building an audio-only call.
      */
     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.
+     * This prop is only useful for advanced use-cases (for example, building your own 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;
     /**
      * An object with set functions meant for exposing the video
-     * and video placeholder elements to the integrators. It's useful when you want to attach custom event handlers to these elements.
+     * and video placeholder elements to the integrators.
+     * It's useful when you want to attach custom event handlers to these elements.
      * - `refs.setVideoElement`
      * - `refs.setVideoPlaceholderElement`
      */
@@ -44,16 +49,21 @@ 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 default value is `video`. You can use `none` if you're building an audio-only call.
+     * The kind of video stream to play for the given participant.
+     * The default value is `videoTrack`.
+     * You can use `none` if you're building an audio-only call.
      */
     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.
+     * This prop is only useful for advanced use-cases (for example, building your own 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;
     /**
      * An object with set functions meant for exposing the video
-     * and video placeholder elements to the integrators. It's useful when you want to attach custom event handlers to these elements.
+     * and video placeholder elements to the integrators.
+     * It's useful when you want to attach custom event handlers to these elements.
      * - `refs.setVideoElement`
      * - `refs.setVideoPlaceholderElement`
      */

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

@@ -12,8 +12,11 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
     participant: StreamVideoParticipant;
     /**
      * Override the default UI that's visible when a participant turned off their video.
+     * Set it to `null` if you wish to disable the video placeholder.
+     *
+     * @default DefaultVideoPlaceholder
      */
-    VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+    VideoPlaceholder?: ComponentType<VideoPlaceholderProps> | null;
     /**
      * An object with setRef functions
      * meant for exposing some of the internal elements of this component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,8 +31,8 @@
     "@floating-ui/react": "^0.26.1",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/video-client": "^0.4.8",
-    "@stream-io/video-react-bindings": "^0.3.8",
+    "@stream-io/video-client": "^0.4.10",
+    "@stream-io/video-react-bindings": "^0.3.10",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1"
   },

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

@@ -33,18 +33,23 @@ export type ParticipantViewProps = {
   ParticipantViewUI?: ComponentType | ReactElement | null;
 
   /**
-   * 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.
+   * The kind of video stream to play for the given participant.
+   * The default value is `videoTrack`.
+   * You can use `none` if you're building an audio-only call.
    */
   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.
+   * This prop is only useful for advanced use-cases (for example, building your own 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;
 
   /**
    * An object with set functions meant for exposing the video
-   * and video placeholder elements to the integrators. It's useful when you want to attach custom event handlers to these elements.
+   * and video placeholder elements to the integrators.
+   * It's useful when you want to attach custom event handlers to these elements.
    * - `refs.setVideoElement`
    * - `refs.setVideoPlaceholderElement`
    */

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithRef, forwardRef, useState } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
 import type { StreamVideoParticipant } from '@stream-io/video-client';
 
 export type VideoPlaceholderProps = {
@@ -9,6 +10,7 @@ export const DefaultVideoPlaceholder = forwardRef<
   HTMLDivElement,
   VideoPlaceholderProps
 >(({ participant, style }, ref) => {
+  const { t } = useI18n();
   const [error, setError] = useState(false);
   const name = participant.name || participant.userId;
   return (
@@ -19,7 +21,7 @@ export const DefaultVideoPlaceholder = forwardRef<
             <div>{name[0]}</div>
           </div>
         ) : (
-          <div>Video is disabled</div>
+          <div>{t('Video is disabled')}</div>
         ))}
       {participant.image && !error && (
         <img

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

@@ -29,8 +29,11 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
   participant: StreamVideoParticipant;
   /**
    * Override the default UI that's visible when a participant turned off their video.
+   * Set it to `null` if you wish to disable the video placeholder.
+   *
+   * @default DefaultVideoPlaceholder
    */
-  VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+  VideoPlaceholder?: ComponentType<VideoPlaceholderProps> | null;
   /**
    * An object with setRef functions
    * meant for exposing some of the internal elements of this component.
@@ -144,7 +147,7 @@ export const Video = ({
       {!hasNoVideoOrInvisible && (
         <video
           {...rest}
-          className={clsx(className, 'str-video__video', {
+          className={clsx('str-video__video', className, {
             'str-video__video--not-playing': isVideoPaused,
             'str-video__video--tall': !isWideMode,
             'str-video__video--mirror': mirrorVideo,
@@ -159,7 +162,7 @@ export const Video = ({
         />
       )}
       {/* TODO: add condition to "hold" the placeholder until track unmutes as well */}
-      {(hasNoVideoOrInvisible || isVideoPaused) && (
+      {(hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (
         <VideoPlaceholder
           style={{ position: 'absolute' }}
           participant={participant}