@microsoft/live-share-react 1.4.0-preview.0 → 2.0.0-internal.10

package/src/shared-hooks/useSharedMap.ts

@@ -4,17 +4,20 @@
  */
 
 import React from "react";
-import { isEntries, isJSON, isMap } from "../utils";
-import { IUseSharedMapResults, SharedMapInitialData } from "../types";
-import { useDynamicDDS } from "./useDynamicDDS";
-import { SharedMap } from "fluid-framework";
-import { useFluidObjectsContext } from "../providers";
+import { isEntries, isJSON, isMap } from "../utils/index.js";
+import { IUseSharedMapResults, SharedMapInitialData } from "../types/index.js";
+import { useDynamicDDS } from "./useDynamicDDS.js";
+import { SharedMap } from "fluid-framework/legacy";
 import {
     ActionContainerNotJoinedError,
     ActionLiveDataObjectUndefinedError,
-} from "../internal";
+} from "../internal/errors.js";
+import { useFluidObjectsContext } from "../providers/AzureProvider.js";
+import { useSharedTree } from "./useSharedTree.js";
 
 /**
+ * @deprecated use {@link useSharedTree} instead.
+ *
  * React hook for using a Fluid `SharedMap`.
  *
  * @remarks
@@ -28,19 +31,12 @@ import {
  * will be created, otherwise it will use the existing one.
  * @param initialData a JS Map, entries array, or JSON object to insert into the `SharedMap` when creating
  * the DDS for the first time.
- * @returns stateful `map` entries, `setEntry` callback, `deleteEntry` callback, and the Fluid `sharedMap`.
+ * @returns the Fluid `sharedMap`.
  */
 export function useSharedMap<TData = any>(
     uniqueKey: string,
     initialData?: SharedMapInitialData<TData>
 ): IUseSharedMapResults<TData> {
-    /**
-     * Stateful readonly map (user facing) with most recent values from `SharedMap` and its setter method.
-     */
-    const [map, setMap] = React.useState<ReadonlyMap<string, TData>>(
-        getInitialData<TData>(initialData)
-    );
-
     const onFirstInitialize = React.useCallback(
         (newDDS: SharedMap): void => {
             /**
@@ -64,6 +60,28 @@ export function useSharedMap<TData = any>(
 
     const { container } = useFluidObjectsContext();
 
+    /**
+     * User facing: get a value from the Fluid `SharedMap`.
+     */
+    const getEntry = React.useCallback(
+        (key: string) => {
+            if (!container) {
+                throw new ActionContainerNotJoinedError(
+                    "sharedMap",
+                    "getEntry"
+                );
+            }
+            if (sharedMap === undefined) {
+                throw new ActionLiveDataObjectUndefinedError(
+                    "sharedMap",
+                    "getEntry"
+                );
+            }
+            return sharedMap.get(key);
+        },
+        [container, sharedMap]
+    );
+
     /**
      * User facing: set a value to the Fluid `SharedMap`.
      */
@@ -108,13 +126,20 @@ export function useSharedMap<TData = any>(
         [container, sharedMap]
     );
 
+    const [sharedMapProxy, setSharedMapProxy] = React.useState<SharedMap>();
+
     // Setup change listeners, initial values, etc.
     React.useEffect(() => {
         if (!sharedMap) return;
+        setSharedMapProxy(sharedMap);
+
+        class SharedMapProxyHandler implements ProxyHandler<SharedMap> {}
 
         // Register valueChanged listener for `SharedMap`.
         const onValueChanged = () => {
-            setMap(new Map<string, TData>(sharedMap.entries()));
+            setSharedMapProxy(
+                new Proxy(sharedMap, new SharedMapProxyHandler())
+            );
         };
         sharedMap.on("valueChanged", onValueChanged);
         // Get initial values from `SharedMap`.
@@ -127,10 +152,10 @@ export function useSharedMap<TData = any>(
     }, [sharedMap]);
 
     return {
-        map,
+        sharedMap: sharedMapProxy,
+        getEntry,
         setEntry,
         deleteEntry,
-        sharedMap,
     };
 }
 

package/src/shared-hooks/useSharedState.ts

@@ -4,10 +4,13 @@
  */
 
 import React from "react";
-import { useFluidObjectsContext } from "../providers";
-import { DisposeSharedStateAction, SetSharedStateAction } from "../types";
+import { useFluidObjectsContext } from "../providers/index.js";
+import {
+    DisposeSharedStateAction,
+    SetSharedStateAction,
+} from "../types/index.js";
 import { v4 as uuid } from "uuid";
-import { isPrevStateCallback } from "../internal";
+import { isPrevStateCallback } from "../internal/index.js";
 
 /**
  * Inspired by React's `useState` hook, `useSharedState` makes it easy to synchronize state in your app.

package/src/shared-hooks/useSharedStateRegistry.ts

@@ -3,7 +3,11 @@
  * Licensed under the Microsoft Live Share SDK License.
  */
 
-import { IValueChanged, SharedMap } from "fluid-framework";
+import {
+    IFluidContainer,
+    IValueChanged,
+    SharedMap,
+} from "fluid-framework/legacy";
 import React from "react";
 import {
     DeleteSharedStateAction,
@@ -12,7 +16,13 @@ import {
     SetLocalStateAction,
     UnregisterSharedSetStateAction,
     UpdateSharedStateAction,
-} from "../types";
+} from "../types/index.js";
+import {
+    getRootDataObject,
+    getRootDirectory,
+    TurboDirectory,
+    TurboStateMap,
+} from "@microsoft/live-share/internal";
 
 /**
  * Response for the {@link useSharedStateRegistry} hook.
@@ -52,6 +62,8 @@ export const useSharedStateRegistry = (
         Map<string, Map<string, SetLocalStateAction>>
     >(new Map());
 
+    const stateMap = useStateMap(results?.container);
+
     /**
      * @see ISharedStateRegistryResponse.registerSharedSetStateAction
      */
@@ -76,14 +88,12 @@ export const useSharedStateRegistry = (
                 );
             }
             // Set initial values, if known
-            const stateMap = results?.container.initialObjects
-                .TURBO_STATE_MAP as SharedMap | undefined;
             const initialValue = stateMap?.get(uniqueKey);
             if (initialValue) {
                 setLocalStateAction(initialValue);
             }
         },
-        [results]
+        [stateMap]
     );
 
     /**
@@ -105,13 +115,10 @@ export const useSharedStateRegistry = (
      */
     const updateSharedState: UpdateSharedStateAction = React.useCallback(
         (uniqueKey: string, value: any) => {
-            if (!results) return;
-            const { container } = results;
-            const stateMap = container.initialObjects
-                .TURBO_STATE_MAP as SharedMap;
-            stateMap.set(uniqueKey, value);
+            if (!stateMap) return;
+            stateMap?.set(uniqueKey, value);
         },
-        [results]
+        [stateMap]
     );
 
     /**
@@ -119,25 +126,20 @@ export const useSharedStateRegistry = (
      */
     const deleteSharedState: DeleteSharedStateAction = React.useCallback(
         (uniqueKey: string) => {
-            if (!results) return;
-            const { container } = results;
+            if (!stateMap) return;
             let actionsMap =
                 registeredSharedSetStateActionMapRef.current.get(uniqueKey);
             actionsMap?.clear();
-            const stateMap = container.initialObjects
-                .TURBO_STATE_MAP as SharedMap;
             stateMap.delete(uniqueKey);
         },
-        [results]
+        [stateMap]
     );
 
     React.useEffect(() => {
-        if (!results) return;
-        const { container } = results;
-        const stateMap = container.initialObjects.TURBO_STATE_MAP as SharedMap;
+        if (!stateMap) return;
         const valueChangedListener = (changed: IValueChanged): void => {
             if (registeredSharedSetStateActionMapRef.current.has(changed.key)) {
-                const value = stateMap.get(changed.key);
+                const value = stateMap?.get(changed.key);
                 const actionMap =
                     registeredSharedSetStateActionMapRef.current.get(
                         changed.key
@@ -157,9 +159,9 @@ export const useSharedStateRegistry = (
             });
         });
         return () => {
-            stateMap.off("valueChanged", valueChangedListener);
+            stateMap?.off("valueChanged", valueChangedListener);
         };
-    }, [results]);
+    }, [stateMap]);
 
     return {
         registerSharedSetStateAction,
@@ -168,3 +170,23 @@ export const useSharedStateRegistry = (
         deleteSharedState,
     };
 };
