From 0abbb52da3adbf343dca3750242f2f4e47aa4293 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Sat, 9 Mar 2019 23:40:45 +0100
Subject: [PATCH] mol-plugin: remote play on load, better auto playback

---
 src/mol-plugin/behavior/static/state.ts |  4 ++--
 src/mol-plugin/command.ts               |  2 +-
 src/mol-plugin/state/snapshots.ts       | 22 +++++++++++++++++-----
 src/mol-plugin/ui/state.tsx             |  2 ++
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/mol-plugin/behavior/static/state.ts b/src/mol-plugin/behavior/static/state.ts
index 566d4410e..818a14252 100644
--- a/src/mol-plugin/behavior/static/state.ts
+++ b/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>;
     });
 
diff --git a/src/mol-plugin/command.ts b/src/mol-plugin/command.ts
index 5c28e8e99..05a967dcc 100644
--- a/src/mol-plugin/command.ts
+++ b/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 }>(),
diff --git a/src/mol-plugin/state/snapshots.ts b/src/mol-plugin/state/snapshots.ts
index 0b6d06981..a8c68a38e 100644
--- a/src/mol-plugin/state/snapshots.ts
+++ b/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() {
diff --git a/src/mol-plugin/ui/state.tsx b/src/mol-plugin/ui/state.tsx
index 31265bb4d..740627056 100644
--- a/src/mol-plugin/ui/state.tsx
+++ b/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 });
-- 
GitLab