@microsoft/live-share-react 2.0.0-internal.1 → 2.0.0-internal.11

package/bin/esm/live-hooks/useLiveEvent.js

@@ -0,0 +1,144 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LiveEventEvents, LiveEvent, LiveDataObjectInitializeState, } from "@microsoft/live-share";
+import React from "react";
+import { useDynamicDDS } from "../shared-hooks/index.js";
+import { ActionContainerNotJoinedError, ActionLiveDataObjectInitializedError, ActionLiveDataObjectUndefinedError, } from "../internal/index.js";
+import { useFluidObjectsContext } from "../providers/index.js";
+/**
+ * React hook for using a Live Share `LiveEvent`.
+ *
+ * @remarks
+ * Use this hook if you want to send transient JSON objects to everyone connected to the Fluid container,
+ * such as when sending push notifications or reactions.
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @template TEvent Optional typing for events sent & received. Default is `object` type.
+ * @param uniqueKey the unique key for the `LiveEvent`. If one does not yet exist, a new one
+ * will be created, otherwise it will use the existing one.
+ * @param allowedRoles Optional. The meeting roles eligible to send events through this object.
+ * @param onReceivedEvent Optional. Callback method to be called when a new notification is received.
+ * @returns stateful `latestEvent` & `allEvents` list, `sendEvent` callback, and the `liveEvent` object.
+ *
+ * @example
+ ```jsx
+import { useLiveEvent } from "@microsoft/live-share-react";
+
+const emojis = ["❤️", "😂", "👍", "👎"];
+
+// Define a unique key that differentiates this usage of `useLiveEvent` from others in your app
+const MY_UNIQUE_KEY = "event-key";
+
+// Example component for using useLiveEvent
+export const MyCustomEvent = () => {
+  const { latestEvent, liveEvent, sendEvent } = useLiveEvent(MY_UNIQUE_KEY);
+
+  // Render loading UI when creating LiveEvent instance for first time
+  if (!liveEvent) return <>Loading...</>;
+
+  // Render UI
+  return (
+    <div>
+      {`Latest event: ${latestEvent?.value}, from local user: ${latestEvent?.local}`}
+      {"Select a planet below:"}
+      {emojis.map((emoji) => (
+        <button
+          key={emoji}
+          onClick={() => {
+            sendEvent(emoji);
+          }}
+        >
+          {emoji}
+        </button>
+      ))}
+    </div>
+  );
+};
+ ```
+ */
+export function useLiveEvent(uniqueKey, allowedRoles, onReceivedEvent) {
+    /**
+     * Stateful latest event (user facing) and its non-user-facing setter method.
+     */
+    const [latestEvent, setLatestReceived] = React.useState();
+    /**
+     * Reference for all received/sent events. The current value of this is user-facing. Because
+     * this is always set at the same time as latestEvent, it is effectively a stateful value.
+     */
+    const allEventsRef = React.useRef([]);
+    /**
+     * User facing: dynamically load the DDS for the given unique key.
+     */
+    const { dds: liveEvent } = useDynamicDDS(uniqueKey, (LiveEvent));
+    const { container } = useFluidObjectsContext();
+    /**
+     * User facing: callback to send event through `LiveEvent`
+     */
+    const sendEvent = React.useCallback((event, targetClientId) => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveEvent", "sendEvent");
+        }
+        if (liveEvent === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveEvent", "sendEvent");
+        }
+        if (!liveEvent.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveEvent", "sendEvent");
+        }
+        return yield liveEvent.send(event, targetClientId);
+    }), [container, liveEvent]);
+    /**
+     * Setup change listeners and start `LiveEvent` if needed
+     */
+    React.useEffect(() => {
+        if ((liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.isInitialized) === undefined)
+            return;
+        // Register event listener
+        const onEventReceived = (event, local, clientId, timestamp) => {
+            // If developer passed the optional onReceivedEvent callback, we
+            // call it.
+            onReceivedEvent === null || onReceivedEvent === void 0 ? void 0 : onReceivedEvent(event, local);
+            // Set the received event to our local state
+            const received = {
+                value: event,
+                local,
+                clientId,
+                timestamp,
+            };
+            allEventsRef.current = [...allEventsRef.current, received];
+            setLatestReceived(received);
+        };
+        // Reset the events list if it allEventRef.current is non-empty.
+        // This happens when the `id` a developer provides changes on the fly.
+        if (allEventsRef.current.length > 0) {
+            allEventsRef.current = [];
+            setLatestReceived(undefined);
+        }
+        liveEvent.on(LiveEventEvents.received, onEventReceived);
+        if (liveEvent.initializeState === LiveDataObjectInitializeState.needed) {
+            // Start live event
+            liveEvent.initialize(allowedRoles);
+        }
+        return () => {
+            // on unmount, remove event listeners
+            liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.off(LiveEventEvents.received, onEventReceived);
+        };
+    }, [liveEvent]);
+    return {
+        latestEvent,
+        allEvents: allEventsRef.current,
+        sendEvent,
+        liveEvent,
+    };
+}
+//# sourceMappingURL=useLiveEvent.js.map

