@stream-io/video-react-sdk 0.6.10 → 0.6.12

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.6.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.6.11...@stream-io/video-react-sdk-0.6.12) (2024-04-25)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.7.8`
+* `@stream-io/video-react-bindings` updated to version `0.4.19`
+* `@stream-io/audio-filters-web` updated to version `0.0.1`
+
+### Features
+
+* Noise Cancellation ([#1321](https://github.com/GetStream/stream-video-js/issues/1321)) ([9144385](https://github.com/GetStream/stream-video-js/commit/91443852986ad7453d82efb900626266d8df0e96))
+
+### [0.6.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.6.10...@stream-io/video-react-sdk-0.6.11) (2024-04-25)
+
+
+### Bug Fixes
+
+* **filters:** Synchronize filter loading and unloading ([#1326](https://github.com/GetStream/stream-video-js/issues/1326)) ([cfab745](https://github.com/GetStream/stream-video-js/commit/cfab7455cfde6d7161ac823dc338e51bea00bcce))
+
 ### [0.6.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.6.9...@stream-io/video-react-sdk-0.6.10) (2024-04-23)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -127,21 +127,24 @@ const BackgroundFilters = (props) => {
     const [canvasRef, setCanvasRef] = react.useState(null);
     const [width, setWidth] = react.useState(1920);
     const [height, setHeight] = react.useState(1080);
-    const resolveFilterRef = react.useRef();
+    // Holds a ref to the `resolve` function of the returned Promise as part
+    // of the `camera.registerFilter()` API. Once the filter is initialized,
+    // it should be called with the filtered MediaStream as an argument.
+    const signalFilterReadyRef = react.useRef();
     const [mediaStream, setMediaStream] = react.useState();
-    const registerFilterRef = react.useRef(Promise.resolve(async () => { }));
+    const unregister = react.useRef();
     react.useEffect(() => {
         if (!call || !backgroundFilter)
             return;
-        registerFilterRef.current = registerFilterRef.current.then(() => call.camera.registerFilter(async (ms) => {
+        const register = (unregister.current || Promise.resolve()).then(() => call.camera.registerFilter(async (ms) => {
             return new Promise((resolve) => {
                 setMediaStream(ms);
-                resolveFilterRef.current = resolve;
+                signalFilterReadyRef.current = resolve;
             });
         }));
         return () => {
-            registerFilterRef.current
-                .then((unregister) => unregister())
+            unregister.current = register
+                .then((unregisterFilter) => unregisterFilter())
                 .then(() => setMediaStream(undefined))
                 .catch((err) => console.error('Failed to unregister filter', err));
         };
@@ -156,7 +159,7 @@ const BackgroundFilters = (props) => {
                 setWidth(w);
                 setHeight(h);
             }
-            const resolveFilter = resolveFilterRef.current;
+            const resolveFilter = signalFilterReadyRef.current;
             if (!resolveFilter)
                 return;
             const filter = canvasRef.captureStream();
@@ -1544,6 +1547,67 @@ const CallRecordingList = ({ callRecordings, CallRecordingListHeader: CallRecord
     return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list", children: [jsxRuntime.jsx(CallRecordingListHeader$1, { callRecordings: callRecordings, onRefresh: onRefresh }), jsxRuntime.jsx("div", { className: "str-video__call-recording-list__listing", children: loading ? (jsxRuntime.jsx(LoadingCallRecordingList, { callRecordings: callRecordings })) : callRecordings.length ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ul", { className: "str-video__call-recording-list__list", children: jsxRuntime.jsxs("li", { className: "str-video__call-recording-list__item", children: [jsxRuntime.jsx("div", { className: "str-video__call-recording-list__filename", children: "Name" }), jsxRuntime.jsx("div", { className: "str-video__call-recording-list__time", children: "Start time" }), jsxRuntime.jsx("div", { className: "str-video__call-recording-list__time", children: "End time" }), jsxRuntime.jsx("div", { className: "str-video__call-recording-list__download" })] }) }), jsxRuntime.jsx("ul", { className: "str-video__call-recording-list__list", children: callRecordings.map((recording) => (jsxRuntime.jsx(CallRecordingListItem$1, { recording: recording }, recording.filename))) })] })) : (jsxRuntime.jsx(EmptyCallRecordingList, {})) })] }));
 };
 
+const NoiseCancellationContext = react.createContext(null);
+/**
+ * Exposes the NoiseCancellation API.
+ * Throws an error if used outside <NoiseCancellationProvider />.
+ */
+const useNoiseCancellation = () => {
+    const context = react.useContext(NoiseCancellationContext);
+    if (!context) {
+        throw new Error('useNoiseCancellation must be used within a NoiseCancellationProvider');
+    }
+    return context;
+};
+const NoiseCancellationProvider = (props) => {
+    const { children, noiseCancellation } = props;
+    const call = videoReactBindings.useCall();
+    const { useCallSettings, useHasPermissions } = videoReactBindings.useCallStateHooks();
+    const settings = useCallSettings();
+    const noiseCancellationAllowed = !!(settings &&
+        settings.audio.noise_cancellation &&
+        settings.audio.noise_cancellation.mode !==
+            videoClient.NoiseCancellationSettingsModeEnum.DISABLED);
+    const hasCapability = useHasPermissions(videoClient.OwnCapability.ENABLE_NOISE_CANCELLATION);
+    const isSupported = hasCapability &&
+        noiseCancellationAllowed &&
+        noiseCancellation.isSupported();
+    const [isEnabled, setIsEnabled] = react.useState(false);
+    const deinit = react.useRef();
+    react.useEffect(() => {
+        if (!call || !isSupported)
+            return;
+        const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));
+        const init = (deinit.current || Promise.resolve())
+            .then(() => noiseCancellation.init())
+            .then(() => call.microphone.enableNoiseCancellation(noiseCancellation))
+            .catch((err) => console.error(`Can't initialize noise suppression`, err));
+        return () => {
+            deinit.current = init
+                .then(() => call.microphone.disableNoiseCancellation())
+                .then(() => noiseCancellation.dispose())
+                .then(() => unsubscribe());
+        };
+    }, [call, isSupported, noiseCancellation]);
+    return (jsxRuntime.jsx(NoiseCancellationContext.Provider, { value: {
+            isSupported,
+            isEnabled,
+            setEnabled: (enabledOrSetter) => {
+                if (!noiseCancellation)
+                    return;
+                const enable = typeof enabledOrSetter === 'function'
+                    ? enabledOrSetter(isEnabled)
+                    : enabledOrSetter;
+                if (enable) {
+                    noiseCancellation.enable();
+                }
+                else {
+                    noiseCancellation.disable();
+                }
+            },
+        }, children: children }));
+};
+
 const RingingCallControls = () => {
     const call = videoReactBindings.useCall();
     const { useCallCallingState } = videoReactBindings.useCallStateHooks();
@@ -2433,7 +2497,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.6.10" ).split('.');
+const [major, minor, patch] = ("0.6.12" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -2481,6 +2545,7 @@ exports.LivestreamLayout = LivestreamLayout;
 exports.LoadingCallRecordingListing = LoadingCallRecordingListing;
 exports.LoadingIndicator = LoadingIndicator;
 exports.MenuToggle = MenuToggle;
+exports.NoiseCancellationProvider = NoiseCancellationProvider;
 exports.Notification = Notification;
 exports.PaginatedGridLayout = PaginatedGridLayout;
 exports.ParticipantActionsContextMenu = ParticipantActionsContextMenu;
@@ -2524,6 +2589,7 @@ exports.translations = translations;
 exports.useBackgroundFilters = useBackgroundFilters;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
 exports.useMenuContext = useMenuContext;
+exports.useNoiseCancellation = useNoiseCancellation;
 exports.useParticipantViewContext = useParticipantViewContext;
 exports.usePersistedDevicePreferences = usePersistedDevicePreferences;
 exports.useRequestPermission = useRequestPermission;