+
+const useStateMap = (container: IFluidContainer | undefined) => {
+    const [stateMap, setStateMap] = React.useState<SharedMap | undefined>();
+    React.useEffect(() => {
+        if (!container) {
+            return;
+        }
+        const rootDataObject = getRootDataObject(container);
+        const rootDirectory = getRootDirectory(rootDataObject);
+        const turboDir = rootDirectory.getSubDirectory(TurboDirectory);
+        turboDir
+            ?.get(TurboStateMap)
+            .get()
+            .then((state: SharedMap) => {
+                setStateMap(state);
+            });
+    }, [container]);
+
+    return stateMap;
+};

package/src/shared-hooks/useSharedTree.ts

@@ -0,0 +1,144 @@
+import {
+    ImplicitFieldSchema,
+    TreeViewConfiguration,
+    SharedTree,
+    TreeView,
+    ITree,
+    InsertableTreeFieldFromImplicitField,
+    TreeFieldFromImplicitField,
+} from "fluid-framework";
+import { IUseSharedTreeResults } from "../types/index.js";
+import { useDynamicDDS, useTreeNode } from "../shared-hooks/index.js";
+import React from "react";
+
+/**
+ * Creates a new Fluid `SharedTree` instance if one doesn't already exist.
+ * @remarks
+ * Use the `root` variable from the {@link IUseSharedTreeResults} response from this hook with {@link useTreeNode}.
+ * This makes `root` stateful with React whenever a leaf of `root` changes.
+ *
+ * @param uniqueKey the unique key for the `SharedTree`. If one does not yet exist, a new `SharedTree` will be created.
+ * Otherwise it will use the existing one.
+ * @param treeViewConfiguration the tree view configuration that contains the `SharedTree` field schema.
+ * @param initialData the initial data to load into the `SharedTree` when it is first created.
+ * @returns the {@link IUseSharedTreeResults} with the `root` node.
+ *
+ * @example
+ * ```tsx
+ * import { SchemaFactory, TreeViewConfiguration } from "fluid-framework";
+ * import { useSharedTree, useTreeNode } from "@microsoft/live-share-react";
+ * // Declare a schema factory with your unique uuid
+ * const sf = new SchemaFactory("fc1db2e8-0000-11ee-be57-0242ac120002");
+ * class YourObject extends sf.object("YourObject", {
+ *  listChangedCount: sf.number,
+ *  list: sf.array(sf.string),
+ * }) {
+ *  // You can add your own utility functions
+ *  insert() {
+ *      this.list.insertAtEnd("some text");
+ *      this.listChangedCount += 1;
+ *  }
+ * }
+ * const config = new TreeViewConfiguration({ schema: YourObject });
+ * const initialData = new YourObject({
+ *  number: 0,
+ *  list: [],
+ * });
+ *
+ * // Must be child component of <LiveShareProvider> or <AzureProvider>
+ * export const YourComponent = () => {
+ *  // Get the root node of the `SharedTree` mapped to "some-unique-key"
+ *  const { root } = useSharedTree("some-unique-key", config, initialData);
+ *  // Makes root stateful / automatically update when the node changes (e.g., node.count)
+ *  const { node } = useTreeNode(root);
+ *  // node.list is its own TreeNode, so we make it stateful as well
+ *  const { node: list } = useTreeNode(node?.list);
+ *  if (!node || !list) return (<>"Loading"</>);
+ *  return (
+ *      <div>
+ *          <div>Changed: {node.listChangedCount}</div>
+ *          <button onClick={() => node.insert()}>Insert</button>
+ *          { list.map((item) => <div key={item}>{item}</div>) }
+ *      </div>
+ *  );
+ * }
+ * ```
+ */
+export function useSharedTree<
+    TSchema extends ImplicitFieldSchema = ImplicitFieldSchema,
+>(
+    uniqueKey: string,
+    treeViewConfiguration: TreeViewConfiguration<TSchema>,
+    initialData: InsertableTreeFieldFromImplicitField<TSchema>
+): IUseSharedTreeResults<TSchema> {
+    const [treeView, setTreeView] = React.useState<TreeView<TSchema>>();
+    const [root, setRoot] =
+        React.useState<TreeFieldFromImplicitField<TSchema>>();
+
+    const onFirstInitialize = React.useCallback(
+        (newDDS: ITree): void => {
+            try {
+                // Create a `treeView` with the provided `treeViewConfiguration`
+                const _treeView = newDDS.viewWith(treeViewConfiguration);
+                if (_treeView.compatibility.canInitialize) {
+                    // Set initial data
+                    _treeView.initialize(initialData);
+                }
+                // `onFirstInitialize` is only called for the user that created the tree, but we need this object for all clients.
+                // Dispose, since we will call `sharedTree.viewWith` in a `useEffect` down below and set it to state.
+                _treeView.dispose();
+            } catch (err) {
+                console.error(err);
+            }
+        },
+        [treeViewConfiguration, initialData]
+    );
+    /**
+     * User facing: dynamically load the `SharedTree` DDS for the given unique key.
+     */
+    const { dds: sharedTree } = useDynamicDDS<ITree>(
+        uniqueKey,
+        SharedTree,
+        onFirstInitialize
+    );
+
+    /**
+     * Sets the tree view and root view
+     */
+    React.useEffect(() => {
+        if (!sharedTree) return;
+        let _treeView: TreeView<TSchema> | undefined = undefined;
+        try {
+            // Create a `treeView` with the provided `treeViewConfiguration`
+            _treeView = sharedTree.viewWith(treeViewConfiguration);
+            setTreeView(_treeView);
+        } catch (err) {
+            console.error(err);
+        }
+
+        // Listen for changes to root view
+        const updateRoot = (): void => {
+            if (_treeView?.compatibility.canView) {
+                setRoot(_treeView.root);
+            } else {
+                setRoot(undefined);
+            }
+        };
+
+        updateRoot();
+        const unsubscribeToRoot = _treeView?.events.on(
+            "rootChanged",
+            updateRoot
+        );
+        return () => {
+            _treeView?.dispose();
+            unsubscribeToRoot?.();
+        };
+    }, [sharedTree, treeViewConfiguration]);
+
+    return {
+        treeView,
+        sharedTree,
+        root,
+    };
+}