package/bin/esm/live-hooks/useLiveEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveEvent.js","sourceRoot":"","sources":["../../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"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"}

package/bin/esm/live-hooks/useLiveFollowMode.d.ts

@@ -0,0 +1,163 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+import { UserMeetingRole } from "@microsoft/live-share";
+import { IUseLiveFollowModeResults } from "../types/index.js";
+/**
+ * React hook for using a Live Share `LiveFollowMode`.
+ *
+ * @remarks
+ * Use this hook if you want to add the ability to follow specific users or let a user present to everyone in the session.
+ * Each user has their own `stateValue`, which is the value other users will reference when that user is presenting or being followed.
+ * The `state` response includes the user's `value` that the local user is "following", whether it be their own or someone else's.
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @template TData Optional typing for the custom user presence data object. Default is `object` type.
+ *
+ * @param uniqueKey The unique key for `LiveFollowMode`. If one does not yet exist, a new one will be created.
+ * @param initialData The initial value for the local user's `stateValue`.
+ * @param allowedRoles Optional. The user roles that are allowed to present to use `startPresenting()` or `stopPresenting()`.
+ * @returns `IUseLiveFollowModeResults` results, which contains React stateful objects and callbacks.
+ *
+ * @example
+ ```jsx
+ import { FollowModeType } from "@microsoft/live-share";
+import { useLiveFollowMode } from "@microsoft/live-share-react";
+// As an example, we will use a fake component to denote what a 3D viewer might look like in an app
+import { Example3DModelViewer } from "./components";
+
+// Define a unique key that differentiates this usage of `useLiveFollowMode` from others in your app
+const MY_UNIQUE_KEY = "follow-mode-key";
+
+// Define the initial stateValue for the local user (optional).
+const startingCameraPosition = {
+    x: 0,
+    y: 0,
+    z: 0,
+};
+
+// Example component for using useLiveFollowMode
+export function MyLiveFollowMode() {
+    const {
+        state,
+        localUser,
+        otherUsers,
+        allUsers,
+        liveFollowMode,
+        update,
+        startPresenting,
+        stopPresenting,
+        beginSuspension,
+        endSuspension,
+        followUser,
+        stopFollowing,
+    } = useLiveFollowMode(MY_UNIQUE_KEY, startingCameraPosition);
+
+    // Example of an event listener for a camera position changed event.
+    // For something like a camera change event, you should use a debounce function.
+    function onCameraPositionChanged(position, isUserAction) {
+        // Broadcast change to other users so that they have their latest camera position
+        update(position);
+        // If the local user changed the position while following another user, we want to suspend.
+        // Note: helps to distinguish changes initiated by the local user (e.g., drag mouse) separately from other change events.
+        if (!isUserAction) return;
+        switch (state.type) {
+            case FollowModeType.followPresenter:
+            case FollowModeType.followUser: {
+                // This will trigger a "stateChanged" event update for the local user only.
+                followMode.beginSuspension();
+                break;
+            }
+            default: {
+                // No need to suspend for other types
+                break;
+            }
+        }
+    }
+
+    // Can optionally get the relevant user's presence object
+    const followingUser = liveFollowMode?.getUser(state.followingUserId);
+
+    // Render loading UI when creating LiveFollowMode instance for first time
+    if (!liveFollowMode) return <>Loading...</>;
+
+    // Render UI
+    return (
+        <div>
+            {state.type === FollowModeType.local && (
+                <div>
+                    <p>{""}</p>
+                    <button onClick={startPresenting}>
+                        {"Start presenting"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.activeFollowers && (
+                <div>
+                    <p>{`${state.otherUsersCount} users are following you`}</p>
+                    <button onClick={startPresenting}>
+                        {"Present to all"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.activePresenter && (
+                <div>
+                    <p>{`You are actively presenting to everyone`}</p>
+                    <button onClick={stopPresenting}>
+                        {"Stop presenting"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.followPresenter && (
+                <div>
+                    <p>{`${followingUser?.displayName} is presenting to everyone`}</p>
+                    <button onClick={startPresenting}>{"Take control"}</button>
+                </div>
+            )}
+            {state.type === FollowModeType.suspendFollowPresenter && (
+                <div>
+                    <p>{`${followingUser?.displayName} is presenting to everyone`}</p>
+                    <button onClick={endSuspension}>
+                        {"Sync to presenter"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.followUser && (
+                <div>
+                    <p>{`You are following ${followingUser?.displayName}`}</p>
+                    <button onClick={stopFollowing}>{"Stop following"}</button>
+                </div>
+            )}
+            {state.type === FollowModeType.suspendFollowUser && (
+                <div>
+                    <p>{`You were following ${followingUser?.displayName}`}</p>
+                    <button onClick={stopFollowing}>
+                        {"Resume following"}
+                    </button>
+                </div>
+            )}
+            <div>
+                <p>{"Follow a specific user:"}</p>
+                {otherUsers.map((user) => (
+                    <button
+                        onClick={() => {
+                            followUser(user.userId);
+                        }}
+                        key={user.userId}
+                    >
+                        {user.displayName}
+                    </button>
+                ))}
+            </div>
+            <Example3DModelViewer
+                cameraPosition={state.value}
+                onCameraPositionChanged={onCameraPositionChanged}
+            />
+        </div>
+    );
+};
+ ```
+ */
+export declare function useLiveFollowMode<TData = any>(uniqueKey: string, initialData: TData | (() => TData), allowedRoles?: UserMeetingRole[]): IUseLiveFollowModeResults<TData>;
+//# sourceMappingURL=useLiveFollowMode.d.ts.map

