feat: finish term replay

mock.py

 #!/usr/bin/env python3
 
-from flask import Flask, send_from_directory, render_template, request, jsonify
+from flask import Flask, send_from_directory, render_template, request, jsonify, send_file
 from flask_socketio import SocketIO, Namespace, emit, join_room, leave_room
 import paramiko
 import uuid
@@ -204,6 +204,11 @@ def asset_groups_assets():
   return jsonify(assets)
 
 
+@app.route('/api/terminal/v1/sessions/test/replay/')
+def replay():
+  return send_file('test.json')
+
+
 if __name__ == '__main__':
   socketio = SocketIO(app)
   socketio.on_namespace(SSHws('/ssh'))

src/app/app.module.ts

@@ -39,6 +39,7 @@ import {TermpageComponent} from './termpage/termpage.component';
 import {ReplayPageComponent} from './replay-page/replay-page.component';
 import {Mp4Component} from './replay-page/mp4/mp4.component';
 import {JsonComponent} from './replay-page/json/json.component';
+import {UtcDatePipe} from './app.pipe';
 
 
 @NgModule({
@@ -70,7 +71,7 @@ import {JsonComponent} from './replay-page/json/json.component';
     ReplayPageComponent,
     Mp4Component,
     JsonComponent,
-
+    UtcDatePipe,
     // HeroListComponent,
     // CrisisListComponent,
   ],

src/app/app.pipe.ts

+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'utcDate'
+})
+export class UtcDatePipe implements PipeTransform {
+
+  transform(value: string): any {
+
+    if (!value) {
+      return '';
+    }
+
+    const dateValue = new Date(value);
+
+    const dateWithNoTimezone = new Date(
+      dateValue.getUTCFullYear(),
+      dateValue.getUTCMonth(),
+      dateValue.getUTCDate(),
+      dateValue.getUTCHours(),
+      dateValue.getUTCMinutes(),
+      dateValue.getUTCSeconds()
+    );
+
+    return dateWithNoTimezone;
+  }
+}

src/app/globals.ts

@@ -6,8 +6,14 @@ export let Video: {
   id: string,
   src: string,
   type: string,
+  json: object;
+  timelist: Array<number>;
+  totalTime: number;
 } = {
   id: 'sss',
   src: 'sss',
   type: 'json',
+  json: {},
+  timelist: [],
+  totalTime: 0,
 };

src/app/replay-page/json/json.component.html

+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-stop" aria-hidden="true"></i>-->
+<!--</button>-->
+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-step-backward" aria-hidden="true"></i>-->
+<!--</button>-->
+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-backward" aria-hidden="true"></i>-->
+<!--</button>-->
+<button type="button" class="btn" (click)="pause()">
+  <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':!toggle,'fa-pause': toggle}"></i>
+</button>
+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-forward" aria-hidden="true"></i>-->
+<!--</button>-->
+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-step-forward" aria-hidden="true"></i>-->
+<!--</button>-->
+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-expand" aria-hidden="true"></i>-->
+<!--</button>-->
+<!--<button type="button" class="btn">-->
+<!--<i class="fa fa-compress" aria-hidden="true"></i>-->
+<!--</button>-->
+<button type="button" class="btn" (click)="restart()">
+  <i class="fa fa-repeat" aria-hidden="true"></i>
+</button>
+
+<input id="scrubber" type="range" [(ngModel)]="setPercent" min=0 max=100 (mousedown)="stop()" (mouseup)="rununil()"/>
+
+{{time | utcDate | date:"HH:mm:ss"}}
+
 <div id="term"></div>
 <!--<asciinema-player></asciinema-player>-->

src/app/replay-page/json/json.component.ts

 import {Component, OnInit} from '@angular/core';
 import {Video} from '../../globals';
+import {Term} from '../../ControlPage/control/control.component';
 
 declare let jQuery: any;
 declare let Terminal: any;
