@microsoft/live-share-react 1.0.0-preview.12 → 1.0.0-preview.14

package/bin/utils/type-check.js

@@ -1,54 +1,54 @@
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the Microsoft Live Share SDK License.
- */
-export function isRefObject(value) {
-    return value.current === null || !!value.current;
-}
-export function isMediaElement(value) {
-    if (value) {
-        return (value.currentSrc !== undefined &&
-            value.currentTime !== undefined &&
-            value.duration !== undefined &&
-            value.ended !== undefined &&
-            value.muted !== undefined &&
-            value.paused !== undefined &&
-            value.playbackRate !== undefined &&
-            value.src !== undefined &&
-            value.volume !== undefined &&
-            value.load !== undefined &&
-            value.pause !== undefined &&
-            value.play !== undefined &&
-            value.addEventListener !== undefined &&
-            value.removeEventListener !== undefined);
-    }
-    return false;
-}
-export function isExtendedMediaMetadata(value) {
-    return value === null || !!(value === null || value === void 0 ? void 0 : value.trackIdentifier);
-}
-export function isMap(value) {
-    return value instanceof Map;
-}
-export function isEntries(value) {
-    try {
-        const tryValue = value;
-        if (typeof tryValue[0][0] === "string") {
-            return true;
-        }
-        return false;
-    }
-    catch (error) {
-        return false;
-    }
-}
-export function isJSON(value) {
-    try {
-        const tryValue = value;
-        return Object.keys(tryValue).length > 0;
-    }
-    catch (error) {
-        return false;
-    }
-}
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Microsoft Live Share SDK License.
+ */
+export function isRefObject(value) {
+    return value.current === null || !!value.current;
+}
+export function isMediaElement(value) {
+    if (value) {
+        return (value.currentSrc !== undefined &&
+            value.currentTime !== undefined &&
+            value.duration !== undefined &&
+            value.ended !== undefined &&
+            value.muted !== undefined &&
+            value.paused !== undefined &&
+            value.playbackRate !== undefined &&
+            value.src !== undefined &&
+            value.volume !== undefined &&
+            value.load !== undefined &&
+            value.pause !== undefined &&
+            value.play !== undefined &&
+            value.addEventListener !== undefined &&
+            value.removeEventListener !== undefined);
+    }
+    return false;
+}
+export function isExtendedMediaMetadata(value) {
+    return value === null || !!(value === null || value === void 0 ? void 0 : value.trackIdentifier);
+}
+export function isMap(value) {
+    return value instanceof Map;
+}
+export function isEntries(value) {
+    try {
+        const tryValue = value;
+        if (typeof tryValue[0][0] === "string") {
+            return true;
+        }
+        return false;
+    }
+    catch (error) {
+        return false;
+    }
+}
+export function isJSON(value) {
+    try {
+        const tryValue = value;
+        return Object.keys(tryValue).length > 0;
+    }
+    catch (error) {
+        return false;
+    }
+}
 //# sourceMappingURL=type-check.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/live-share-react",
-  "version": "1.0.0-preview.12",
+  "version": "1.0.0-preview.14",
   "description": "Build collaborative React apps using Microsoft's Fluid & Live Share frameworks with ease.",
   "author": "Microsoft",
   "license": "SEE LICENSE IN LICENSE",
@@ -12,29 +12,29 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@microsoft/live-share-turbo": "1.0.0-preview.12",
+    "@microsoft/live-share-turbo": "1.0.0-preview.14",
     "url": "^0.11.0",
-    "uuid": "^8.3.2"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.21.8",
     "@fluidframework/azure-client": "~1.0.3",
     "@fluidframework/test-client-utils": "^1.3.6",
-    "@microsoft/live-share": "1.0.0-preview.12",
-    "@microsoft/live-share-canvas": "1.0.0-preview.12",
-    "@microsoft/live-share-media": "1.0.0-preview.12",
+    "@microsoft/live-share": "1.0.0-preview.14",
+    "@microsoft/live-share-canvas": "1.0.0-preview.14",
+    "@microsoft/live-share-media": "1.0.0-preview.14",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/uuid": "^8.3.4",
-    "babel-loader": "^7.1.5",
+    "@types/uuid": "^9.0.1",
+    "babel-loader": "^9.1.2",
     "fluid-framework": "^1.3.6",