package/bin/esm/live-hooks/useLiveFollowMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveFollowMode.d.ts","sourceRoot":"","sources":["../../../src/live-hooks/useLiveFollowMode.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,eAAe,EAKlB,MAAM,uBAAuB,CAAC;AAS/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0JG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,GAAG,GAAG,EACzC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,EAClC,YAAY,CAAC,EAAE,eAAe,EAAE,GACjC,yBAAyB,CAAC,KAAK,CAAC,CA+QlC"}

package/bin/esm/live-hooks/useLiveFollowMode.js

@@ -0,0 +1,354 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LiveDataObjectInitializeState, LiveFollowMode, } from "@microsoft/live-share";
+import React from "react";
+import { useDynamicDDS } from "../shared-hooks/index.js";
+import { useFluidObjectsContext } from "../providers/index.js";
+import { ActionContainerNotJoinedError, ActionLiveDataObjectInitializedError, ActionLiveDataObjectUndefinedError, } from "../internal/index.js";
+/**
+ * React hook for using a Live Share `LiveFollowMode`.
+ *
+ * @remarks
+ * Use this hook if you want to add the ability to follow specific users or let a user present to everyone in the session.
+ * Each user has their own `stateValue`, which is the value other users will reference when that user is presenting or being followed.
+ * The `state` response includes the user's `value` that the local user is "following", whether it be their own or someone else's.
+ * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
+ *
+ * @template TData Optional typing for the custom user presence data object. Default is `object` type.
+ *
+ * @param uniqueKey The unique key for `LiveFollowMode`. If one does not yet exist, a new one will be created.
+ * @param initialData The initial value for the local user's `stateValue`.
+ * @param allowedRoles Optional. The user roles that are allowed to present to use `startPresenting()` or `stopPresenting()`.
+ * @returns `IUseLiveFollowModeResults` results, which contains React stateful objects and callbacks.
+ *
+ * @example
+ ```jsx
+ import { FollowModeType } from "@microsoft/live-share";
+import { useLiveFollowMode } from "@microsoft/live-share-react";
+// As an example, we will use a fake component to denote what a 3D viewer might look like in an app
+import { Example3DModelViewer } from "./components";
+
+// Define a unique key that differentiates this usage of `useLiveFollowMode` from others in your app
+const MY_UNIQUE_KEY = "follow-mode-key";
+
+// Define the initial stateValue for the local user (optional).
+const startingCameraPosition = {
+    x: 0,
+    y: 0,
+    z: 0,
+};
+
+// Example component for using useLiveFollowMode
+export function MyLiveFollowMode() {
+    const {
+        state,
+        localUser,
+        otherUsers,
+        allUsers,
+        liveFollowMode,
+        update,
+        startPresenting,
+        stopPresenting,
+        beginSuspension,
+        endSuspension,
+        followUser,
+        stopFollowing,
+    } = useLiveFollowMode(MY_UNIQUE_KEY, startingCameraPosition);
+
+    // Example of an event listener for a camera position changed event.
+    // For something like a camera change event, you should use a debounce function.
+    function onCameraPositionChanged(position, isUserAction) {
+        // Broadcast change to other users so that they have their latest camera position
+        update(position);
+        // If the local user changed the position while following another user, we want to suspend.
+        // Note: helps to distinguish changes initiated by the local user (e.g., drag mouse) separately from other change events.
+        if (!isUserAction) return;
+        switch (state.type) {
+            case FollowModeType.followPresenter:
+            case FollowModeType.followUser: {
+                // This will trigger a "stateChanged" event update for the local user only.
+                followMode.beginSuspension();
+                break;
+            }
+            default: {
+                // No need to suspend for other types
+                break;
+            }
+        }
+    }
+
+    // Can optionally get the relevant user's presence object
+    const followingUser = liveFollowMode?.getUser(state.followingUserId);
+
+    // Render loading UI when creating LiveFollowMode instance for first time
+    if (!liveFollowMode) return <>Loading...</>;
+
+    // Render UI
+    return (
+        <div>
+            {state.type === FollowModeType.local && (
+                <div>
+                    <p>{""}</p>
+                    <button onClick={startPresenting}>
+                        {"Start presenting"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.activeFollowers && (
+                <div>
+                    <p>{`${state.otherUsersCount} users are following you`}</p>
+                    <button onClick={startPresenting}>
+                        {"Present to all"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.activePresenter && (
+                <div>
+                    <p>{`You are actively presenting to everyone`}</p>
+                    <button onClick={stopPresenting}>
+                        {"Stop presenting"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.followPresenter && (
+                <div>
+                    <p>{`${followingUser?.displayName} is presenting to everyone`}</p>
+                    <button onClick={startPresenting}>{"Take control"}</button>
+                </div>
+            )}
+            {state.type === FollowModeType.suspendFollowPresenter && (
+                <div>
+                    <p>{`${followingUser?.displayName} is presenting to everyone`}</p>
+                    <button onClick={endSuspension}>
+                        {"Sync to presenter"}
+                    </button>
+                </div>
+            )}
+            {state.type === FollowModeType.followUser && (
+                <div>
+                    <p>{`You are following ${followingUser?.displayName}`}</p>
+                    <button onClick={stopFollowing}>{"Stop following"}</button>
+                </div>
+            )}
+            {state.type === FollowModeType.suspendFollowUser && (
+                <div>
+                    <p>{`You were following ${followingUser?.displayName}`}</p>
+                    <button onClick={stopFollowing}>
+                        {"Resume following"}
+                    </button>
+                </div>
+            )}
+            <div>
+                <p>{"Follow a specific user:"}</p>
+                {otherUsers.map((user) => (
+                    <button
+                        onClick={() => {
+                            followUser(user.userId);
+                        }}
+                        key={user.userId}
+                    >
+                        {user.displayName}
+                    </button>
+                ))}
+            </div>
+            <Example3DModelViewer
+                cameraPosition={state.value}
+                onCameraPositionChanged={onCameraPositionChanged}
+            />
+        </div>
+    );
+};
+ ```
+ */
+export function useLiveFollowMode(uniqueKey, initialData, allowedRoles) {
+    /**
+     * Stateful follow state.
+     */
+    const [state, setState] = React.useState();
+    /**
+     * Stateful all user presence list and its non-user-facing setter method.
+     */
+    const [allUsers, setAllUsers] = React.useState([]);
+    /**
+     * User facing: dynamically load the DDS for the given unique key.
+     */
+    const { dds: liveFollowMode } = useDynamicDDS(uniqueKey, (LiveFollowMode));
+    /**
+     * User facing: list of non-local user's presence objects.
+     */
+    const otherUsers = React.useMemo(() => {
+        return allUsers.filter((user) => !user.isLocalUser);
+    }, [allUsers]);
+    /**
+     * User facing: local user's presence object.
+     */
+    const localUser = React.useMemo(() => {
+        return allUsers.find((user) => user.isLocalUser);
+    }, [allUsers]);
+    const { container } = useFluidObjectsContext();
+    /**
+     * User facing: callback to update the local user's custom data for their follow state.
+     */
+    const update = React.useCallback((stateValue) => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "update");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "update");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "update");
+        }
+        return yield liveFollowMode.update(stateValue);
+    }), [container, liveFollowMode]);
+    /**
+     * User facing: callback to start presenting.
+     */
+    const startPresenting = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "startPresenting");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "startPresenting");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "startPresenting");
+        }
+        return yield liveFollowMode.startPresenting();
+    }), [container, liveFollowMode]);
+    /**
+     * User facing: callback to stop presenting.
+     */
+    const stopPresenting = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "stopPresenting");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "stopPresenting");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "stopPresenting");
+        }
+        return yield liveFollowMode.stopPresenting();
+    }), [container, liveFollowMode]);
+    /**
+     * User facing: callback to suspend sync.
+     */
+    const beginSuspension = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "syncToPresenter");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "syncToPresenter");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "syncToPresenter");
+        }
+        return yield liveFollowMode.beginSuspension();
+    }), [container, liveFollowMode]);
+    /**
+     * User facing: callback to end current suspension.
+     */
+    const endSuspension = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "syncToPresenter");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "syncToPresenter");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "syncToPresenter");
+        }
+        return yield liveFollowMode.endSuspension();
+    }), [container, liveFollowMode]);
+    /**
+     * User facing: callback to follow a specific user.
+     */
+    const followUser = React.useCallback((userId) => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "followUser");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "followUser");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "followUser");
+        }
+        return yield liveFollowMode.followUser(userId);
+    }), [container, liveFollowMode]);
+    /**
+     * User facing: callback to stop following a user.
+     */
+    const stopFollowing = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!container) {
+            throw new ActionContainerNotJoinedError("liveFollowMode", "stopFollowing");
+        }
+        if (liveFollowMode === undefined) {
+            throw new ActionLiveDataObjectUndefinedError("liveFollowMode", "stopFollowing");
+        }
+        if (!liveFollowMode.isInitialized) {
+            throw new ActionLiveDataObjectInitializedError("liveFollowMode", "stopFollowing");
+        }
+        return yield liveFollowMode.stopFollowing();
+    }), [container, liveFollowMode]);
+    /**
+     * Setup change listeners and start `LiveFollowMode` if needed
+     */
+    React.useEffect(() => {
+        if (liveFollowMode === undefined)
+            return;
+        const onPresenceChanged = () => {
+            const updatedLocalUsers = [];
+            liveFollowMode === null || liveFollowMode === void 0 ? void 0 : liveFollowMode.getUsers().forEach((user) => {
+                updatedLocalUsers.push(user);
+            });
+            setAllUsers(updatedLocalUsers);
+        };
+        liveFollowMode.on("presenceChanged", onPresenceChanged);
+        const onStateChanged = () => {
+            setState(liveFollowMode === null || liveFollowMode === void 0 ? void 0 : liveFollowMode.state);
+        };
+        liveFollowMode.on("stateChanged", onStateChanged);
+        if (liveFollowMode.initializeState ===
+            LiveDataObjectInitializeState.needed) {
+            liveFollowMode.initialize(isInitialDataCallback(initialData)
+                ? initialData()
+                : initialData, allowedRoles);
+        }
+        onPresenceChanged();
+        onStateChanged();
+        return () => {
+            liveFollowMode === null || liveFollowMode === void 0 ? void 0 : liveFollowMode.off("presenceChanged", onPresenceChanged);
+            liveFollowMode === null || liveFollowMode === void 0 ? void 0 : liveFollowMode.off("stateChanged", onStateChanged);
+        };
+    }, [liveFollowMode]);
+    return {
+        state,
+        localUser,
+        otherUsers,
+        allUsers,
+        liveFollowMode,
+        update,
+        startPresenting,
+        stopPresenting,
+        beginSuspension,
+        endSuspension,
+        followUser,
+        stopFollowing,
+    };
+}
+function isInitialDataCallback(value) {
+    return typeof value === "function";
+}
+//# sourceMappingURL=useLiveFollowMode.js.map