@stream-io/video-react-sdk 1.27.2 → 1.28.1

package/dist/index.cjs.js

@@ -466,6 +466,136 @@ function useDeviceList(devices, selectedDeviceId) {
     }, [devices, selectedDeviceId, t]);
 }
 
+const isFullScreenBlurPlatformSupported = () => {
+    if (typeof window === 'undefined' ||
+        typeof OffscreenCanvas === 'undefined' ||
+        typeof VideoFrame === 'undefined' ||
+        !window.WebGL2RenderingContext) {
+        return false;
+    }
+    try {
+        const canvas = new OffscreenCanvas(1, 1);
+        return !!canvas.getContext('webgl2', {
+            alpha: false,
+            antialias: false,
+            desynchronized: true,
+        });
+    }
+    catch {
+        return false;
+    }
+};
+const useModeration = (options) => {
+    const { duration = 5000 } = options || {};
+    const call = videoReactBindings.useCall();
+    const timeoutRef = react.useRef(null);
+    const processorRef = react.useRef(null);
+    const unregisterRef = react.useRef(null);
+    const blurModulePromise = react.useRef(null);
+    /**
+     * Lazily loads and caches the video-filters-web module.
+     */
+    const loadVideoFiltersWebModule = react.useCallback(() => {
+        if (!blurModulePromise.current) {
+            blurModulePromise.current = import('@stream-io/video-filters-web')
+                .then((module) => module.FullScreenBlur)
+                .catch((error) => {
+                console.error('[moderation] Failed to import blur module:', error);
+                throw error;
+            });
+        }
+        return blurModulePromise.current;
+    }, []);
+    const disableBlur = react.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        unregisterRef
+            .current?.()
+            .catch((err) => console.error('[moderation] unregister error:', err));
+        unregisterRef.current = null;
+    }, []);
+    const handleFallback = react.useCallback(async () => {
+        try {
+            await call?.camera.disable();
+        }
+        catch (error) {
+            console.error('[moderation] Failed to disable camera:', error);
+        }
+    }, [call]);
+    react.useEffect(() => {
+        if (!call)
+            return;
+        return call.on('call.moderation_warning', async () => {
+            try {
+                await loadVideoFiltersWebModule();
+            }
+            catch (importErr) {
+                console.error('[moderation] Failed to import blur module:', importErr);
+            }
+        });
+    }, [call, loadVideoFiltersWebModule]);
+    react.useEffect(() => {
+        if (!call)
+            return;
+        return call.on('call.moderation_blur', async () => {
+            if (unregisterRef.current)
+                return;
+            let FullScreenBlurClass;
+            try {
+                FullScreenBlurClass = await loadVideoFiltersWebModule();
+            }
+            catch (importErr) {
+                console.error('[moderation] Failed to import blur module:', importErr);
+                await handleFallback();
+                return;
+            }
+            if (!isFullScreenBlurPlatformSupported()) {
+                console.warn('[moderation] Blur not supported on this platform');
+                await handleFallback();
+                return;
+            }
+            const { unregister } = call.camera.registerFilter((inputStream) => {
+                unregisterRef.current = unregister;
+                const outputPromise = new Promise(async (resolve, reject) => {
+                    const [track] = inputStream.getVideoTracks();
+                    let processor;
+                    try {
+                        processor = new FullScreenBlurClass(track);
+                        processorRef.current = processor;
+                        const result = await processor.start();
+                        const output = new MediaStream([result]);
+                        resolve(output);
+                        if (duration > 0) {
+                            timeoutRef.current = setTimeout(disableBlur, duration);
+                        }
+                    }
+                    catch (error) {
+                        reject(error);
+                        console.error('[moderation] Processor init failed:', error);
+                        await unregisterRef.current?.();
+                        unregisterRef.current = null;
+                        processorRef.current = null;
+                        await handleFallback();
+                        return;
+                    }
+                });
+                return {
+                    output: outputPromise,
+                    stop: () => {
+                        if (processorRef.current) {
+                            processorRef.current.stop();
+                            processorRef.current = null;
+                        }
+                    },
+                };
+            });
+        });
+    }, [call, loadVideoFiltersWebModule, disableBlur, handleFallback, duration]);
+    react.useEffect(() => disableBlur, [disableBlur]);
+};
+
 exports.MenuVisualType = void 0;
 (function (MenuVisualType) {
     MenuVisualType["PORTAL"] = "portal";
@@ -1656,7 +1786,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.27.2"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.28.1"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1886,7 +2016,7 @@ var Status;
     Status["BAD"] = "Bad";
 })(Status || (Status = {}));
 const CallStats = (props) => {
-    const { latencyLowBound = 75, latencyHighBound = 400, showCodecInfo = false, LatencyChartSuspenseFallback = null, } = props;
+    const { latencyLowBound = 75, latencyHighBound = 400, audioJitterLowBound = 10, audioJitterHighBound = 30, videoJitterLowBound = 20, videoJitterHighBound = 50, showCodecInfo = false, LatencyChartSuspenseFallback = null, } = props;
     const [latencyBuffer, setLatencyBuffer] = react.useState(() => {
         const now = Date.now();
         return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
@@ -1894,6 +2024,8 @@ const CallStats = (props) => {
     const { t } = videoReactBindings.useI18n();
     const [publishBitrate, setPublishBitrate] = react.useState('-');
     const [subscribeBitrate, setSubscribeBitrate] = react.useState('-');
+    const [publishAudioBitrate, setPublishAudioBitrate] = react.useState('-');
+    const [subscribeAudioBitrate, setSubscribeAudioBitrate] = react.useState('-');
     const previousStats = react.useRef(undefined);
     const { useCallStatsReport } = videoReactBindings.useCallStateHooks();
     const callStatsReport = useCallStatsReport();
@@ -1911,11 +2043,18 @@ const CallStats = (props) => {
         setSubscribeBitrate(() => {
             return calculateSubscribeBitrate(previousCallStatsReport, callStatsReport);
         });
+        setPublishAudioBitrate(() => {
+            return calculatePublishAudioBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setSubscribeAudioBitrate(() => {
+            return calculateSubscribeAudioBitrate(previousCallStatsReport, callStatsReport);
+        });
         setLatencyBuffer((latencyBuf) => {
             const newLatencyBuffer = latencyBuf.slice(-19);
             newLatencyBuffer.push({
                 x: callStatsReport.timestamp,
-                y: callStatsReport.publisherStats.averageRoundTripTimeInMs,
+                y: callStatsReport.publisherStats.averageRoundTripTimeInMs ||
+                    callStatsReport.publisherAudioStats.averageRoundTripTimeInMs,
             });
             return newLatencyBuffer;
         });
@@ -1926,13 +2065,27 @@ const CallStats = (props) => {
         highBound: latencyHighBound,
         value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
     };
-    return (jsxRuntime.jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__latencychart", children: jsxRuntime.jsx(react.Suspense, { fallback: LatencyChartSuspenseFallback, children: jsxRuntime.jsx(CallStatsLatencyChart, { values: latencyBuffer }) }) }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Call performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
-                                ...latencyComparison,
+    const audioJitterComparison = {
+        lowBound: audioJitterLowBound,
+        highBound: audioJitterHighBound,
+    };
+    const videoJitterComparison = {
+        lowBound: videoJitterLowBound,
+        highBound: videoJitterHighBound,
+    };
+    return (jsxRuntime.jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__latencychart", children: jsxRuntime.jsx(react.Suspense, { fallback: LatencyChartSuspenseFallback, children: jsxRuntime.jsx(CallStatsLatencyChart, { values: latencyBuffer }) }) }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Video performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
+                                ...videoJitterComparison,
                                 value: callStatsReport.subscriberStats.averageJitterInMs,
                             } }), jsxRuntime.jsx(StatCard, { label: t('Publish jitter'), value: `${callStatsReport.publisherStats.averageJitterInMs} ms.`, comparison: {
-                                ...latencyComparison,
+                                ...videoJitterComparison,
                                 value: callStatsReport.publisherStats.averageJitterInMs,
-                            } }), jsxRuntime.jsx(StatCard, { label: `${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`, value: toFrameSize(callStatsReport.publisherStats) }), jsxRuntime.jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsxRuntime.jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsxRuntime.jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] })] })) }));
+                            } }), jsxRuntime.jsx(StatCard, { label: `${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`, value: toFrameSize(callStatsReport.publisherStats) }), jsxRuntime.jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsxRuntime.jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsxRuntime.jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "mic" }), t('Audio Performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key audio data points below to assess audio performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherAudioStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Audio bitrate (publish)'), value: publishAudioBitrate }), jsxRuntime.jsx(StatCard, { label: t('Audio bitrate (receive)'), value: subscribeAudioBitrate }), jsxRuntime.jsx(StatCard, { label: t('Audio jitter (publish)'), value: `${callStatsReport.publisherAudioStats.averageJitterInMs} ms.`, comparison: {
+                                ...audioJitterComparison,
+                                value: callStatsReport.publisherAudioStats.averageJitterInMs,
+                            } }), jsxRuntime.jsx(StatCard, { label: t('Audio jitter (receive)'), value: `${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`, comparison: {
+                                ...audioJitterComparison,
+                                value: callStatsReport.subscriberAudioStats.averageJitterInMs,
+                            } }), jsxRuntime.jsx(StatCard, { label: t('Audio codec'), value: formatAudioCodec(callStatsReport) })] })] })) }));
 };
 const StatCardExplanation = (props) => {
     const { description } = props;
@@ -1988,6 +2141,14 @@ const formatCodec = (callStatsReport) => {
     const [, name] = codecPerTrackType[videoClient.SfuModels.TrackType.VIDEO].split('/');
     return name ? ` (${name})` : '';
 };
+const formatAudioCodec = (callStatsReport) => {
+    const { codecPerTrackType } = callStatsReport.publisherAudioStats;
+    if (!codecPerTrackType || !codecPerTrackType[videoClient.SfuModels.TrackType.AUDIO]) {
+        return '';
+    }
+    const [, name] = codecPerTrackType[videoClient.SfuModels.TrackType.AUDIO].split('/');
+    return name ?? '';
+};
 const calculatePublishBitrate = (previousCallStatsReport, callStatsReport) => {
     const { publisherStats: { totalBytesSent: previousTotalBytesSent, timestamp: previousTimestamp, }, } = previousCallStatsReport;
     const { publisherStats: { totalBytesSent, timestamp }, } = callStatsReport;
@@ -2002,6 +2163,20 @@ const calculateSubscribeBitrate = (previousCallStatsReport, callStatsReport) =>
     const timeElapsed = timestamp - previousTimestamp;
     return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
 };
+const calculatePublishAudioBitrate = (previousCallStatsReport, callStatsReport) => {
+    const previousAudioStats = previousCallStatsReport.publisherAudioStats;
+    const audioStats = callStatsReport.publisherAudioStats;
+    const bytesSent = audioStats.totalBytesSent - previousAudioStats.totalBytesSent;
+    const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
+    return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+const calculateSubscribeAudioBitrate = (previousCallStatsReport, callStatsReport) => {
+    const previousAudioStats = previousCallStatsReport.subscriberAudioStats;
+    const audioStats = callStatsReport.subscriberAudioStats;
+    const bytesReceived = audioStats.totalBytesReceived - previousAudioStats.totalBytesReceived;
+    const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
+    return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
+};
 
 const CallStatsButton = () => (jsxRuntime.jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton, children: jsxRuntime.jsx(CallStats, {}) }));
 const ToggleMenuButton = react.forwardRef(function ToggleMenuButton(props, ref) {
@@ -2901,7 +3076,7 @@ const LivestreamLayout = (props) => {
         : undefined;
     usePaginatedLayoutSortPreset(call);
     const { floatingParticipantProps, muted, ParticipantViewUI } = props;
-    const overlay = ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const overlay = ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showMuteButton: props.showMuteButton, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
     const floatingParticipantOverlay = hasOngoingScreenShare &&
         (ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay
         // these elements aren't needed for the video feed
@@ -2915,7 +3090,7 @@ const LivestreamLayout = (props) => {
 };
 LivestreamLayout.displayName = 'LivestreamLayout';
 const BackstageLayout = (props) => {
-    const { showEarlyParticipantCount = true } = props;
+    const { showEarlyParticipantCount = true, humanizeParticipantCount = true } = props;
     const { useParticipantCount, useCallStartsAt } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const startsAt = useCallStartsAt();
@@ -2923,24 +3098,32 @@ const BackstageLayout = (props) => {
     return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__starts-at", children: startsAt.getTime() < Date.now()
                         ? t('Livestream starts soon')
                         : t('Livestream starts at {{ startsAt }}', { startsAt }) })), showEarlyParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
-                        count: participantCount,
+                        count: humanizeParticipantCount
+                            ? videoClient.humanize(participantCount)
+                            : participantCount,
                     }) }))] }) }));
 };
 BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props) => {
-    const { enableFullScreen = true, showParticipantCount = true, showDuration = true, showLiveBadge = true, showSpeakerName = false, } = props;
+    const { enableFullScreen = true, showParticipantCount = true, humanizeParticipantCount = true, showDuration = true, showLiveBadge = true, showMuteButton = true, showSpeakerName = false, } = props;
     const overlayBarVisible = enableFullScreen ||
         showParticipantCount ||
         showDuration ||
         showLiveBadge ||
+        showMuteButton ||
         showSpeakerName;
     const { participant } = useParticipantViewContext();
-    const { useParticipantCount } = videoReactBindings.useCallStateHooks();
+    const { useParticipantCount, useSpeakerState } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const duration = useUpdateCallDuration();
     const toggleFullScreen = useToggleFullScreen();
+    const { speaker, volume } = useSpeakerState();
+    const isSpeakerMuted = volume === 0;
     const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })) }));
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
+                        ? videoClient.humanize(participantCount)
+                        : participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), showMuteButton && (jsxRuntime.jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+                        'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
@@ -3269,7 +3452,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.27.2").split('.');
+const [major, minor, patch] = ("1.28.1").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3368,6 +3551,7 @@ exports.useDeviceList = useDeviceList;
 exports.useFilteredParticipants = useFilteredParticipants;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
 exports.useMenuContext = useMenuContext;
+exports.useModeration = useModeration;
 exports.useNoiseCancellation = useNoiseCancellation;
 exports.useParticipantViewContext = useParticipantViewContext;
 exports.usePersistedDevicePreferences = usePersistedDevicePreferences;