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

package/dist/index.es.js

@@ -131,6 +131,10 @@ const Video$1 = ({ trackType, participant, className, VideoPlaceholder = Default
             const { width = 0, height = 0 } = track.getSettings();
             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);
@@ -138,6 +142,8 @@ const Video$1 = ({ trackType, participant, className, VideoPlaceholder = Default
             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]);
     if (!call)
@@ -870,7 +876,10 @@ const CompositeButton = forwardRef(({ caption, children, active, Menu, menuPlace
                     'str-video__composite-button__button-group--active': active,
                 }), children: [children, Menu && (jsx(MenuToggle, { placement: menuPlacement, ToggleButton: ToggleMenuButton$2, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu }))] }), caption && (jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
 });
-const ToggleMenuButton$2 = forwardRef(({ menuShown }, ref) => (jsx(IconButton, { className: 'str-video__menu-toggle-button', icon: menuShown ? 'caret-down' : 'caret-up', title: "Toggle device menu", ref: ref })));
+const ToggleMenuButton$2 = forwardRef(({ menuShown }, ref) => {
+    const { t } = useI18n();
+    return (jsx(IconButton, { className: 'str-video__menu-toggle-button', icon: menuShown ? 'caret-down' : 'caret-up', title: t('Toggle device menu'), ref: ref }));
+});
 
 const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
     const { refs, x, y, strategy } = useFloatingUIPreset({
@@ -1319,9 +1328,12 @@ const DeviceSettings = () => {
     return (jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleMenuButton, children: jsx(Menu, {}) }));
 };
 const Menu = () => (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, {}), jsx(DeviceSelectorAudioInput, {}), jsx(DeviceSelectorAudioOutput, {})] }));
-const ToggleMenuButton = forwardRef(({ menuShown }, ref) => (jsx(IconButton, { className: clsx('str-video__device-settings__button', {
-        'str-video__device-settings__button--active': menuShown,
-    }), title: "Toggle device menu", icon: "device-settings", ref: ref })));
+const ToggleMenuButton = forwardRef(({ menuShown }, ref) => {
+    const { t } = useI18n();
+    return (jsx(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 }));
+});
 
 const ToggleAudioPreviewButton = (props) => {
     const { initialAudioEnabled, toggleInitialAudioMuteState } = useMediaDevices();
@@ -2305,6 +2317,7 @@ var en = {
 	You: You,
 	Me: Me,
 	Unknown: Unknown,
+	"Toggle device menu": "Toggle device menu",
 	Allow: Allow,
 	Revoke: Revoke,
 	Dismiss: Dismiss,
@@ -2621,7 +2634,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.3.43" ).split('.');
+const [major, minor, patch] = ("0.3.45" ).split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,