package/src/shared-hooks/useTreeNode.ts

@@ -0,0 +1,147 @@
+import { Tree, TreeChangeEvents, TreeNode } from "fluid-framework";
+import { IUseTreeNodeResults } from "../types/index.js";
+import { useEffect, useRef, useState } from "react";
+import {
+    getRawNode,
+    buildProxy,
+    setUpListenersForNodeChildren,
+} from "./internals/tree-node-utils.js";
+
+/**
+ * Makes a provided Fluid `TreeNode` stateful in React.
+ *
+ * @param node the Fluid `SharedTree` `TreeNode` instance to make stateful.
+ * @param stateChangeType listener type to apply changes for. Default value is "nodeChanged", which has the most optimal performance.
+ * Provide "treeChanged" to make all children nodes stateful as well when those child nodes change.
+ * When using the default, you must pass all child `TreeNode` values into `useTreeNode` for them to be stateful as well.
+ * @returns a stateful version `node`
+ *
+ * @example
+ * Example using default `"nodeChanged"` `stateChangeType`
+ * ```tsx
+ * import { SchemaFactory, TreeViewConfiguration } from "fluid-framework";
+ * import { useSharedTree, useTreeNode } from "@microsoft/live-share-react";
+ * // Declare a schema factory with your unique uuid
+ * const sf = new SchemaFactory("fc1db2e8-0000-11ee-be57-0242ac120002");
+ * class YourObject extends sf.object("YourObject", {
+ *  listChangedCount: sf.number,
+ *  list: sf.array(sf.string),
+ * }) {
+ *  // You can add your own utility functions
+ *  insert() {
+ *      this.list.insertAtEnd("some text");
+ *      this.listChangedCount += 1;
+ *  }
+ * }
+ * const config = new TreeViewConfiguration({ schema: YourObject });
+ * const initialData = new YourObject({
+ *  number: 0,
+ *  list: [],
+ * });
+ *
+ * // Must be child component of <LiveShareProvider> or <AzureProvider>
+ * export const YourComponent = () => {
+ *  // Get the root node of the `SharedTree` mapped to "some-unique-key"
+ *  const { root } = useSharedTree("some-unique-key", config, initialData);
+ *  // Makes root stateful / automatically update when the node changes (e.g., node.count)
+ *  const { node } = useTreeNode(root);
+ *  // node.list is its own TreeNode, so we make it stateful as well
+ *  const { node: list } = useTreeNode(node?.list);
+ *  if (!node || !list) return (<>"Loading"</>);
+ *  return (
+ *      <div>
+ *          <div>Changed: {node.listChangedCount}</div>
+ *          <button onClick={() => node.insert()}>Insert</button>
+ *          { list.map((item) => <div key={item}>{item}</div>) }
+ *      </div>
+ *  );
+ * }
+ * ```
+ *
+ * @example
+ * Example using `"treeChanged"` `stateChangeType`
+ * ```tsx
+ * import { SchemaFactory, TreeViewConfiguration } from "fluid-framework";
+ * import { useSharedTree, useTreeNode } from "@microsoft/live-share-react";
+ * // Declare a schema factory with your unique uuid
+ * const sf = new SchemaFactory("fc1db2e8-0000-11ee-be57-0242ac120002");
+ *
+ * class ChildObject extends sf.object("ChildObject", {
+ *  count: sf.number,
+ * }) {
+ *  increment() {
+ *      this.count += 1;
+ *  }
+ * }
+ *
+ * class YourObject extends sf.object("YourObject", {
+ *  child: ChildObject,
+ * }) {}
+ * const config = new TreeViewConfiguration({ schema: YourObject });
+ * const initialData = new YourObject({
+ *  child: new ChildObject({ count: 0 }),
+ * });
+ *
+ * // Must be child component of <LiveShareProvider> or <AzureProvider>
+ * export const YourComponent = () => {
+ *  // Get the root node of the `SharedTree` mapped to "some-unique-key"
+ *  const { root } = useSharedTree("some-unique-key", config, initialData);
+ *  // Using "treeChanged" prop makes all children nodes stateful as well.
+ *  // Use with caution / measure render performance with React dev tools.
+ *  const { node } = useTreeNode(root, "treeChanged");
+ *  if (!node) return (<>"Loading"</>);
+ *  return (
+ *      <div>
+ *          <div>Changed: {node.child.count}</div>
+ *          <button onClick={() => node.increment()}>Insert</button>
+ *      </div>
+ *  );
+ * }
+ * ```
+ */
+export function useTreeNode<TNode extends TreeNode | undefined = TreeNode>(
+    node: TNode,
+    stateChangeType: keyof TreeChangeEvents = "nodeChanged"
+): IUseTreeNodeResults<TNode> {
+    // When we return a proxied node to a developer, it's possible they will pass it back to us in this hook.
+    // We can't listen using Tree.on using a proxy node though...
+    // Thus, if we are already listening to a node from another instance of this hook, we look for the unproxied node.
+    const rawNode = getRawNode(node);
+    const [proxyNode, setProxyNode] = useState<TNode>(rawNode);
+    const treeProxyMapRef = useRef<WeakMap<TreeNode, TreeNode>>(new WeakMap());
+
+    useEffect(() => {
+        if (!rawNode) return;
+
+        // Set default value
+        setProxyNode(rawNode);
+        function onNodeChanged() {
+            if (!rawNode) return;
+
+            const proxyNode = buildProxy(rawNode, treeProxyMapRef.current);
+            setProxyNode(proxyNode);
+        }
+        // Listen to Fluid's base node from their TreeView so Fluid flex nodes continue to work
+        const unsubscribeListeners: (() => void)[] = [
+            Tree.on(rawNode, "nodeChanged", onNodeChanged),
+        ];
+        if (stateChangeType === "treeChanged") {
+            // Recursively for all child nodes of this node in the tree
+            setUpListenersForNodeChildren(
+                rawNode,
+                rawNode,
+                treeProxyMapRef.current,
+                unsubscribeListeners,
+                // TODO: fix typing so casting isn't necessary
+                setProxyNode as any
+            );
+        }
+        return () => {
+            unsubscribeListeners.forEach((unsubscribe) => unsubscribe());
+        };
+    }, [rawNode, stateChangeType]);
+
+    return {
+        node: proxyNode,
+    };
+}

