@stream-io/video-react-sdk 0.4.0 → 0.4.2

package/dist/src/components/VideoPreview/VideoPreview.d.ts

@@ -1,13 +1,17 @@
 import { ComponentType } from 'react';
 export type VideoPreviewProps = {
     /**
-     * Component rendered when user turns off the video.
+     * Additional CSS class name to apply to the root element.
      */
-    DisabledVideoPreview?: ComponentType;
+    className?: string;
     /**
      * Enforces mirroring of the video on the X axis. Defaults to true.
      */
     mirror?: boolean;
+    /**
+     * Component rendered when user turns off the video.
+     */
+    DisabledVideoPreview?: ComponentType;
     /**
      * Component rendered when no camera devices are available.
      */
@@ -17,4 +21,4 @@ export type VideoPreviewProps = {
      */
     StartingCameraPreview?: ComponentType;
 };
-export declare const VideoPreview: ({ mirror, DisabledVideoPreview, NoCameraPreview, StartingCameraPreview, }: VideoPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VideoPreview: ({ className, mirror, DisabledVideoPreview, NoCameraPreview, StartingCameraPreview, }: VideoPreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/translations/index.d.ts

@@ -45,6 +45,8 @@ export declare const translations: {
         "Microphone off": string;
         "Camera on": string;
         "Camera off": string;
+        "No camera found": string;
+        "Video is disabled": string;
         Pinned: string;
         Unpin: string;
         Pin: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -31,8 +31,8 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/video-client": "^0.4.0",
-    "@stream-io/video-react-bindings": "^0.3.0",
+    "@stream-io/video-client": "^0.4.1",
+    "@stream-io/video-react-bindings": "^0.3.1",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "rxjs": "~7.8.1"

package/src/components/VideoPreview/VideoPreview.tsx

@@ -1,26 +1,32 @@
 import { ComponentType } from 'react';
 import clsx from 'clsx';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 import { BaseVideo } from '../../core/components/Video';
 import { LoadingIndicator } from '../LoadingIndicator';
 
 const DefaultDisabledVideoPreview = () => {
-  return <div>Video is disabled</div>;
+  const { t } = useI18n();
+  return <div>{t('Video is disabled')}</div>;
 };
 
 const DefaultNoCameraPreview = () => {
-  return <div>No camera found</div>;
+  const { t } = useI18n();
+  return <div>{t('No camera found')}</div>;
 };
 
 export type VideoPreviewProps = {
   /**
-   * Component rendered when user turns off the video.
+   * Additional CSS class name to apply to the root element.
    */
-  DisabledVideoPreview?: ComponentType;
+  className?: string;
   /**
    * Enforces mirroring of the video on the X axis. Defaults to true.
    */
   mirror?: boolean;
+  /**
+   * Component rendered when user turns off the video.
+   */
+  DisabledVideoPreview?: ComponentType;
   /**
    * Component rendered when no camera devices are available.
    */
@@ -32,6 +38,7 @@ export type VideoPreviewProps = {
 };
 
 export const VideoPreview = ({
+  className,
   mirror = true,
   DisabledVideoPreview = DefaultDisabledVideoPreview,
   NoCameraPreview = DefaultNoCameraPreview,
@@ -63,5 +70,9 @@ export const VideoPreview = ({
     contents = <DisabledVideoPreview />;
   }
 
-  return <div className="str-video__video-preview-container">{contents}</div>;
+  return (
+    <div className={clsx('str-video__video-preview-container', className)}>
+      {contents}
+    </div>
+  );
 };

package/src/translations/en.json

@@ -49,6 +49,8 @@
   "Microphone off": "Microphone off",
   "Camera on": "Camera on",
   "Camera off": "Camera off",
+  "No camera found": "No camera found",
+  "Video is disabled": "Video is disabled",
   "Pinned": "Pinned",
   "Unpin": "Unpin",
   "Pin": "Pin",