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