package/src/types/ActionTypes.ts

@@ -5,8 +5,12 @@
 
 import React from "react";
 import { IFluidLoadable } from "@fluidframework/core-interfaces";
-import { LoadableObjectClass } from "fluid-framework";
-import { ITimerConfig, ILiveEvent, PresenceState } from "@microsoft/live-share";
+import {
+    ITimerConfig,
+    ILiveEvent,
+    LivePresenceData,
+} from "@microsoft/live-share";
+import { SharedObjectKind } from "fluid-framework";
 
 // React actions
 
@@ -25,12 +29,12 @@ export type SetLocalStateAction = React.Dispatch<React.SetStateAction<any>>;
 
 /**
  * Callback for UnregisterDDSSetStateAction.
- * <T extends IFluidLoadable>(uniqueKey: string, componentId: string, objectClass: LoadableObjectClass<T>, setLocalStateAction: SetLocalStateAction, onDidFirstInitialize?: (dds: T) => void) => void
+ * <T extends IFluidLoadable>(uniqueKey: string, componentId: string, objectClass: SharedObjectKind<T>, setLocalStateAction: SetLocalStateAction, onDidFirstInitialize?: (dds: T) => void) => void
  */
 export type RegisterDDSSetStateAction = <T extends IFluidLoadable>(
     uniqueKey: string,
     componentId: string,
-    objectClass: LoadableObjectClass<T>,
+    objectClass: SharedObjectKind<T>,
     setLocalStateAction: SetLocalStateAction,
     onDidFirstInitialize?: (dds: T) => void
 ) => void;
