@stream-io/video-react-bindings 0.2.33 → 0.2.35

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.2.35](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.2.34...@stream-io/video-react-bindings-0.2.35) (2023-10-18)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.3.34`
+
+### Features
+
+* **build:** ESM and CJS bundles ([#1144](https://github.com/GetStream/stream-video-js/issues/1144)) ([58b60ee](https://github.com/GetStream/stream-video-js/commit/58b60eee4b1cd667d2eef8f17ed4e6da74876a51)), closes [#1025](https://github.com/GetStream/stream-video-js/issues/1025)
+
+### [0.2.34](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.2.33...@stream-io/video-react-bindings-0.2.34) (2023-10-13)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.3.33`
 ### [0.2.33](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.2.32...@stream-io/video-react-bindings-0.2.33) (2023-10-13)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -0,0 +1,609 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var i18next = require('i18next');
+var videoClient = require('@stream-io/video-client');
+
+const StreamCallContext = react.createContext(undefined);
+/**
+ *
+ * @param props
+ * @returns
+ *
+ * @category Call State
+ *
+ * @react If you're using the React SDK we recommend using the `StreamCall` component that wraps the `StreamCallProvider`. You only need to use the `StreamCallProvider` for advanced use-cases.
+ */
+const StreamCallProvider = (props) => {
+    const { call, children } = props;
+    return (jsxRuntime.jsx(StreamCallContext.Provider, { value: call, children: children }));
+};
+/**
+ *
+ * @returns
+ *
+ * @category Call State
+ */
+const useCall = () => {
+    return react.useContext(StreamCallContext);
+};
+
+const mapToRegistry = (translationsMap, namespace) => Object.entries(translationsMap).reduce((acc, [lng, translations]) => {
+    acc[lng] = { [namespace]: translations };
+    return acc;
+}, {});
+
+const DEFAULT_LANGUAGE = 'en';
+const DEFAULT_NAMESPACE = 'stream-video';
+const DEFAULT_CONFIG = {
+    debug: false,
+    currentLanguage: DEFAULT_LANGUAGE,
+};
+const DEFAULT_TRANSLATIONS_REGISTRY = mapToRegistry({}, DEFAULT_NAMESPACE);
+const defaultTranslationFunction = (key) => key;
+class StreamI18n {
+    /** Simple logger function */
+    constructor(options = {}) {
+        /** Translator function that converts the provided string into its equivalent in the current language. */
+        this.t = defaultTranslationFunction;
+        this.init = async () => {
+            try {
+                this.t = await this.i18nInstance.init();
+            }
+            catch (e) {
+                console.error(`Failed to initialize translations: ${JSON.stringify(e)}`);
+            }
+            return this;
+        };
+        this.changeLanguage = async (language, onChange) => {
+            if (!this._checkIsInitialized())
+                return;
+            // i18next detects the language, if none provided, but it is better
+            // to show this detection here explicitly
+            const browserLanguage = typeof window !== 'undefined' && window.navigator
+                ? window.navigator.language
+                : undefined;
+            await this.i18nInstance.changeLanguage(language || browserLanguage);
+            onChange?.(this.currentLanguage);
+        };
+        this.registerTranslationsForLanguage = ({ lng, translations, }) => {
+            if (!this._checkIsInitialized())
+                return;
+            this.i18nInstance.addResourceBundle(lng, DEFAULT_NAMESPACE, translations, true, true);
+        };
+        this._checkIsInitialized = () => {
+            if (!this.i18nInstance.isInitialized) {
+                console.warn('I18n instance is not initialized. Call yourStreamI18nInstance.init().');
+            }
+            return this.i18nInstance.isInitialized;
+        };
+        const { debug = DEFAULT_CONFIG.debug, currentLanguage = DEFAULT_CONFIG.currentLanguage, translationsOverrides, } = options;
+        this.i18nInstance = i18next.createInstance({
+            debug,
+            defaultNS: DEFAULT_NAMESPACE,
+            fallbackLng: false,
+            interpolation: { escapeValue: false },
+            keySeparator: false,
+            lng: currentLanguage,
+            nsSeparator: false,
+            parseMissingKeyHandler: (key) => {
+                return key;
+            },
+            resources: DEFAULT_TRANSLATIONS_REGISTRY,
+        });
+        if (translationsOverrides) {
+            this.i18nInstance.on('initialized', () => {
+                Object.entries(translationsOverrides).forEach(([lng, translations]) => {
+                    this.registerTranslationsForLanguage({ lng, translations });
+                });
+            });
+        }
+    }
+    get currentLanguage() {
+        this._checkIsInitialized();
+        return this.i18nInstance.language;
+    }
+    get isInitialized() {
+        return this.i18nInstance.isInitialized;
+    }
+}
+
+const StreamI18nContext = react.createContext({
+    t: defaultTranslationFunction,
+});
+const StreamI18nProvider = ({ children, ...createI18nParams }) => {
+    const { i18n, t } = useCreateI18n(createI18nParams);
+    return (jsxRuntime.jsx(StreamI18nContext.Provider, { value: { t, i18n }, children: children }));
+};
+const useCreateI18n = ({ i18nInstance, language, translationsOverrides, }) => {
+    const [i18n] = react.useState(() => i18nInstance ||
+        new StreamI18n({ currentLanguage: language, translationsOverrides }));
+    const [t, setTranslationFn] = react.useState(() => defaultTranslationFunction);
+    react.useEffect(() => {
+        const { isInitialized } = i18n;
+        if (!isInitialized) {
+            i18n.init().then((_i18n) => setTranslationFn(() => _i18n.i18nInstance.t));
+            return;
+        }
+        if (language && i18n?.currentLanguage !== language) {
+            i18n.changeLanguage(language).catch((err) => {
+                console.log('Error while changing language', err);
+            });
+        }
+    }, [i18n, i18nInstance, language, translationsOverrides]);
+    return { i18n, t };
+};
+const useI18n = () => react.useContext(StreamI18nContext);
+
+const StreamVideoContext = react.createContext(undefined);
+/**
+ * StreamVideo is a provider component which should be used to wrap the entire application.
+ * It provides the client object to all children components and initializes the i18n instance.
+ *  @param PropsWithChildren<StreamVideoProps>
+ *  @category Client State
+ */
+const StreamVideoProvider = ({ children, client, i18nInstance, language, translationsOverrides, }) => {
+    return (jsxRuntime.jsx(StreamVideoContext.Provider, { value: client, children: jsxRuntime.jsx(StreamI18nProvider, { i18nInstance: i18nInstance, language: language, translationsOverrides: translationsOverrides, children: children }) }));
+};
+/**
+ *
+ * @returns
+ *
+ * @category Client State
+ */
+const useStreamVideoClient = () => {
+    return react.useContext(StreamVideoContext);
+};
+
+/**
+ * Utility hook which provides the current value of the given observable.
+ * @internal
+ */
+const useObservableValue = (observable$) => {
+    const [value, setValue] = react.useState(() => videoClient.RxUtils.getCurrentValue(observable$));
+    react.useEffect(() => {
+        const subscription = observable$.subscribe(setValue);
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [observable$]);
+    return value;
+};
+
+/**
+ * Utility hook, which provides the current call's state.
+ *
+ * @category Call State
+ */
+const useCallState = () => {
+    const call = useCall();
+    // return an empty and unlinked CallState object if there is no call in the provider
+    // this ensures that the hooks always return a value and many null checks can be avoided
+    if (!call) {
+        const message = 'You are using useCallState() outside a Call context. ' +
+            'Please wrap your component in <StreamCall /> and provide a "call" instance.';
+        console.warn(message);
+        return new videoClient.CallState();
+    }
+    return call.state;
+};
+/**
+ * Utility hook which provides information whether the current call is being recorded. It will return `true` if the call is being recorded.
+ *
+ * @category Call State
+ */
+const useIsCallRecordingInProgress = () => {
+    const { recording$ } = useCallState();
+    return useObservableValue(recording$);
+};
+/**
+ * Utility hook which provides information whether the current call is broadcasting.
+ *
+ * @category Call State
+ */
+const useIsCallBroadcastingInProgress = () => {
+    const { egress$ } = useCallState();
+    const egress = useObservableValue(egress$);
+    if (!egress)
+        return false;
+    return egress.broadcasting;
+};
+/**
+ * Utility hook which provides information whether the current call is live.
+ *
+ * @category Call State
+ */
+const useIsCallLive = () => {
+    const { backstage$ } = useCallState();
+    const isBackstageOn = useObservableValue(backstage$);
+    return !isBackstageOn;
+};
+/**
+ * Returns the list of blocked users in the current call.
+ */
+const useCallBlockedUserIds = () => {
+    const { blockedUserIds$ } = useCallState();
+    return useObservableValue(blockedUserIds$);
+};
+/**
+ * Returns the timestamp when this call was created.
+ */
+const useCallCreatedAt = () => {
+    const { createdAt$ } = useCallState();
+    return useObservableValue(createdAt$);
+};
+/**
+ * Returns the timestamp when this call was ended.
+ */
+const useCallEndedAt = () => {
+    const { endedAt$ } = useCallState();
+    return useObservableValue(endedAt$);
+};
+/**
+ * Returns the timestamp telling when the call is scheduled to start.
+ */
+const useCallStartsAt = () => {
+    const { startsAt$ } = useCallState();
+    return useObservableValue(startsAt$);
+};
+/**
+ * Returns the timestamp when this call was updated.
+ */
+const useCallUpdatedAt = () => {
+    const { updatedAt$ } = useCallState();
+    return useObservableValue(updatedAt$);
+};
+/**
+ * Returns the information about the call's creator.
+ */
+const useCallCreatedBy = () => {
+    const { createdBy$ } = useCallState();
+    return useObservableValue(createdBy$);
+};
+/**
+ * Returns the call's custom data.
+ */
+const useCallCustomData = () => {
+    const { custom$ } = useCallState();
+    return useObservableValue(custom$);
+};
+/**
+ * Returns the call's Egress information.
+ */
+const useCallEgress = () => {
+    const { egress$ } = useCallState();
+    return useObservableValue(egress$);
+};
+/**
+ * Returns the call's Ingress information.
+ */
+const useCallIngress = () => {
+    const { ingress$ } = useCallState();
+    return useObservableValue(ingress$);
+};
+/**
+ * Returns the data for the current call session.
+ */
+const useCallSession = () => {
+    const { session$ } = useCallState();
+    return useObservableValue(session$);
+};
+/**
+ * Returns the call's settings.
+ */
+const useCallSettings = () => {
+    const { settings$ } = useCallState();
+    return useObservableValue(settings$);
+};
+/**
+ * Returns whether the call has transcribing enabled.
+ */
+const useIsCallTranscribingInProgress = () => {
+    const { transcribing$ } = useCallState();
+    return useObservableValue(transcribing$);
+};
+/**
+ * Returns information about the user who has marked this call as ended.
+ */
+const useCallEndedBy = () => {
+    const { endedBy$ } = useCallState();
+    return useObservableValue(endedBy$);
+};
+/**
+ * Utility hook which provides a boolean indicating whether there is
+ * a participant in the current call which shares their screen.
+ *
+ * @category Call State
+ */
+const useHasOngoingScreenShare = () => {
+    const { hasOngoingScreenShare$ } = useCallState();
+    return useObservableValue(hasOngoingScreenShare$);
+};
+/**
+ * Utility hook which provides the latest stats report of the current call.
+ *
+ * The latest stats report of the current call.
+ * When stats gathering is enabled, this observable will emit a new value
+ * at a regular (configurable) interval.
+ *
+ * Consumers of this observable can implement their own batching logic
+ * in case they want to show historical stats data.
+ *
+ * @category Call State
+ */
+const useCallStatsReport = () => {
+    const { callStatsReport$ } = useCallState();
+    return useObservableValue(callStatsReport$);
+};
+/**
+ * Utility hook which provides the dominant speaker of the current call.
+ *
+ * @category Call State
+ */
+const useDominantSpeaker = () => {
+    const { dominantSpeaker$ } = useCallState();
+    return useObservableValue(dominantSpeaker$);
+};
+/**
+ * Utility hook which provides a list of call members.
+ *
+ * @category Call State
+ */
+const useCallMembers = () => {
+    const { members$ } = useCallState();
+    return useObservableValue(members$);
+};
+/**
+ * Utility hook providing the current calling state of the call. For example, `RINGING` or `JOINED`.
+ *
+ * @category Call State
+ */
+const useCallCallingState = () => {
+    const { callingState$ } = useCallState();
+    return useObservableValue(callingState$);
+};
+/**
+ * Utility hook providing the actual start time of the current session.
+ * Useful for calculating the call duration.
+ *
+ * @category Call State
+ */
+const useCallStartedAt = () => {
+    const { startedAt$ } = useCallState();
+    return useObservableValue(startedAt$);
+};
+/**
+ * A hook which provides a list of all participants that have joined an active call.
+ *
+ * @category Call State
+ *
+ * @param options.sortBy - A comparator function to sort the participants by.
+ * Make sure to memoize output of the `combineComparators` function
+ * (or keep it out of component's scope if possible) before passing it down to this property.
+ */
+const useParticipants = ({ sortBy, } = {}) => {
+    const { participants$ } = useCallState();
+    const participants = useObservableValue(participants$);
+    return react.useMemo(() => {
+        if (sortBy) {
+            return [...participants].sort(sortBy);
+        }
+        return participants;
+    }, [participants, sortBy]);
+};
+/**
+ * A hook which provides a StreamVideoLocalParticipant object.
+ * It signals that I have joined a call.
+ *
+ * @category Call State
+ */
+const useLocalParticipant = () => {
+    const { localParticipant$ } = useCallState();
+    return useObservableValue(localParticipant$);
+};
+/**
+ * A hook which provides a list of all other participants than me that have joined an active call.
+ *
+ * @category Call State
+ */
+const useRemoteParticipants = () => {
+    const { remoteParticipants$ } = useCallState();
+    return useObservableValue(remoteParticipants$);
+};
+/**
+ * Returns the approximate participant count of the active call.
+ * This includes the anonymous users as well, and it is computed on the server.
+ *
+ * @category Call State
+ */
+const useParticipantCount = () => {
+    const { participantCount$ } = useCallState();
+    return useObservableValue(participantCount$);
+};
+/**
+ * Returns the approximate anonymous participant count of the active call.
+ * The regular participants are not included in this count. It is computed on the server.
+ *
+ * @category Call State
+ */
+const useAnonymousParticipantCount = () => {
+    const { anonymousParticipantCount$ } = useCallState();
+    return useObservableValue(anonymousParticipantCount$);
+};
+/**
+ * Returns the generated thumbnail of the current call, if enabled in settings.
+ */
+const useCallThumbnail = () => {
+    const { thumbnails$ } = useCallState();
+    return useObservableValue(thumbnails$);
+};
+/**
+ * Returns the camera state of the current call.
+ *
+ * @category Camera Manager State
+ *
+ */
+const useCameraState = () => {
+    const call = useCall();
+    const { camera } = call;
+    const status = useObservableValue(camera.state.status$);
+    const direction = useObservableValue(camera.state.direction$);
+    return {
+        status,
+        direction,
+    };
+};
+/**
+ * Returns the microphone state of the current call.
+ *
+ * @category Microphone Manager State
+ */
+const useMicrophoneState = () => {
+    const call = useCall();
+    const { microphone } = call;
+    const status = useObservableValue(microphone.state.status$);
+    const selectedDevice = useObservableValue(microphone.state.selectedDevice$);
+    return {
+        status,
+        selectedDevice,
+    };
+};
+const useScreenShareState = () => {
+    const call = useCall();
+    const { screenShare } = call;
+    const status = useObservableValue(screenShare.state.status$);
+    return {
+        status,
+    };
+};
+
+var CallStateHooks = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    useAnonymousParticipantCount: useAnonymousParticipantCount,
+    useCallBlockedUserIds: useCallBlockedUserIds,
+    useCallCallingState: useCallCallingState,
+    useCallCreatedAt: useCallCreatedAt,
+    useCallCreatedBy: useCallCreatedBy,
+    useCallCustomData: useCallCustomData,
+    useCallEgress: useCallEgress,
+    useCallEndedAt: useCallEndedAt,
+    useCallEndedBy: useCallEndedBy,
+    useCallIngress: useCallIngress,
+    useCallMembers: useCallMembers,
+    useCallSession: useCallSession,
+    useCallSettings: useCallSettings,
+    useCallStartedAt: useCallStartedAt,
+    useCallStartsAt: useCallStartsAt,
+    useCallState: useCallState,
+    useCallStatsReport: useCallStatsReport,
+    useCallThumbnail: useCallThumbnail,
+    useCallUpdatedAt: useCallUpdatedAt,
+    useCameraState: useCameraState,
+    useDominantSpeaker: useDominantSpeaker,
+    useHasOngoingScreenShare: useHasOngoingScreenShare,
+    useIsCallBroadcastingInProgress: useIsCallBroadcastingInProgress,
+    useIsCallLive: useIsCallLive,
+    useIsCallRecordingInProgress: useIsCallRecordingInProgress,
+    useIsCallTranscribingInProgress: useIsCallTranscribingInProgress,
+    useLocalParticipant: useLocalParticipant,
+    useMicrophoneState: useMicrophoneState,
+    useParticipantCount: useParticipantCount,
+    useParticipants: useParticipants,
+    useRemoteParticipants: useRemoteParticipants,
+    useScreenShareState: useScreenShareState
+});
+
+/**
+ * Hook that returns true if the local participant has all the given permissions.
+ *
+ * @param permissions the permissions to check.
+ *
+ * @category Call State
+ */
+const useHasPermissions = (...permissions) => {
+    const capabilities = useOwnCapabilities();
+    return permissions.every((permission) => capabilities?.includes(permission));
+};
+/**
+ * A hook which returns the local participant's own capabilities.
+ *
+ * @category Call State
+ */
+const useOwnCapabilities = () => {
+    const { ownCapabilities$ } = useCallState();
+    return useObservableValue(ownCapabilities$);
+};
+
+/**
+ * Utility hook which provides access to client's state store.
+ */
+const useStore = () => {
+    const client = useStreamVideoClient();
+    if (!client) {
+        throw new Error(`StreamVideoClient isn't initialized or this hook is called outside of <StreamVideo> context.`);
+    }
+    return client.readOnlyStateStore;
+};
+/**
+ * Utility hook which provides a list of all notifications about created calls.
+ * In the ring call settings, these calls can be outgoing (I have called somebody)
+ * or incoming (somebody has called me).
+ *
+ * @category Client State
+ */
+const useCalls = () => {
+    const { calls$ } = useStore();
+    return useObservableValue(calls$);
+};
+/**
+ * Returns the current connected user.
+ *
+ * @category Client State
+ */
+const useConnectedUser = () => {
+    const { connectedUser$ } = useStore();
+    return useObservableValue(connectedUser$);
+};
+
+/**
+ * A hook-alike function that exposes all call state hooks.
+ *
+ * @category Call State
+ */
+const useCallStateHooks = () => CallStateHooks;
+
+const Restricted = ({ canRequestOnly, hasPermissionsOnly, requiredGrants, requireAll = true, children, }) => {
+    const call = useCall();
+    const ownCapabilities = useOwnCapabilities();
+    const hasPermissions = requiredGrants[requireAll ? 'every' : 'some']((capability) => ownCapabilities?.includes(capability));
+    if (hasPermissionsOnly)
+        return hasPermissions ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) : null;
+    const canRequest = requiredGrants.some((capability) => !!call && call.permissionsContext.canRequest(capability));
+    if (canRequestOnly)
+        return canRequest ? jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) : null;
+    if (hasPermissions || canRequest)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    return null;
+};
+
+exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
+exports.DEFAULT_NAMESPACE = DEFAULT_NAMESPACE;
+exports.Restricted = Restricted;
+exports.StreamCallProvider = StreamCallProvider;
+exports.StreamI18n = StreamI18n;
+exports.StreamI18nProvider = StreamI18nProvider;
+exports.StreamVideoProvider = StreamVideoProvider;
+exports.defaultTranslationFunction = defaultTranslationFunction;
+exports.mapToRegistry = mapToRegistry;
+exports.useCall = useCall;
+exports.useCallStateHooks = useCallStateHooks;
+exports.useCalls = useCalls;
+exports.useConnectedUser = useConnectedUser;
+exports.useCreateI18n = useCreateI18n;
+exports.useHasPermissions = useHasPermissions;
+exports.useI18n = useI18n;
+exports.useOwnCapabilities = useOwnCapabilities;
+exports.useStore = useStore;
+exports.useStreamVideoClient = useStreamVideoClient;
+//# sourceMappingURL=index.cjs.js.map