Add ability to set arbitrary frame and to fully advance or rewind a sequence to first or last frame.

browser/index.ts

@@ -137,6 +137,7 @@ class Client {
   private connected : boolean = false;
   private progress : HTMLProgressElement;
   private progressText : HTMLElement;
+  private frames : number = 0;
 
   constructor () {
     let uri : string = this.getWebsocketUri();
@@ -212,6 +213,7 @@ class Client {
       default :
         status = 'Unknown State';
     }
+    this.frames = sequence.frames;
     document.getElementById('sequenceStatus').innerText = status;
     document.getElementById('sequenceName').innerText = sequence.name;
     document.getElementById('sequenceLength').innerText = `Sequence Length: ${sequence.frames}`;
@@ -326,6 +328,34 @@ class Client {
     this.client.send(JSON.stringify({ cmd : 'rewind' }));
   }
 
+  public sendFrameSet () {
+    const frameStr : string = (document.getElementById('frame') as HTMLInputElement).value;
+    let frameNum : number = null;
+    try {
+      frameNum = parseInt(frameStr);
+    } catch (err) {
+      console.error(`Error parsing ${frameStr}`);
+    }
+    if (frameNum === null) {
+      frameNum = 0;
+    }
+    if (frameNum < 0) {
+      frameNum = 0;
+    }
+    if (frameNum > this.frames - 1) {
+      frameNum = this.frames - 1;
+    }
+    this.client.send(JSON.stringify({ cmd : 'set', state : { sequence : { current : frameNum } } }));
+  }
+
+  public sendToEnd () {
+    this.client.send(JSON.stringify({ cmd : 'set', state : { sequence : { current : this.frames - 1 } } }));
+  }
+
+  public sendToStart () {
+    this.client.send(JSON.stringify({ cmd : 'set', state : { sequence : { current : 0 } } }));
+  }
+
   public sendSelect () {
     const hash : string = (document.getElementById('sequence') as HTMLSelectElement ).value;
     let msg : Message;

dist/index.js

@@ -227,6 +227,9 @@ async function cmd(msg) {
         case 'rewind':
             frameRewind();
             break;
+        case 'set':
+            frameSet(msg.state.sequence.current);
+            break;
         default:
             log.warn(`No matching command: ${msg.cmd}`);
     }
@@ -245,6 +248,9 @@ function frameAdvance() {
 function frameRewind() {
     sequence.frameRewind();
 }
+function frameSet(frame) {
+    sequence.frameSet(frame);
+}
 async function select(id) {
     const sequencesArr = await files_1.Files.enumerateSequences(sequences);
     const seq = sequencesArr.find(el => el.hash === id);

dist/sequence/index.js

@@ -185,7 +185,7 @@ class Sequence {
         this.updateClientsOnState();
     }
     frameRewind(frames = 1) {
-        if (this.frame + frames < 0) {
+        if (this.frame - frames < 0) {
             this.frame = 0;
         }
         else {
@@ -201,6 +201,7 @@ class Sequence {
         else if (frame > this.images.length - 1) {
             frame = this.images.length - 1;
         }
+        this.frame = frame;
         this.progress = this.frame > 0 ? this.frame / (this.images.length - 1) : 0;
         this.updateClientsOnState();
     }

src/index.ts

@@ -215,6 +215,9 @@ async function cmd (msg : Message) {
 		case 'rewind' :
 			frameRewind();
 			break;
+		case 'set' :
+			frameSet(msg.state.sequence.current);
+			break;
 		default :
 			log.warn(`No matching command: ${msg.cmd}`);
 	}
@@ -238,6 +241,9 @@ function frameRewind () {
 	sequence.frameRewind();
 }
 
+function frameSet (frame : number) {
+	sequence.frameSet(frame);
+}
 async function select (id : string) : Promise<boolean> {
 	const sequencesArr : SequenceObject[] = await Files.enumerateSequences(sequences);
 	const seq : SequenceObject = sequencesArr.find(el => el.hash === id);

src/sequence/index.ts

@@ -218,7 +218,7 @@ export class Sequence {
 	}
 
 	public frameRewind (frames : number = 1) {
-		if (this.frame + frames < 0) {
+		if (this.frame - frames < 0) {
 			this.frame = 0;
 		} else {
 			this.frame -= frames;
@@ -234,6 +234,7 @@ export class Sequence {
 		} else if (frame > this.images.length - 1) {
 			frame = this.images.length - 1;
 		}
+		this.frame = frame;
 		this.progress = this.frame > 0 ? this.frame / (this.images.length - 1) : 0;
 		this.updateClientsOnState();
 	}

static/js/index.d.ts

@@ -43,6 +43,7 @@ declare class Client {
     private connected;
     private progress;
     private progressText;
+    private frames;
     constructor();
     private getWebsocketUri;
     private onMessage;
@@ -65,6 +66,9 @@ declare class Client {
     private sendPong;
     sendAdvance(): void;
     sendRewind(): void;
+    sendFrameSet(): void;
+    sendToEnd(): void;
+    sendToStart(): void;
     sendSelect(): void;
     private receiveSelect;
     sendStart(): void;

static/js/index.js

@@ -114,6 +114,7 @@ class Display {
 class Client {
     constructor() {
         this.connected = false;
+        this.frames = 0;
         let uri = this.getWebsocketUri();
         this.progress = document.getElementById('progress');
         this.progressText = document.getElementById('progressText');
@@ -178,6 +179,7 @@ class Client {
             default:
                 status = 'Unknown State';
         }
+        this.frames = sequence.frames;
         document.getElementById('sequenceStatus').innerText = status;
         document.getElementById('sequenceName').innerText = sequence.name;
         document.getElementById('sequenceLength').innerText = `Sequence Length: ${sequence.frames}`;
@@ -273,6 +275,32 @@ class Client {
     sendRewind() {
         this.client.send(JSON.stringify({ cmd: 'rewind' }));
     }
+    sendFrameSet() {
+        const frameStr = document.getElementById('frame').value;
+        let frameNum = null;
+        try {
+            frameNum = parseInt(frameStr);
+        }
+        catch (err) {
+            console.error(`Error parsing ${frameStr}`);
+        }
+        if (frameNum === null) {
+            frameNum = 0;
+        }
+        if (frameNum < 0) {
+            frameNum = 0;
+        }
+        if (frameNum > this.frames - 1) {
+            frameNum = this.frames - 1;
+        }
+        this.client.send(JSON.stringify({ cmd: 'set', state: { sequence: { current: frameNum } } }));
+    }
+    sendToEnd() {
+        this.client.send(JSON.stringify({ cmd: 'set', state: { sequence: { current: this.frames - 1 } } }));
+    }
+    sendToStart() {
+        this.client.send(JSON.stringify({ cmd: 'set', state: { sequence: { current: 0 } } }));
+    }
     sendSelect() {
         const hash = document.getElementById('sequence').value;
         let msg;

views/index.hbs

@@ -99,7 +99,7 @@
 						<button id="stop" class="medium sequenceCtrl" onclick="client.sendStop();" disabled>Stop</button>
 						<button id="rewind" class="small sequenceCtrl" onclick="client.sendToStart();" disabled><<</button>
 						<button id="rewind" class="small sequenceCtrl" onclick="client.sendRewind();" disabled><</button>
-						<input id="frame" type="number" value="00000" class="sequenceCtrl medium" disabled />
+						<input id="frame" type="number" value="00000" class="sequenceCtrl medium" onchange="client.sendFrameSet();" disabled />
 						<button id="advance" class="small sequenceCtrl" onclick="client.sendAdvance()" disabled>></button>
 						<button id="advance" class="small sequenceCtrl" onclick="client.sendToEnd()" disabled>>></button>
 					</form>