@microsoft/live-share-media 1.0.0-preview.1 → 1.0.0-preview.11

package/README.md

@@ -11,15 +11,13 @@ You can find our API reference documentation at [aka.ms/livesharedocs](https://a
 To add the latest version of the SDK to your application using NPM:
 
 ```bash
-npm install @microsoft/live-share --save
-npm install @microsoft/live-share-media --save
+npm install fluid-framework @fluidframework/azure-client @microsoft/live-share @microsoft/live-share-media --save
 ```
 
 or using [Yarn](https://yarnpkg.com/):
 
 ```bash
-yarn add @microsoft/live-share
-yarn add @microsoft/live-share-media
+yarn add fluid-framework @fluidframework/azure-client @microsoft/live-share @microsoft/live-share-media
 ```
 
 ## Building package
@@ -50,15 +48,16 @@ This will use lerna to hoist and build all dependencies.
 ```
 
 ```javascript
-import * as microsoftTeams from "@microsoft/teams-js";
-import { TeamsFluidClient } from "@microsoft/live-share";
+import { app, LiveShareHost } from "@microsoft/teams-js";
+import { LiveShareClient } from "@microsoft/live-share";
 import { LiveMediaSession } from "@microsoft/live-share-media";
 
 // Initialize the Teams Client SDK
 await microsoftTeams.app.initialize();
 
 // Setup the Fluid container
-const client = new TeamsFluidClient();
+const host = LiveShareHost.create();
+const client = new LiveShareClient(host);
 const schema = {
   initialObjects: {
     mediaSession: LiveMediaSession,
@@ -112,11 +111,14 @@ The Live Share SDK contains dependencies for [@microsoft/teams-js](https://www.n
 
 **It is critical that your app use the package dependencies listed in the table below.** Lookup the version of the `@microsoft/live-share` you're using and set any other dependencies in your package.json file to match:
 
-| @microsoft/live-share | @microsoft/teams-js  | fluid-framework | @microsoft/live-share-(media or canvas) | @fluidframework/azure-client | @microsoft/TeamsFx              | @microsoft/TeamsFx-react        |
-| --------------------- | -------------------- | --------------- | --------------------------- | ---------------------------- | ------------------------------- | ------------------------------- |
-| 1.0.0-preview.1       | 2.0.0-experimental.1 | ~1.2.3 | 1.0.0-preview.1 (optional)  | ~1.0.2 (optional)            | 2.0.0-experimental.0 (optional) | 2.0.0-experimental.0 (optional) |
-| ~0.5.1                | 2.0.0-experimental.1 | ~1.2.3          | ~0.5.1 (optional)           | ~1.0.2 (optional)            | 2.0.0-experimental.0 (optional) | 2.0.0-experimental.0 (optional) |
-| ~0.3.1                | 2.0.0-experimental.0 | ~0.59.0         | ~0.3.1 (optional)           | ~0.59.0 (optional)           | 2.0.0-experimental.0 (optional) | 2.0.0-experimental.0 (optional) |
+| @microsoft/live-share | @microsoft/teams-js  | fluid-framework | @microsoft/live-share-\*   | @fluidframework/azure-client | @microsoft/TeamsFx              | @microsoft/TeamsFx-react        |
+| --------------------- | -------------------- | --------------- | -------------------------- | ---------------------------- | ------------------------------- | ------------------------------- |
+| 1.0.0-preview.11       | ^2.11.0              | ^1.2.3          | 1.0.0-preview.11 (optional) | ^1.0.0 (optional)            | ^2.5.0 (optional)               | ^2.5.0 (optional)               |
+| 1.0.0-preview.10       | ^2.10.1              | ~1.2.3          | 1.0.0-preview.10 (optional) | ~1.0.2 (optional)            | ^2.5.0 (optional)               | ^2.5.0 (optional)               |
+| 1.0.0-preview.8       | ^2.5.0               | ~1.2.3          | 1.0.0-preview.10 (optional) | ~1.0.2 (optional)            | ^2.5.0 (optional)               | ^2.5.0 (optional)               |
+| 1.0.0-preview.3       | 2.0.0-experimental.1 | ~1.2.3          | 1.0.0-preview.3 (optional) | ~1.0.2 (optional)            | 2.0.0-experimental.0 (optional) | 2.0.0-experimental.0 (optional) |
+| ~0.5.1                | 2.0.0-experimental.1 | ~1.2.3          | ~0.5.1 (optional)          | ~1.0.2 (optional)            | 2.0.0-experimental.0 (optional) | 2.0.0-experimental.0 (optional) |
+| ~0.3.1                | 2.0.0-experimental.0 | ~0.59.0         | ~0.3.1 (optional)          | ~0.59.0 (optional)           | 2.0.0-experimental.0 (optional) | 2.0.0-experimental.0 (optional) |
 
 ## Contributing
 
@@ -131,7 +133,7 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 
 ## Reporting Security Issues
 
-Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the [MSRC PGP](https://technet.microsoft.com/en-us/security/dn606155) key, can be found in the [Security TechCenter](https://technet.microsoft.com/en-us/security/default).
+Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the [MSRC PGP](https://technet.microsoft.com/security/dn606155) key, can be found in the [Security TechCenter](https://technet.microsoft.com/security/default).
 
 Copyright (c) Microsoft Corporation. All rights reserved.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/live-share-media",
-    "version": "1.0.0-preview.1",
+    "version": "1.0.0-preview.11",
     "description": "Live Share classes that synchronize media playback across clients.",
     "author": "Microsoft",
     "license": "SEE LICENSE IN LICENSE",
@@ -13,19 +13,21 @@
         "test:debug": "ts-mocha src/**/*.spec.ts --inspect-brk",
         "test:coverage": "nyc --reporter=html --reporter=text --reporter=text-summary npm test"
     },
-    "dependencies": {
-        "fluid-framework": "~1.2.3",
-        "@microsoft/live-share": "1.0.0-preview.1"
-    },
     "devDependencies": {
+        "@microsoft/live-share": "1.0.0-preview.11",
         "@types/assert": "^1.5.6",
-        "@types/mocha": "^9.0.0",
-        "@types/node": "^10.12.24",
-        "mocha": "^9.1.1",
+        "@types/mocha": "^10.0.1",
+        "@types/node": "^18.11.18",
+        "fluid-framework": "^1.3.6",
+        "mocha": "^10.2.0",
         "nyc": "^15.1.0",
-        "ts-mocha": "^9.0.2",
+        "ts-mocha": "^10.0.0",
         "typescript": "^4.6.4"
     },
+    "peerDependencies": {
+        "@microsoft/live-share": "1.0.0-preview.11",
+        "fluid-framework": "^1.2.3"
+    },
     "repository": {
         "directory": "packages/live-share-media",
         "type": "git",

package/src/IMediaPlayer.ts

@@ -16,6 +16,14 @@ export interface IMediaPlayer {
     load(): void;
     pause(): void;
     play(): Promise<void>;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    addEventListener(
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | AddEventListenerOptions
+    ): void;
+    removeEventListener(
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | EventListenerOptions
+    ): void;
 }

package/src/LiveMediaSession.ts

@@ -3,40 +3,49 @@
  * Licensed under the Microsoft Live Share SDK License.
  */
 
-import { DataObject, DataObjectFactory } from '@fluidframework/aqueduct';
-import { LiveTelemetryLogger, UserMeetingRole } from '@microsoft/live-share';
-import { MediaPlayerSynchronizer } from './MediaPlayerSynchronizer';
-import { ITriggerActionEvent, TelemetryEvents } from './internals';
-import { MediaSessionCoordinatorEvents, ExtendedMediaSessionAction, ExtendedMediaSessionActionDetails } from './MediaSessionExtensions';
-import { LiveMediaSessionCoordinator, IMediaPlayerState } from './LiveMediaSessionCoordinator';
-import { MediaSessionActionThrottler } from './MediaSessionActionThrottler';
-import { RepeatedActionThrottler } from './RepeatedActionThrottler';
-import { IMediaPlayer } from './IMediaPlayer';
+import { DataObject, DataObjectFactory } from "@fluidframework/aqueduct";
+import { DynamicObjectRegistry, LiveTelemetryLogger, UserMeetingRole } from "@microsoft/live-share";
+import { MediaPlayerSynchronizer } from "./MediaPlayerSynchronizer";
+import { ITriggerActionEvent, TelemetryEvents } from "./internals";
+import {
+    MediaSessionCoordinatorEvents,
+    ExtendedMediaSessionAction,
+    ExtendedMediaSessionActionDetails,
+} from "./MediaSessionExtensions";
+import {
+    LiveMediaSessionCoordinator,
+    IMediaPlayerState,
+} from "./LiveMediaSessionCoordinator";
+import { MediaSessionActionThrottler } from "./MediaSessionActionThrottler";
+import { RepeatedActionThrottler } from "./RepeatedActionThrottler";
+import { IMediaPlayer } from "./IMediaPlayer";
 
 /**
  * Live fluid object that synchronizes media playback across multiple clients.
  */
- export class LiveMediaSession extends DataObject {
-    private _actionThrottler: MediaSessionActionThrottler = new RepeatedActionThrottler();
+export class LiveMediaSession extends DataObject {
+    private _actionThrottler: MediaSessionActionThrottler =
+        new RepeatedActionThrottler();
     private _logger?: LiveTelemetryLogger;
     private _requestPlayerStateHandler?: () => IMediaPlayerState;
     private _coordinator?: LiveMediaSessionCoordinator;
-    private readonly _actionHandlers: Map<string, MediaSessionActionHandler> = new Map();
+    private readonly _actionHandlers: Map<string, MediaSessionActionHandler> =
+        new Map();
     private _synchronizing?: MediaPlayerSynchronizer;
 
     // Position update timer
     private _updateTimer: any;
     private _lastUpdateTime: number = 0;
-    
+
     /**
      * The objects fluid type name.
      */
-     public static readonly TypeName = `@microsoft/fluid-media:SharedMediaSession`;
+    public static readonly TypeName = `@microsoft/fluid-media:SharedMediaSession`;
 
     /**
      * The objects fluid type factory.
      */
-     public static readonly factory = new DataObjectFactory(
+    public static readonly factory = new DataObjectFactory(
         LiveMediaSession.TypeName,
         LiveMediaSession,
         [],
@@ -46,15 +55,15 @@ import { IMediaPlayer } from './IMediaPlayer';
     /**
      * Extension point that lets applications replace the default logic for throttling the sessions
      * local sync behavior.
-     * 
+     *
      * @remarks
-     * The `LiveMediaCoordinator` is fairly aggressive at wanting to keep the local media player 
-     * in sync with the rest of the group. This aggressiveness can result in the coordinator sending 
-     * new sync actions before the local player has finished responding to the previous sync action. 
+     * The `LiveMediaCoordinator` is fairly aggressive at wanting to keep the local media player
+     * in sync with the rest of the group. This aggressiveness can result in the coordinator sending
+     * new sync actions before the local player has finished responding to the previous sync action.
      * The `ActionThrottler` gives apps fine grain control over how aggressive they want sync to be.
-     * 
-     * By default, a `RepeatedAction` throttler is used which prevents the same sync action from 
-     * being sent within an adjustable time period.    
+     *
+     * By default, a `RepeatedAction` throttler is used which prevents the same sync action from
+     * being sent within an adjustable time period.
      */
     public get actionThrottler(): MediaSessionActionThrottler {
         return this._actionThrottler;
@@ -76,7 +85,7 @@ import { IMediaPlayer } from './IMediaPlayer';
      * Returns true if the object has been initialized.
      */
     public get isStarted(): boolean {
-        return this.isInitialized
+        return this.isInitialized;
     }
 
     /**
@@ -88,7 +97,7 @@ import { IMediaPlayer } from './IMediaPlayer';
 
     /**
      * Returns the logger used by the session and coordinator.
-     * 
+     *
      * @remarks
      * This is used by the `MediaPlayerSynchronizer` to log events.
      */
@@ -98,10 +107,12 @@ import { IMediaPlayer } from './IMediaPlayer';
 
     /**
      * initialize the object.
-     * @param acceptTransportChangesFrom Optional. List of roles allowed to group transport 
+     * @param acceptTransportChangesFrom Optional. List of roles allowed to group transport
      * operations like play/pause/seek/setTrack.
      */
-     public initialize(acceptTransportChangesFrom?: UserMeetingRole[]): Promise<void> {
+    public initialize(
+        acceptTransportChangesFrom?: UserMeetingRole[]
+    ): Promise<void> {
         return this.coordinator.initialize(acceptTransportChangesFrom);
     }
 
@@ -110,11 +121,13 @@ import { IMediaPlayer } from './IMediaPlayer';
      * @param action Name of the action to register a handler for.
      * @param handler Function called when the action is triggered.
      */
-    public setActionHandler(action: ExtendedMediaSessionAction, handler: MediaSessionActionHandler | null): void {
+    public setActionHandler(
+        action: ExtendedMediaSessionAction,
+        handler: MediaSessionActionHandler | null
+    ): void {
         if (handler) {
             // add handler
             this._actionHandlers.set(action, handler);
-
         } else if (this._actionHandlers.has(action)) {
             // remove handler
             this._actionHandlers.delete(action);
@@ -122,8 +135,8 @@ import { IMediaPlayer } from './IMediaPlayer';
     }
 
     /**
-     * Registers a handler that will be queried anytime the group coordinate needs to know the 
-     * local players transport state and position. 
+     * Registers a handler that will be queried anytime the group coordinate needs to know the
+     * local players transport state and position.
      */
     public setRequestPlayerStateHandler(handler: () => IMediaPlayerState) {
         this._requestPlayerStateHandler = handler;
@@ -142,7 +155,9 @@ import { IMediaPlayer } from './IMediaPlayer';
 
         // Start position update timer
         if (!this._updateTimer) {
-            this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.BeginPositionUpdateTimer);
+            this.logger.sendTelemetryEvent(
+                TelemetryEvents.MediaSession.BeginPositionUpdateTimer
+            );
             this._updateTimer = setInterval(() => {
                 // Get current state
                 const state = this.getCurrentPlayerState();
@@ -153,7 +168,10 @@ import { IMediaPlayer } from './IMediaPlayer';
                 // Send position update if interval hit
                 const now = new Date().getTime();
                 const delta = (now - this._lastUpdateTime) / 1000;
-                if (this.coordinator.isInitialized && delta >= this.coordinator.positionUpdateInterval) {
+                if (
+                    this.coordinator.isInitialized &&
+                    delta >= this.coordinator.positionUpdateInterval
+                ) {
                     this._lastUpdateTime = now;
                     this.coordinator.sendPositionUpdate(state);
                 }
@@ -166,73 +184,122 @@ import { IMediaPlayer } from './IMediaPlayer';
     }
 
     protected async hasInitialized(): Promise<void> {
-        this. _logger = new LiveTelemetryLogger(this.runtime);
+        this._logger = new LiveTelemetryLogger(this.runtime);
 
         // Create coordinator and listen for triggered actions
-        this._coordinator = new LiveMediaSessionCoordinator(this.runtime, () => this.getCurrentPlayerState());
-        this._coordinator.on(MediaSessionCoordinatorEvents.triggeraction, (event: ITriggerActionEvent) => {
-            // Pre-process actions
-            const details = event.details;
-            const seekTime = typeof details.seekTime == 'number' ? details.seekTime : -1;
-            switch (details.action) {
-                case 'play':
-                    this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.PlayAction, null, {position: seekTime});
-                    break;
-                case 'pause':
-                    this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.PauseAction, null, {position: seekTime});
-                    break;
-                case 'seekto':
-                    this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.SeekToAction, null, {position: seekTime});
-                    break;
-                case 'settrack':
-                    this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.SetTrackAction);
-                    break;
-                case 'datachange':
-                    this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.DataChangeAction);
-                    break;
-                case 'catchup':
-                    // Default to seekto if catchup not implemented
-                    this.logger.sendTelemetryEvent(TelemetryEvents.MediaSession.CatchUpAction, null, {position: seekTime});
-                    if (!this._actionHandlers.has('catchup')) {
-                        details.action = 'seekto';
-                    }
-                    break;
-            }
+        this._coordinator = new LiveMediaSessionCoordinator(this.runtime, () =>
+            this.getCurrentPlayerState()
+        );
+        this._coordinator.on(
+            MediaSessionCoordinatorEvents.triggeraction,
+            (event: ITriggerActionEvent) => {
+                // Pre-process actions
+                const details = event.details;
+                const seekTime =
+                    typeof details.seekTime == "number" ? details.seekTime : -1;
+                switch (details.action) {
+                    case "play":
+                        this.logger.sendTelemetryEvent(
+                            TelemetryEvents.MediaSession.PlayAction,
+                            null,
+                            {
+                                position: seekTime,
+                            }
+                        );
+                        break;
+                    case "pause":
+                        this.logger.sendTelemetryEvent(
+                            TelemetryEvents.MediaSession.PauseAction,
+                            null,
+                            {
+                                position: seekTime,
+                            }
+                        );
+                        break;
+                    case "seekto":
+                        this.logger.sendTelemetryEvent(
+                            TelemetryEvents.MediaSession.SeekToAction,
+                            null,
+                            {
+                                position: seekTime,
+                            }
+                        );
+                        break;
+                    case "settrack":
+                        this.logger.sendTelemetryEvent(
+                            TelemetryEvents.MediaSession.SetTrackAction
+                        );
+                        break;
+                    case "datachange":
+                        this.logger.sendTelemetryEvent(
+                            TelemetryEvents.MediaSession.DataChangeAction
+                        );
+                        break;
+                    case "catchup":
+                        // Default to seekto if catchup not implemented
+                        this.logger.sendTelemetryEvent(
+                            TelemetryEvents.MediaSession.CatchUpAction,
+                            null,
+                            {
+                                position: seekTime,
+                            }
+                        );
+                        if (!this._actionHandlers.has("catchup")) {
+                            details.action = "seekto";
+                        }
+                        break;
+                }
 
-            // Dispatch action
-            this.dispatchAction(details);
-        });
+                // Dispatch action
+                this.dispatchAction(details);
+            }
+        );
     }
 
     private checkWaitPointHit(state: IMediaPlayerState): void {
         // Was a wait point hit?
         if (state.positionState && this.coordinator.isInitialized) {
             const waitPoint = this.coordinator.findNextWaitPoint();
-            if (waitPoint && state.positionState.position != undefined && state.positionState.position >= waitPoint.position) {
+            if (
+                waitPoint &&
+                state.positionState.position != undefined &&
+                state.positionState.position >= waitPoint.position
+            ) {
                 // Ensure handler registered
-                if (!this._actionHandlers.has('wait')) {
-                    throw new Error(`SharedMediaSession: wait point hit but no 'wait' action registered.`);
+                if (!this._actionHandlers.has("wait")) {
+                    throw new Error(
+                        `SharedMediaSession: wait point hit but no 'wait' action registered.`
+                    );
                 }
 
                 // Begin suspension for wait point
                 const suspension = this.coordinator.beginSuspension(waitPoint);
-                this.dispatchAction({action: 'wait', suspension: suspension});
+                this.dispatchAction({ action: "wait", suspension: suspension });
             }
         }
     }
 
     private getCurrentPlayerState(): IMediaPlayerState {
         if (!this._requestPlayerStateHandler) {
-            throw new Error(`SharedMediaSession: no getPlayerState callback configured.`);
+            throw new Error(
+                `SharedMediaSession: no getPlayerState callback configured.`
+            );
         }
 
         return this._requestPlayerStateHandler();
     }
 
-    private dispatchAction(details: MediaSessionActionDetails|ExtendedMediaSessionActionDetails): void {
+    private dispatchAction(
+        details: MediaSessionActionDetails | ExtendedMediaSessionActionDetails
+    ): void {
         if (this._actionHandlers.has(details.action)) {
             const handler = this._actionHandlers.get(details.action);
             this._actionThrottler.throttled(details, handler);
         }
     }
 }
+
+/**
+ * Register `LiveMediaSession` as an available `LoadableObjectClass` for use in packages that support dynamic object loading, such as `@microsoft/live-share-turbo`.
+ */
+DynamicObjectRegistry.registerObjectClass(LiveMediaSession, LiveMediaSession.TypeName);