-    "typescript": "^4.6.4"
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "@fluidframework/azure-client": "^1.0.0",
-    "@microsoft/live-share": "1.0.0-preview.12",
-    "@microsoft/live-share-canvas": "1.0.0-preview.12",
-    "@microsoft/live-share-media": "1.0.0-preview.12",
+    "@microsoft/live-share": "1.0.0-preview.14",
+    "@microsoft/live-share-canvas": "1.0.0-preview.14",
+    "@microsoft/live-share-media": "1.0.0-preview.14",
     "fluid-framework": "^1.2.3",
     "react": "^16.8.0 || ^17 || ^18",
     "react-dom": "^16.8.0 || ^17 || ^18"

package/src/internal-hooks/useSharedStateRegistry.ts

@@ -70,9 +70,8 @@ export const useSharedStateRegistry = (
                 );
             }
             // Set initial values, if known
-            const stateMap = results?.container.initialObjects.TURBO_STATE_MAP as
-                | SharedMap
-                | undefined;
+            const stateMap = results?.container.initialObjects
+                .TURBO_STATE_MAP as SharedMap | undefined;
             const initialValue = stateMap?.get(uniqueKey);
             if (initialValue) {
                 setLocalStateAction(initialValue);
@@ -102,7 +101,8 @@ export const useSharedStateRegistry = (
         (uniqueKey: string, value: any) => {
             if (!results) return;
             const { container } = results;
-            const stateMap = container.initialObjects.TURBO_STATE_MAP as SharedMap;
+            const stateMap = container.initialObjects
+                .TURBO_STATE_MAP as SharedMap;
             stateMap.set(uniqueKey, value);
         },
         [results]
@@ -118,7 +118,8 @@ export const useSharedStateRegistry = (
             let actionsMap =
                 registeredSharedSetStateActionMapRef.current.get(uniqueKey);
             actionsMap?.clear();
-            const stateMap = container.initialObjects.TURBO_STATE_MAP as SharedMap;
+            const stateMap = container.initialObjects
+                .TURBO_STATE_MAP as SharedMap;
             stateMap.delete(uniqueKey);
         },
         [results]

package/src/live-hooks/useLiveEvent.ts

@@ -49,40 +49,36 @@ export function useLiveEvent<TEvent extends object = object>(
     /**
      * User facing: dynamically load the DDS for the given unique key.
      */
-    const { dds: liveEvent } = useDynamicDDS<LiveEvent>(uniqueKey, LiveEvent);
+    const { dds: liveEvent } = useDynamicDDS<LiveEvent<TEvent>>(
+        uniqueKey,
+        LiveEvent<TEvent>
+    );
 
     /**
      * User facing: callback to send event through `LiveEvent`
      */
     const sendEvent: SendLiveEventAction<TEvent> = React.useCallback(
-        (event: TEvent) => {
-            if (liveEvent?.isInitialized === undefined) {
-                console.error(
-                    new Error(
-                        "Cannot call emitEvent when liveEvent is undefined"
-                    )
+        async (event: TEvent) => {
+            if (liveEvent === undefined) {
+                throw new Error(
+                    "Cannot call emitEvent when liveEvent is undefined"
                 );
-                return;
             }
             if (!liveEvent.isInitialized) {
-                console.error(
-                    new Error(
-                        "Cannot call emitEvent while liveEvent is not started"
-                    )
+                throw new Error(
+                    "Cannot call emitEvent while liveEvent is not started"
                 );
-                return;
             }
-            liveEvent?.send(event);
+            return await liveEvent.send(event);
         },
-        [liveEvent?.isInitialized]
+        [liveEvent]
     );
 
     /**
      * Setup change listeners and start `LiveEvent` if needed
      */
     React.useEffect(() => {
-        if (liveEvent?.isInitialized === undefined)
-            return;
+        if (liveEvent?.isInitialized === undefined) return;
         // Register event listener
         const onEventReceived = (event: any, local: boolean) => {
             // If developer passed the optional onReceivedEvent callback, we
@@ -106,7 +102,7 @@ export function useLiveEvent<TEvent extends object = object>(
             // on unmount, remove event listeners
             liveEvent?.off(LiveEventEvents.received, onEventReceived);
         };
-    }, [liveEvent?.isInitialized]);
+    }, [liveEvent]);
 
     return {
         latestEvent,

package/src/live-hooks/useLivePresence.ts

@@ -7,6 +7,7 @@ import {
     LivePresenceUser,
     PresenceState,
     LivePresence,
+    UserMeetingRole,
 } from "@microsoft/live-share";
 import React from "react";
 import { IUseLivePresenceResults, OnUpdateLivePresenceAction } from "../types";
@@ -21,19 +22,20 @@ import { useDynamicDDS } from "../shared-hooks";
  * user data. This is useful for rendering a list of users, profile pictures, cursor positions, and more.
  *
  * @template TData Optional typing for the custom user presence data object. Default is `object` type.
-
+ * @param uniqueKey The unique key for `LivePresence`. If one does not yet exist, a new one
  * @param userId Optional. The unique ID for a user. If none is provided, a random UUID will be generated.
  * @param initialData Optional. Initial presence data object for the user.
  * @param initialPresenceState Optional. Initial status of the user's presence. Default is online.
- * @param uniqueKey Optional. The unique key for `LivePresence`. If one does not yet exist, a new one
+ * @param allowedRoles Optional. the user roles that are allowed to mutate the synchronized state
  * will be created, otherwise it will use the existing one. Default value is ":<dds-default>"
  * @returns stateful `localUser`, `otherUsers` list, and `allUsers` list. Also returns a callback method
  * to update the local user's presence and the `LivePresence` Fluid object.
  */
 export function useLivePresence<TData extends object = object>(
+    uniqueKey: string,
     initialData?: TData | undefined,
     initialPresenceState: PresenceState = PresenceState.online,
-    uniqueKey: string = ":<dds-default>"
+    allowedRoles?: UserMeetingRole[]
 ): IUseLivePresenceResults<TData> {
     /**
      * Stateful all user presence list and its non-user-facing setter method.
@@ -67,7 +69,7 @@ export function useLivePresence<TData extends object = object>(
      * User facing: callback to update the local user's presence.
      */
     const updatePresence: OnUpdateLivePresenceAction<TData> = React.useCallback(
-        (data?: TData | undefined, state?: PresenceState | undefined) => {
+        async (data?: TData | undefined, state?: PresenceState | undefined) => {
             if (!livePresence) {
                 console.error(
                     new Error(
@@ -84,7 +86,7 @@ export function useLivePresence<TData extends object = object>(
                 );
                 return;
             }
-            livePresence.update(data, state);
+            return await livePresence.update(data, state);
         },
         [livePresence]
     );
@@ -97,7 +99,7 @@ export function useLivePresence<TData extends object = object>(
 
         const onPresenceChanged = () => {
             const updatedLocalUsers: LivePresenceUser<TData>[] = [];
-            livePresence?.forEach((user) => {
+            livePresence?.getUsers().forEach((user) => {
                 updatedLocalUsers.push(user);
             });
             setAllUsers(updatedLocalUsers);
@@ -105,7 +107,11 @@ export function useLivePresence<TData extends object = object>(
         livePresence.on("presenceChanged", onPresenceChanged);
 
         if (!livePresence.isInitialized) {
-            livePresence.initialize(initialData, initialPresenceState);
+            livePresence.initialize(
+                initialData,
+                initialPresenceState,
+                allowedRoles
+            );
         } else {
             onPresenceChanged();
         }

package/src/live-hooks/useLiveState.ts

@@ -18,15 +18,15 @@ import { useDynamicDDS } from "../shared-hooks";
  * @param initialState Optional. the initial state value of type TState
  * @param allowedRoles Optional. the user roles that are allowed to mutate the synchronized state
  * @returns ordered values: first value is the synchronized state value and the second is a setter to change the state value.
+ * The setter returns a void promise, which will throw if the user does not have the required roles to set.
  */
-export function useLiveState<
-    TState = any,
->(
+export function useLiveState<TState = any>(
     uniqueKey: string,
     initialState: TState,
     allowedRoles?: UserMeetingRole[]
 ): [TState, SetLiveStateAction<TState>] {
-    const [currentState, setCurrentState] = React.useState<TState>(initialState);
+    const [currentState, setCurrentState] =
+        React.useState<TState>(initialState);
     /**
      * User facing: dynamically load the DDS for the given unique key.
      */
@@ -37,9 +37,11 @@ export function useLiveState<
 
     /**
      * Change state callback that is user facing
+     * @param state TState to set
+     * @returns void promise, which will throw if the user does not have the required roles
      */
     const setState = React.useCallback(
-        (state: TState) => {
+        async (state: TState) => {
             if (!liveState) {
                 console.error(
                     new Error(
@@ -56,7 +58,7 @@ export function useLiveState<
                 );
                 return;
             }
-            liveState.set(state);
+            return await liveState.set(state);
         },
         [liveState]
     );

package/src/live-hooks/useLiveTimer.ts

@@ -31,7 +31,7 @@ export function useLiveTimer(
     onStart?: OnTimerDidStartAction,
     onPause?: OnTimerDidPauseAction,
     onPlay?: OnTimerDidPlayAction,
-    onFinish?: OnTimerDidFinishAction,
+    onFinish?: OnTimerDidFinishAction
 ): IUseLiveTimerResults {
     /**
      * User facing: Stateful timer config.
@@ -47,11 +47,13 @@ export function useLiveTimer(
     const { dds: liveTimer } = useDynamicDDS<LiveTimer>(uniqueKey, LiveTimer);
 
     /**
-     * User facing: callback to send event through `LiveTimer`
+     * Callback to send event through `LiveTimer`
+     * @param duration the duration for the timer in milliseconds
+     * @returns void promise that will throw when user does not have required roles
      */
     const start: OnStartTimerAction = React.useCallback(
-        (duration: number): void => {
-            if (liveTimer?.isInitialized === undefined) {
+        async (duration: number) => {
+            if (liveTimer === undefined) {
                 console.error(
                     new Error("Cannot call start when liveTimer is undefined")
                 );
@@ -65,16 +67,17 @@ export function useLiveTimer(
                 );
                 return;
             }
-            liveTimer?.start(duration);
+            return await liveTimer.start(duration);
         },
-        [liveTimer?.isInitialized]
+        [liveTimer]
     );
 
     /**
-     * User facing: callback to send event through `LiveTimer`
+     * Callback to send event through `LiveTimer`
+     * @returns void promise that will throw when user does not have required roles
      */
-    const play: OnPlayTimerAction = React.useCallback((): void => {
-        if (liveTimer?.isInitialized === undefined) {
+    const play: OnPlayTimerAction = React.useCallback(async () => {
+        if (liveTimer === undefined) {
             console.error(
                 new Error("Cannot call play when liveTimer is undefined")
             );
@@ -86,14 +89,15 @@ export function useLiveTimer(
             );
             return;
         }
-        liveTimer?.play();
-    }, [liveTimer?.isInitialized]);
+        return await liveTimer.play();
+    }, [liveTimer]);
 
     /**
-     * User facing: callback to send event through `LiveTimer`
+     * Callback to send event through `LiveTimer`
+     * @returns void promise that will throw when user does not have required roles
      */
-    const pause: OnPauseTimerAction = React.useCallback((): void => {
-        if (liveTimer?.isInitialized === undefined) {
+    const pause: OnPauseTimerAction = React.useCallback(async () => {
+        if (liveTimer === undefined) {
             console.error(
                 new Error("Cannot call pause when liveTimer is undefined")
             );
@@ -105,15 +109,14 @@ export function useLiveTimer(
             );
             return;
         }
-        liveTimer?.pause();
-    }, [liveTimer?.isInitialized]);
+        return await liveTimer.pause();
+    }, [liveTimer]);
 
     /**
      * Setup change listeners and start `LiveTimer` if needed
      */
     React.useEffect(() => {
-        if (liveTimer === undefined)
-            return;
+        if (liveTimer === undefined) return;
         // Register event listeners
         const onTimerConfigChange = (config: ITimerConfig) => {
             setTimerConfig(config);

package/src/live-hooks/useMediaSynchronizer.ts

@@ -52,28 +52,34 @@ export function useMediaSynchronizer(
     /**
      * User facing: dynamically load the LiveMediaSession DDS for the given unique key.
      */
-    const { dds: mediaSession } = useDynamicDDS<LiveMediaSession>(uniqueKey, LiveMediaSession);
+    const { dds: mediaSession } = useDynamicDDS<LiveMediaSession>(
+        uniqueKey,
+        LiveMediaSession
+    );
 
     /**
-     * User facing: play callback
+     * Play callback
      */
-    const play = React.useCallback((): void => {
-        mediaSynchronizer?.play();
+    const play = React.useCallback(async () => {
+        if (!mediaSynchronizer) return;
+        return await mediaSynchronizer.play();
     }, [mediaSynchronizer]);
 
     /**
-     * User facing: pause callback
+     * Pause callback
      */
-    const pause = React.useCallback((): void => {
-        mediaSynchronizer?.pause();
+    const pause = React.useCallback(async () => {
+        if (!mediaSynchronizer) return;
+        return await mediaSynchronizer.pause();
     }, [mediaSynchronizer]);
 
     /**
      * User facing: seek callback
      */
     const seekTo = React.useCallback(
-        (time: number): void => {
-            mediaSynchronizer?.seekTo(time);
+        async (time: number) => {
+            if (!mediaSynchronizer) return;
+            return await mediaSynchronizer.seekTo(time);
         },
         [mediaSynchronizer]
     );
@@ -82,12 +88,12 @@ export function useMediaSynchronizer(
      * User facing: set track callback
      */
     const setTrack = React.useCallback(
-        (track: Partial<ExtendedMediaMetadata> | string | null): void => {
-            // TODO: fix force unwrap once synchronizer uses correct types
+        async (track: Partial<ExtendedMediaMetadata> | string | null) => {
+            if (!mediaSynchronizer) return;
             if (isExtendedMediaMetadata(track)) {
-                mediaSynchronizer!.setTrack(track);
+                return await mediaSynchronizer.setTrack(track);
             } else if (typeof track === "string") {
-                mediaSynchronizer!.setTrack({
+                return await mediaSynchronizer.setTrack({
                     trackIdentifier: track,
                 } as ExtendedMediaMetadata);
             }
@@ -119,8 +125,8 @@ export function useMediaSynchronizer(
      * Setup change listeners and start `LiveMediaSession` if needed
      */
     React.useEffect(() => {
-        if (mediaSession === undefined || !mediaPlayerElementRef)
-            return;
+        if (mediaSession === undefined || !mediaPlayerElementRef) return;
+        let mounted = true;
         // Query the HTML5 media element from the document and set reference
         let mediaPlayer: IMediaPlayer | undefined;
         if (isRefObject<IMediaPlayer>(mediaPlayerElementRef)) {
@@ -152,25 +158,29 @@ export function useMediaSynchronizer(
             // Start synchronizing the media session
             mediaSession.initialize(allowedRoles ?? []);
         } else if (initialTrack) {
-            // If we have already started the media session, the synchronizer won't have initial track
-            // data now that we are remounting.
-            // TODO: if player is loaded twice in one app at once, then this has a chance to disrupt the
-            // group state by resetting the track. MediaPlayerSynchronizer does not currently have a way to
-            // get the current track, so to fix this we need a better solution.
-            if (isExtendedMediaMetadata(initialTrack)) {
-                synchronizer.setTrack(initialTrack);
-            } else if (typeof initialTrack === "string") {
-                synchronizer.setTrack({
-                    trackIdentifier: initialTrack,
-                } as ExtendedMediaMetadata);
-            }
+            mediaSession.onLocalUserAllowed(async () => {
+                if (!mounted) return;
+                try {
+                    if (isExtendedMediaMetadata(initialTrack)) {
+                        await synchronizer.setTrack(initialTrack);
+                    } else if (typeof initialTrack === "string") {
+                        await synchronizer.setTrack({
+                            trackIdentifier: initialTrack,
+                        } as ExtendedMediaMetadata);
+                    }
+                } catch (err) {
+                    console.error(err);
+                }
+            });
         }
         setMediaSynchronizer(synchronizer);
 
         return () => {
+            mounted = false;
             synchronizer.removeAllListeners();
             mediaSession.removeAllListeners();
             synchronizer?.end();
+            mediaSession?.dispose();
         };
     }, [mediaSession]);
 

package/src/providers/AzureProvider.tsx

@@ -3,10 +3,7 @@
  * Licensed under the Microsoft Live Share SDK License.
  */
 
-import {
-    IFluidContainer,
-    LoadableObjectClassRecord,
-} from "fluid-framework";
+import { IFluidContainer, LoadableObjectClassRecord } from "fluid-framework";
 import React from "react";
 import {
     AzureClientProps,
@@ -58,9 +55,7 @@ interface IAzureProviderProps {
 /**
  * React Context provider component for using Fluid data objects & joining/creating a Fluid document `AzureClient`.
  */
-export const AzureProvider: React.FC<IAzureProviderProps> = (
-    props
-) => {
+export const AzureProvider: React.FC<IAzureProviderProps> = (props) => {
     const startedRef = React.useRef<boolean>(false);
     const clientRef = React.useRef<AzureTurboClient>(
         new AzureTurboClient(props.clientOptions)