@stream-io/video-react-sdk 0.3.43 → 0.3.45

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

@@ -14,8 +14,20 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
      * Override the default UI that's visible when a participant turned off their video.
      */
     VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+    /**
+     * An object with setRef functions
+     * meant for exposing some of the internal elements of this component.
+     */
     refs?: {
+        /**
+         * The video element that's used to play the video stream.
+         * @param element the video element.
+         */
         setVideoElement?: (element: HTMLVideoElement | null) => void;
+        /**
+         * The video placeholder element that's used when the video stream is not playing.
+         * @param element the video placeholder element.
+         */
         setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
     };
 };

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

@@ -35,6 +35,7 @@ export declare const translations: {
         You: string;
         Me: string;
         Unknown: string;
+        "Toggle device menu": string;
         Allow: string;
         Revoke: string;
         Dismiss: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.3.43",
+  "version": "0.3.45",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

package/src/components/Button/CompositeButton.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 import { ComponentType, forwardRef, PropsWithChildren } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
 import { Placement } from '@floating-ui/react';
 
 import { IconButton } from './IconButton';
@@ -39,12 +40,16 @@ export const CompositeButton = forwardRef<
 });
 
 const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => (
-    <IconButton
-      className={'str-video__menu-toggle-button'}
-      icon={menuShown ? 'caret-down' : 'caret-up'}
-      title="Toggle device menu"
-      ref={ref}
-    />
-  ),
+  ({ menuShown }, ref) => {
+    const { t } = useI18n();
+
+    return (
+      <IconButton
+        className={'str-video__menu-toggle-button'}
+        icon={menuShown ? 'caret-down' : 'caret-up'}
+        title={t('Toggle device menu')}
+        ref={ref}
+      />
+    );
+  },
 );

package/src/components/DeviceSettings/DeviceSettings.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 import {
   DeviceSelectorAudioInput,
@@ -25,15 +26,19 @@ const Menu = () => (
 );
 
 const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => (
-    <IconButton
-      className={clsx('str-video__device-settings__button', {
-        'str-video__device-settings__button--active': menuShown,
-      })}
-      title="Toggle device menu"
-      icon="device-settings"
-      ref={ref}
-      // tabindex={0}
-    />
-  ),
+  ({ menuShown }, ref) => {
+    const { t } = useI18n();
+
+    return (
+      <IconButton
+        className={clsx('str-video__device-settings__button', {
+          'str-video__device-settings__button--active': menuShown,
+        })}
+        title={t('Toggle device menu')}
+        icon="device-settings"
+        ref={ref}
+        // tabindex={0}
+      />
+    );
+  },
 );

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

@@ -31,8 +31,20 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
    * Override the default UI that's visible when a participant turned off their video.
    */
   VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+  /**
+   * An object with setRef functions
+   * meant for exposing some of the internal elements of this component.
+   */
   refs?: {
+    /**
+     * The video element that's used to play the video stream.
+     * @param element the video element.
+     */
     setVideoElement?: (element: HTMLVideoElement | null) => void;
+    /**
+     * The video placeholder element that's used when the video stream is not playing.
+     * @param element the video placeholder element.
+     */
     setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
   };
 };
@@ -93,6 +105,11 @@ export const Video = ({
       setIsWideMode(width >= height);
     };
 
+    // playback may have started before we had a chance to
+    // attach the 'play/pause' event listener, so we set the state
+    // here to make sure it's in sync
+    setIsVideoPaused(videoElement.paused);
+
     videoElement.addEventListener('play', handlePlayPause);
     videoElement.addEventListener('pause', handlePlayPause);
     track.addEventListener('unmute', handlePlayPause);
@@ -100,6 +117,9 @@ export const Video = ({
       videoElement.removeEventListener('play', handlePlayPause);
       videoElement.removeEventListener('pause', handlePlayPause);
       track.removeEventListener('unmute', handlePlayPause);
+
+      // reset the 'pause' state once we unmount the video element
+      setIsVideoPaused(true);
     };
   }, [stream, videoElement]);
 

package/src/translations/en.json

@@ -36,6 +36,7 @@
   "You": "You",
   "Me": "Me",
   "Unknown": "Unknown",
+  "Toggle device menu": "Toggle device menu",
 
   "Allow": "Allow",
   "Revoke": "Revoke",