@microsoft/live-share-react 2.0.0-internal.18 → 2.0.0-internal.19

package/bin/cjs/live-hooks/useLiveCanvas.js

@@ -1,244 +0,0 @@
-"use strict";
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLiveCanvas = useLiveCanvas;
-const live_share_canvas_1 = require("@microsoft/live-share-canvas");
-const react_1 = __importDefault(require("react"));
-const index_js_1 = require("../shared-hooks/index.js");
-const index_js_2 = require("../utils/index.js");
-const tree_node_utils_js_1 = require("../shared-hooks/internals/tree-node-utils.js");
-const live_share_1 = require("@microsoft/live-share");
-/**
- * React hook for using a Live Share Canvas `LiveCanvas` and `InkingManager`.
- *
- * @remarks
- * Use this hook to set up an `LiveCanvas` object, which is used for collaborative inking. It takes several input parameters, including a unique key,
- * a reference to a canvas element, and various settings for the inking tool, brush, and canvas offset and scale.
- * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
- *
- * @param uniqueKey the unique key for the `LiveCanvas`. If one does not yet exist, a new one.
- * @param canvasElementRef the HTML div element ref or document ID that `InkingManager` will use for canvas-based collaboration.
- * @param props Optional. Other optional props.
- * @param props.active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
- * @param props.tool Optional. Stateful enum for what tool to use in the `InkingManager`.
- * @param props.lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
- * @param props.offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
- * @param props.scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
- * @param props.referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
- * @param props.isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
- * @param props.localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
- * @param props.node Optional. A Fluid `LiveCanvasTree` `TreeNode` instance to swap out the underlying storage solution for strokes.
- * To learn more, look at Fluid's [SharedTree](https://fluidframework.com/docs/data-structures/tree/) documentation.
- * @param allowedRoles Optional. The user roles that are allowed to start/stop/pause the timer.
- *
- * @returns `IUseLiveCanvasResults` object that contains the `liveCanvas` data object and `inkingManager`.
- *
- * @example
- ```jsx
-import { useLiveCanvas } from "@microsoft/live-share-react";
-import { InkingTool } from "@microsoft/live-share-canvas";
-import { useRef } from "react";
-
-// Unique identifier that distinguishes this useLiveCanvas from others in your app
-const UNIQUE_KEY = "CUSTOM-LIVE-CANVAS";
-
-// Example component
-export function ExampleLiveCanvas() {
-    const liveCanvasRef = useRef(null);
-    const { liveCanvas, inkingManager } = useLiveCanvas(
-        "CUSTOM-LIVE-CANVAS",
-        liveCanvasRef,
-    );
-
-    return (
-        <div style={{ position: "absolute"}}>
-            <div
-                ref={liveCanvasRef}
-                // Best practice is to not define inline styles
-                style={{ width: "556px", height: "224px" }}
-            />
-            {!!liveCanvas && (
-                <div>
-                    <button
-                        onClick={() => {
-                            inkingManager.tool = InkingTool.pen;
-                        }}
-                    >
-                        {"Pen"}
-                    </button>
-                    <button
-                        onClick={() => {
-                            inkingManager.tool = InkingTool.laserPointer;
-                        }}
-                    >
-                        {"Laser pointer"}
-                    </button>
-                </div>
-            )}
-        </div>
-    );
-};
- ```
- */
-function useLiveCanvas(uniqueKey, canvasElementRef, props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    /**
-     * User facing: inking manager instance
-     */
-    const [inkingManager, setInkingManager] = react_1.default.useState();
-    /**
-     * User facing: dynamically load the DDS for the given unique key.
-     */
-    const { dds: liveCanvas } = (0, index_js_1.useDynamicDDS)(uniqueKey, live_share_canvas_1.LiveCanvas);
-    // This should change less frequently then node if they are using `useTreeNode`
-    // We need the raw node anyways to apply event listeners
-    const rawNode = (0, tree_node_utils_js_1.getRawNode)(props === null || props === void 0 ? void 0 : props.node);
-    /**
-     * Setup the InkingManager and LiveCanvas
-     */
-    react_1.default.useEffect(() => {
-        // if the component is already listening or liveCanvas is not yet initialized, return
-        if (!liveCanvas)
-            return;
-        // get the canvas element from the ref or document
-        let htmlElement;
-        if ((0, index_js_2.isRefObject)(canvasElementRef)) {
-            htmlElement = canvasElementRef.current;
-        }
-        else {
-            htmlElement = document.getElementById(canvasElementRef);
-        }
-        if (htmlElement === null)
-            return;
-        // Clear out existing nodes
-        function removeAllChildren(node) {
-            node.childNodes.forEach((childNode) => {
-                removeAllChildren(childNode);
-                childNode.remove();
-            });
-        }
-        removeAllChildren(htmlElement);
-        // Create the InkingManager and initialize the liveCanvas with it
-        const inkingManager = new live_share_canvas_1.InkingManager(htmlElement);
-        setInkingManager(inkingManager);
-        liveCanvas.initialize(inkingManager, props === null || props === void 0 ? void 0 : props.allowedRoles, rawNode);
-        // cleanup function to be called when the component is unmount
-        return () => {
-            inkingManager.removeAllListeners();
-        };
-    }, 
-    // Intentionally ommitting rawNode from deps because we only want to initialize once,
-    // whereas rawNode may change many times.
-    [liveCanvas, props === null || props === void 0 ? void 0 : props.allowedRoles]);
-    /**
-     * Set the node if it changes while LiveCanvas is initialized
-     */
-    react_1.default.useEffect(() => {
-        if (!rawNode ||
-            (liveCanvas === null || liveCanvas === void 0 ? void 0 : liveCanvas.initializeState) !==
-                live_share_1.LiveDataObjectInitializeState.succeeded)
-            return;
-        liveCanvas.setTreeNode(rawNode);
-    }, [liveCanvas, rawNode]);
-    /**
-     * Activate or deactivate the inkingManager based on the 'active' prop
-     */
-    react_1.default.useEffect(() => {
-        if (inkingManager && (props === null || props === void 0 ? void 0 : props.active) !== undefined) {
-            if (props === null || props === void 0 ? void 0 : props.active) {
-                inkingManager.activate();
-            }
-            else {
-                inkingManager.deactivate();
-            }
-        }
-    }, [props === null || props === void 0 ? void 0 : props.active, inkingManager]);
-    /**
-     * Sets the tool of the inkingManager based on the 'tool' prop
-     */
-    react_1.default.useEffect(() => {
-        if (inkingManager && (props === null || props === void 0 ? void 0 : props.tool) !== undefined) {
-            inkingManager.tool = props.tool;
-        }
-    }, [props === null || props === void 0 ? void 0 : props.tool, inkingManager]);
-    /**
-     * Sets the offset of the inkingManager based on the 'offset' prop
-     */
-    react_1.default.useEffect(() => {
-        if (inkingManager && (props === null || props === void 0 ? void 0 : props.offset) !== undefined) {
-            inkingManager.offset = {
-                x: props === null || props === void 0 ? void 0 : props.offset.x,
-                y: props === null || props === void 0 ? void 0 : props.offset.y,
-            };
-        }
-    }, [(_a = props === null || props === void 0 ? void 0 : props.offset) === null || _a === void 0 ? void 0 : _a.x, (_b = props === null || props === void 0 ? void 0 : props.offset) === null || _b === void 0 ? void 0 : _b.y, inkingManager]);
-    /**
-     * Sets the scale of the inkingManager based on the 'scale' prop
-     */
-    react_1.default.useEffect(() => {
-        if (inkingManager && (props === null || props === void 0 ? void 0 : props.scale) !== undefined) {
-            inkingManager.scale = props === null || props === void 0 ? void 0 : props.scale;
-        }
-    }, [props === null || props === void 0 ? void 0 : props.scale, inkingManager]);
-    /**
-     * Sets the referencePoint of the inkingManager based on the 'referencePoint' prop
-     */
-    react_1.default.useEffect(() => {
-        if (inkingManager && (props === null || props === void 0 ? void 0 : props.referencePoint) !== undefined) {
-            inkingManager.referencePoint = props === null || props === void 0 ? void 0 : props.referencePoint;
-        }
-    }, [props === null || props === void 0 ? void 0 : props.referencePoint, inkingManager]);
-    /**
-     * Sets the lineBrush of the inkingManager based on the 'lineBrush' prop
-     */
-    react_1.default.useEffect(() => {
-        if (inkingManager && (props === null || props === void 0 ? void 0 : props.lineBrush)) {
-            inkingManager.lineBrush = {
-                color: props.lineBrush.color,
-                tip: props.lineBrush.tip,
-                tipSize: props.lineBrush.tipSize,
-                type: props.lineBrush.type,
-                endArrow: props.lineBrush.endArrow,
-            };
-        }
-    }, [
-        (_c = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _c === void 0 ? void 0 : _c.color,
-        (_d = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _d === void 0 ? void 0 : _d.tip,
-        (_e = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _e === void 0 ? void 0 : _e.tipSize,
-        (_f = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _f === void 0 ? void 0 : _f.type,
-        (_g = props === null || props === void 0 ? void 0 : props.lineBrush) === null || _g === void 0 ? void 0 : _g.endArrow,
-        inkingManager,
-    ]);
-    /**
-     * Sets the isCursorShared of the liveCanvas based on the 'isCursorShared' prop
-     */
-    react_1.default.useEffect(() => {
-        if (liveCanvas && (props === null || props === void 0 ? void 0 : props.isCursorShared) !== undefined) {
-            liveCanvas.isCursorShared = props.isCursorShared;
-        }
-    }, [props === null || props === void 0 ? void 0 : props.isCursorShared, liveCanvas]);
-    /**
-     * Sets the onGetLocalUserInfo method of the liveCanvas based on the 'localUserCursor' prop
-     */
-    react_1.default.useEffect(() => {
-        if (liveCanvas && (props === null || props === void 0 ? void 0 : props.localUserPictureUrl)) {
-            liveCanvas.onGetLocalUserPictureUrl = () => {
-                return props.localUserPictureUrl;
-            };
-        }
-    }, [props === null || props === void 0 ? void 0 : props.localUserPictureUrl, liveCanvas]);
-    /**
-     * Return hook response
-     */
-    return {
-        inkingManager,
-        liveCanvas,
-    };
-}
-//# sourceMappingURL=useLiveCanvas.js.map

package/bin/cjs/live-hooks/useLiveCanvas.js.map

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

package/bin/cjs/live-hooks/useLiveEvent.d.ts

@@ -1,59 +0,0 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-import { UserMeetingRole } from "@microsoft/live-share";
-import { IUseLiveEventResults, OnReceivedLiveEventAction } from "../types/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 declare function useLiveEvent<TEvent = any>(uniqueKey: string, allowedRoles?: UserMeetingRole[], onReceivedEvent?: OnReceivedLiveEventAction<TEvent>): IUseLiveEventResults<TEvent>;
-//# sourceMappingURL=useLiveEvent.d.ts.map

package/bin/cjs/live-hooks/useLiveEvent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLiveEvent.d.ts","sourceRoot":"","sources":["../../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAEH,eAAe,EAGlB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,oBAAoB,EACpB,yBAAyB,EAE5B,MAAM,mBAAmB,CAAC;AAU3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,YAAY,CAAC,MAAM,GAAG,GAAG,EACrC,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,eAAe,EAAE,EAChC,eAAe,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,GACpD,oBAAoB,CAAC,MAAM,CAAC,CAoG9B"}

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

@@ -1,150 +0,0 @@
-"use strict";
-/*!
- * 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());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLiveEvent = useLiveEvent;
-const live_share_1 = require("@microsoft/live-share");
-const react_1 = __importDefault(require("react"));
-const index_js_1 = require("../shared-hooks/index.js");
-const index_js_2 = require("../internal/index.js");
-const index_js_3 = require("../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>
-  );
-};
- ```
- */
-function useLiveEvent(uniqueKey, allowedRoles, onReceivedEvent) {
-    /**
-     * Stateful latest event (user facing) and its non-user-facing setter method.
-     */
-    const [latestEvent, setLatestReceived] = react_1.default.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_1.default.useRef([]);
-    /**
-     * User facing: dynamically load the DDS for the given unique key.
-     */
-    const { dds: liveEvent } = (0, index_js_1.useDynamicDDS)(uniqueKey, (live_share_1.LiveEvent));
-    const { container } = (0, index_js_3.useFluidObjectsContext)();
-    /**
-     * User facing: callback to send event through `LiveEvent`
-     */
-    const sendEvent = react_1.default.useCallback((event, targetClientId) => __awaiter(this, void 0, void 0, function* () {
-        if (!container) {
-            throw new index_js_2.ActionContainerNotJoinedError("liveEvent", "sendEvent");
-        }
-        if (liveEvent === undefined) {
-            throw new index_js_2.ActionLiveDataObjectUndefinedError("liveEvent", "sendEvent");
-        }
-        if (!liveEvent.isInitialized) {
-            throw new index_js_2.ActionLiveDataObjectInitializedError("liveEvent", "sendEvent");
-        }
-        return yield liveEvent.send(event, targetClientId);
-    }), [container, liveEvent]);
-    /**
-     * Setup change listeners and start `LiveEvent` if needed
-     */
-    react_1.default.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(live_share_1.LiveEventEvents.received, onEventReceived);
-        if (liveEvent.initializeState === live_share_1.LiveDataObjectInitializeState.needed) {
-            // Start live event
-            liveEvent.initialize(allowedRoles);
-        }
-        return () => {
-            // on unmount, remove event listeners
-            liveEvent === null || liveEvent === void 0 ? void 0 : liveEvent.off(live_share_1.LiveEventEvents.received, onEventReceived);
-        };
-    }, [liveEvent]);
-    return {
-        latestEvent,
-        allEvents: allEventsRef.current,
-        sendEvent,
-        liveEvent,
-    };
-}
-//# sourceMappingURL=useLiveEvent.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useLiveEvent.js","sourceRoot":"","sources":["../../../src/live-hooks/useLiveEvent.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;;;;;;;;;;;;AA0EH,oCAwGC;AAhLD,sDAK+B;AAC/B,kDAA0B;AAO1B,uDAAyD;AACzD,mDAI8B;AAC9B,oDAA+D;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,SAAgB,YAAY,CACxB,SAAiB,EACjB,YAAgC,EAChC,eAAmD;IAEnD;;OAEG;IACH,MAAM,CAAC,WAAW,EAAE,iBAAiB,CAAC,GAClC,eAAK,CAAC,QAAQ,EAA6B,CAAC;IAChD;;;OAGG;IACH,MAAM,YAAY,GAAG,eAAK,CAAC,MAAM,CAA8B,EAAE,CAAC,CAAC;IACnE;;OAEG;IACH,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAA,wBAAa,EACpC,SAAS,EACT,CAAA,sBAAiB,CAAA,CACpB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,iCAAsB,GAAE,CAAC;IAE/C;;OAEG;IACH,MAAM,SAAS,GAAgC,eAAK,CAAC,WAAW,CAC5D,CAAO,KAAa,EAAE,cAAuB,EAAE,EAAE;QAC7C,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,MAAM,IAAI,wCAA6B,CACnC,WAAW,EACX,WAAW,CACd,CAAC;QACN,CAAC;QACD,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC1B,MAAM,IAAI,6CAAkC,CACxC,WAAW,EACX,WAAW,CACd,CAAC;QACN,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;YAC3B,MAAM,IAAI,+CAAoC,CAC1C,WAAW,EACX,WAAW,CACd,CAAC;QACN,CAAC;QACD,OAAO,MAAM,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;IACvD,CAAC,CAAA,EACD,CAAC,SAAS,EAAE,SAAS,CAAC,CACzB,CAAC;IAEF;;OAEG;IACH,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,MAAK,SAAS;YAAE,OAAO;QACnD,0BAA0B;QAC1B,MAAM,eAAe,GAAG,CACpB,KAAa,EACb,KAAc,EACd,QAAgB,EAChB,SAAiB,EACnB,EAAE;YACA,gEAAgE;YAChE,WAAW;YACX,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,EAAE,KAAK,CAAC,CAAC;YAChC,4CAA4C;YAC5C,MAAM,QAAQ,GAA8B;gBACxC,KAAK,EAAE,KAAK;gBACZ,KAAK;gBACL,QAAQ;gBACR,SAAS;aACZ,CAAC;YACF,YAAY,CAAC,OAAO,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YAC3D,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,gEAAgE;QAChE,sEAAsE;QACtE,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClC,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC;YAC1B,iBAAiB,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC;QACD,SAAS,CAAC,EAAE,CAAC,4BAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACxD,IACI,SAAS,CAAC,eAAe,KAAK,0CAA6B,CAAC,MAAM,EACpE,CAAC;YACC,mBAAmB;YACnB,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC;QAED,OAAO,GAAG,EAAE;YACR,qCAAqC;YACrC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,4BAAe,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QAC9D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO;QACH,WAAW;QACX,SAAS,EAAE,YAAY,CAAC,OAAO;QAC/B,SAAS;QACT,SAAS;KACZ,CAAC;AACN,CAAC"}

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

@@ -1,163 +0,0 @@
-/*!
- * 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/cjs/live-hooks/useLiveFollowMode.d.ts.map

@@ -1 +0,0 @@
-{"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"}