@@ -10,19 +11,106 @@ declare let Terminal: any;
   styleUrls: ['./json.component.css']
 })
 export class JsonComponent implements OnInit {
-  Video = Video;
+  term: any;
+  speed = 1;
+  setPercent = 0;
+  toggle = false;
+  TICK = 33;
+  TIMESTEP = 33;
+  time = 1;
+  timer: any;
+  pos = 0;
+  scrubber: number;
 
+// Todo: initial the term size
   constructor() {
   }
 
   ngOnInit() {
-    const term = new Terminal({
-      cols: '80',
-      rows: '24',
+    this.term = new Terminal({
+      cols: '180',
+      rows: '35',
       useStyle: true,
       screenKeys: true,
     });
-    term.open(document.getElementById('term'), true);
+    this.term.open(document.getElementById('term'), true);
+  }
+
+
+  setSpeed() {
+    if (this.speed === 0) {
+      this.TIMESTEP = this.TICK;
+    } else if (this.speed < 0) {
+      this.TIMESTEP = this.TICK / -this.speed;
+    } else {
+      this.TIMESTEP = this.TICK * this.speed;
+    }
+  }
+
+  start() {
+    console.log(Video.timelist);
+  }
+
+  restart() {
+    clearInterval(this.timer);
+    this.term.reset();
+    this.time = (this.setPercent / 100) * Video.totalTime;
+    this.pos = 0;
+    this.toggle = true;
+    this.timer = setInterval(() => {
+      this.advance(this);
+    }, this.TICK);
+  }
+
+  pause() {
+    if (this.toggle) {
+      clearInterval(this.timer);
+      this.toggle = !this.toggle;
+    } else {
+      this.timer = setInterval(() => {
+        this.advance(this);
+      }, this.TICK);
+      this.toggle = !this.toggle;
+    }
+  }
+
+  advance(that) {
+    that.scrubber = Math.ceil((that.time / Video.totalTime) * 100);
+    // document.getElementById('beforeScrubberText').innerHTML = this.buildTimeString(this.time);
+    for (; that.pos < Video.timelist.length; that.pos++) {
+      if (Video.timelist[that.pos] * 1000 <= that.time) {
+        this.term.write(Video.json[Video.timelist[that.pos].toString()]);
+      } else {
+        break;
+      }
+    }
+
+    if (that.pos >= Video.timelist.length) {
+      this.toggle = !this.toggle;
+      clearInterval(that.timer);
+    }
+
+    that.time += that.TIMESTEP;
+    that.setPercent = that.time / Video.totalTime * 100;
+  }
+
+  stop() {
+    clearInterval(this.timer);
+    this.toggle = false;
+  }
+
+  rununil() {
+    this.pos = 0;
+    this.term.reset();
+    this.toggle = false;
+    for (; this.pos < Video.timelist.length; this.pos++) {
+      if (Video.timelist[this.pos] * 1000 <= this.setPercent / 100 * Video.totalTime) {
+        this.term.write(Video.json[Video.timelist[this.pos].toString()]);
+      } else {
+        break;
+      }
+    }
+    this.time = Video.timelist[this.pos];
   }
 
 }

src/app/replay-page/replay-page.component.ts

@@ -23,11 +23,17 @@ export class ReplayPageComponent implements OnInit {
     this.activatedRoute.params.subscribe((params: Params) => {
       token = params['token'];
     });
-    this._http.get('/api/replay?' + token)
+    this._http.get('/api/terminal/v1/sessions/' + token + '/replay')
       .map(res => res.json())
       .subscribe(
         data => {
-          this.Video = data;
+          this.Video.type = 'json';
+          this.Video.json = data;
+          this.Video.timelist = Object.keys(this.Video.json).map(Number);
+          this.Video.timelist = this.Video.timelist.sort(function (a, b) {
+            return a - b;
+          });
+          this.Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
         },
         err => {
           this._logger.error(err);