mol-plugin: remote play on load, better auto playback

src/mol-plugin/behavior/static/state.ts

@@ -146,13 +146,13 @@ export function Snapshots(ctx: PluginContext) {
         return ctx.state.setSnapshot(snapshot);
     });
 
-    PluginCommands.State.Snapshots.Upload.subscribe(ctx, ({ name, description, serverUrl }) => {
+    PluginCommands.State.Snapshots.Upload.subscribe(ctx, ({ name, description, playOnLoad, serverUrl }) => {
         return fetch(`${serverUrl}/set?name=${encodeURIComponent(name || '')}&description=${encodeURIComponent(description || '')}`, {
             method: 'POST',
             mode: 'cors',
             referrer: 'no-referrer',
             headers: { 'Content-Type': 'application/json; charset=utf-8' },
-            body: JSON.stringify(ctx.state.snapshots.getRemoteSnapshot())
+            body: JSON.stringify(ctx.state.snapshots.getRemoteSnapshot({ name, description, playOnLoad }))
         }) as any as Promise<void>;
     });
 

src/mol-plugin/command.ts

@@ -35,7 +35,7 @@ export const PluginCommands = {
             Apply: PluginCommand<{ id: string }>(),
             Clear: PluginCommand<{}>(),
 
-            Upload: PluginCommand<{ name?: string, description?: string, serverUrl: string }>(),
+            Upload: PluginCommand<{ name?: string, description?: string, playOnLoad?: boolean, serverUrl: string }>(),
             Fetch: PluginCommand<{ url: string }>(),
 
             DownloadToFile: PluginCommand<{ name?: string }>(),

src/mol-plugin/state/snapshots.ts

@@ -148,11 +148,11 @@ class PluginStateSnapshotManager extends PluginComponent<{
         const next = entry && entry.snapshot;
         if (!next) return;
         await this.plugin.state.setSnapshot(next);
-        if (snapshot.playback &&  snapshot.playback.isPlaying) this.play();
+        if (snapshot.playback && snapshot.playback.isPlaying) this.play(true);
         return next;
     }
 
-    getRemoteSnapshot(options?: { name?: string, description?: string }): PluginStateSnapshotManager.RemoteSnapshot {
+    getRemoteSnapshot(options?: { name?: string, description?: string, playOnLoad?: boolean }): PluginStateSnapshotManager.RemoteSnapshot {
         // TODO: diffing and all that fancy stuff
         return {
             timestamp: +new Date(),
@@ -160,7 +160,7 @@ class PluginStateSnapshotManager extends PluginComponent<{
             description: options && options.description,
             current: this.state.current,
             playback: {
-                isPlaying: this.state.isPlaying,
+                isPlaying: !!(options && options.playOnLoad),
                 nextSnapshotDelayInMs: this.state.nextSnapshotDelayInMs
             },
             entries: this.state.entries.valueSeq().toArray()
@@ -181,9 +181,21 @@ class PluginStateSnapshotManager extends PluginComponent<{
         if (this.state.isPlaying) this.timeoutHandle = setTimeout(this.next, delay);
     };
 
-    play() {
+    play(delayFirst: boolean = false) {
         this.updateState({ isPlaying: true });
-        this.next();
+
+        if (delayFirst) {
+            const e = this.getEntry(this.state.current);
+            if (!e) {
+                this.next();
+                return;
+            }
+            const snapshot = e.snapshot;
+            const delay = typeof snapshot.durationInMs !== 'undefined' ? snapshot.durationInMs : this.state.nextSnapshotDelayInMs;
+            this.timeoutHandle = setTimeout(this.next, delay);
+        } else {
+            this.next();
+        }
     }
 
     stop() {

src/mol-plugin/ui/state.tsx

@@ -168,6 +168,7 @@ class RemoteStateSnapshots extends PluginUIComponent<
         name: PD.Text(),
         options: PD.Group({
             description: PD.Text(),
+            playOnLoad: PD.Boolean(false),
             serverUrl: PD.Text('https://webchem.ncbr.muni.cz/molstar-state')
         })
     };
@@ -215,6 +216,7 @@ class RemoteStateSnapshots extends PluginUIComponent<
         await PluginCommands.State.Snapshots.Upload.dispatch(this.plugin, {
             name: this.state.params.name,
             description: this.state.params.options.description,
+            playOnLoad: this.state.params.options.playOnLoad,
             serverUrl: this.state.params.options.serverUrl
         });
         this.setState({ isBusy: false });