@stream-io/video-react-sdk 1.21.2 → 1.22.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.22.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.21.3...@stream-io/video-react-sdk-1.22.0) (2025-09-29)
+
+### Dependency Updates
+
+- `@stream-io/video-client` updated to version `1.32.0`
+- `@stream-io/video-react-bindings` updated to version `1.8.4`
+
+### Features
+
+- **egress-composite:** custom actions ([#1926](https://github.com/GetStream/stream-video-js/issues/1926)) ([760a35a](https://github.com/GetStream/stream-video-js/commit/760a35a5a5b450d9cde9398f011b5efba8b44458))
+
+### Bug Fixes
+
+- make `mute all` label translatable ([#1930](https://github.com/GetStream/stream-video-js/issues/1930)) ([1f49368](https://github.com/GetStream/stream-video-js/commit/1f49368643ccf9a4cec643e4bd9e10ddf7635232))
+
+## [1.21.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.21.2...@stream-io/video-react-sdk-1.21.3) (2025-09-17)
+
+### Dependency Updates
+
+- `@stream-io/video-client` updated to version `1.31.0`
+- `@stream-io/video-filters-web` updated to version `0.2.2`
+- `@stream-io/video-react-bindings` updated to version `1.8.3`
+
+### Bug Fixes
+
+- **video-filters:** prevent background tab throttling ([#1920](https://github.com/GetStream/stream-video-js/issues/1920)) ([f93d5cc](https://github.com/GetStream/stream-video-js/commit/f93d5cc5785957c7f181fcaf689ec366df9e646b))
+
 ## [1.21.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.21.1...@stream-io/video-react-sdk-1.21.2) (2025-09-16)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -848,7 +848,7 @@ const useBackgroundFilters = () => {
  * in your project before using this component.
  */
 const BackgroundFiltersProvider = (props) => {
-    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = undefined, tfFilePath, modelFilePath, basePath, onError, } = props;
+    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = undefined, tfFilePath, modelFilePath, basePath, onError, forceSafariSupport, forceMobileSupport, } = props;
     const [backgroundFilter, setBackgroundFilter] = react.useState(bgFilterFromProps);
     const [backgroundImage, setBackgroundImage] = react.useState(bgImageFromProps);
     const [backgroundBlurLevel, setBackgroundBlurLevel] = react.useState(bgBlurLevelFromProps);
@@ -867,8 +867,11 @@ const BackgroundFiltersProvider = (props) => {
     }, []);
     const [isSupported, setIsSupported] = react.useState(false);
     react.useEffect(() => {
-        videoFiltersWeb.isPlatformSupported().then(setIsSupported);
-    }, []);
+        videoFiltersWeb.isPlatformSupported({
+            forceSafariSupport,
+            forceMobileSupport,
+        }).then(setIsSupported);
+    }, [forceMobileSupport, forceSafariSupport]);
     const [tfLite, setTfLite] = react.useState();
     react.useEffect(() => {
         // don't try to load TFLite if the platform is not supported
@@ -1898,10 +1901,11 @@ const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearch
 };
 const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
     const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
     const muteAll = react.useCallback(() => {
         call?.muteAllUsers('audio');
     }, [call]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: "Mute all" }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: t('Mute all') }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
 };
 const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = videoReactBindings.useCallStateHooks();
@@ -2470,15 +2474,26 @@ function applyFilter(obj, filter) {
     }
     return checkConditions(obj, filter);
 }
+const isDateString = (value) => typeof value === 'string' &&
+    /^((?:(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}(?:\.\d+)?))(Z|[+-]\d{2}:\d{2})?)$/.test(value);
 function checkConditions(obj, conditions) {
     let match = true;
     for (const key of Object.keys(conditions)) {
         const operator = conditions[key];
         const maybeOperator = operator && typeof operator === 'object';
-        const value = obj[key];
+        let value = obj[key];
+        if (value instanceof Date) {
+            value = value.getTime();
+        }
+        else if (isDateString(value)) {
+            value = new Date(value).getTime();
+        }
         if (maybeOperator && '$eq' in operator) {
             const eqOperator = operator;
-            match && (match = eqOperator.$eq === value);
+            const eqOperatorValue = isDateString(eqOperator.$eq)
+                ? new Date(eqOperator.$eq).getTime()
+                : eqOperator.$eq;
+            match && (match = eqOperatorValue === value);
         }
         else if (maybeOperator && '$neq' in operator) {
             const neqOperator = operator;
@@ -2497,6 +2512,37 @@ function checkConditions(obj, conditions) {
                 match = false;
             }
         }
+        else if (maybeOperator && '$gt' in operator) {
+            const gtOperator = operator;
+            const gtOperatorValue = isDateString(gtOperator.$gt)
+                ? new Date(gtOperator.$gt).getTime()
+                : gtOperator.$gt;
+            match && (match = value > gtOperatorValue);
+        }
+        else if (maybeOperator && '$gte' in operator) {
+            const gteOperator = operator;
+            const gteOperatorValue = isDateString(gteOperator.$gte)
+                ? new Date(gteOperator.$gte).getTime()
+                : gteOperator.$gte;
+            match && (match = value >= gteOperatorValue);
+        }
+        else if (maybeOperator && '$lt' in operator) {
+            const ltOperator = operator;
+            const ltOperatorValue = isDateString(ltOperator.$lt)
+                ? new Date(ltOperator.$lt).getTime()
+                : ltOperator.$lt;
+            match && (match = value < ltOperatorValue);
+        }
+        else if (maybeOperator && '$lte' in operator) {
+            const lteOperator = operator;
+            const lteOperatorValue = isDateString(lteOperator.$lte)
+                ? new Date(lteOperator.$lte).getTime()
+                : lteOperator.$lte;
+            match && (match = value <= lteOperatorValue);
+            // } else if (maybeOperator && '$autocomplete' in operator) {
+            // TODO: regexp solution maybe?
+            // match &&= false;
+        }
         else {
             const eqValue = operator;
             match && (match = eqValue === value);
@@ -2970,7 +3016,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.21.2").split('.');
+const [major, minor, patch] = ("1.22.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3058,6 +3104,7 @@ exports.Tooltip = Tooltip;
 exports.Video = Video$1;
 exports.VideoPreview = VideoPreview;
 exports.WithTooltip = WithTooltip;
+exports.applyFilter = applyFilter;
 exports.defaultEmojiReactionMap = defaultEmojiReactionMap;
 exports.defaultReactions = defaultReactions;
 exports.translations = translations;