@@ -92,10 +96,11 @@ export type SetLiveStateAction<TState = undefined> = (
 
 /**
  * Callback for SendLiveEventAction<TEvent>.
- * (event: TEvent) => Promise<void>
+ * (event: TEvent, targetClientId?: string) => Promise<void>
  */
 export type SendLiveEventAction<TEvent> = (
-    event: TEvent
+    event: TEvent,
+    targetClientId?: string
 ) => Promise<ILiveEvent<TEvent>>;
 
 /**
@@ -111,9 +116,8 @@ export type OnReceivedLiveEventAction<TEvent> = (
  * Callback for OnUpdateLivePresenceAction<TData extends object = object>.
  * (data?: TData | undefined, state?: PresenceState | undefined) => Promise<void>
  */
-export type OnUpdateLivePresenceAction<TData extends object = object> = (
-    data?: TData | undefined,
-    state?: PresenceState | undefined
+export type OnUpdateLivePresenceAction<TData extends LivePresenceData = any> = (
+    data: TData
 ) => Promise<void>;
 
 /**

package/src/types/PropTypes.ts

@@ -3,8 +3,65 @@
  * Licensed under the Microsoft Live Share SDK License.
  */
 
+import { UserMeetingRole } from "@microsoft/live-share";
+import {
+    CanvasReferencePoint,
+    IBrush,
+    IPoint,
+    InkingTool,
+    LiveCanvasTreeNode,
+} from "@microsoft/live-share-canvas";
+import { useLiveCanvas } from "../live-hooks/index.js";
+
 export type SharedMapInitialData<T> =
     | Map<string, T>
     | readonly (readonly [string, T])[]
     | { [key: string]: T }
     | undefined;
+
+/**
+ * Optional props for {@link useLiveCanvas}
+ */
+export interface IUseLiveCanvasOptionalProps {
+    /**
+     * Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
+     */
+    active?: boolean;
+    /**
+     * Optional. Stateful enum for what tool to use in the `InkingManager`.
+     */
+    tool?: InkingTool;
+    /**
+     * Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
+     */
+    lineBrush?: IBrush;
+    /**
+     * Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
+     */
+    offset?: IPoint;
+    /**
+     * Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
+     */
+    scale?: number;
+    /**
+     * Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
+     */
+    referencePoint?: CanvasReferencePoint;
+    /**
+     * Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
+     */
+    isCursorShared?: boolean;
+    /**
+     * Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
+     */
+    localUserPictureUrl?: string;
+    /**
+     * 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.
+     */
+    node?: LiveCanvasTreeNode;
+    /**
+     * Optional. The user roles that are allowed to start/stop/pause the timer.
+     */
+    allowedRoles?: UserMeetingRole[];
+}