[Update] 修改录像播放

src/app/pages/replay/guacamole/guacamole.component.ts

@@ -11,13 +11,40 @@ function zeroPad(num, minLength) {
   return str;
 }
 
+function formatTimeWithSeconds(seconds) {
+  let hour = 0, minute = 0, second = 0;
+  const ref = [3600, 60, 1];
+  for (let i = 0; i < ref.length; i++) {
+    const val = ref[i];
+    while (val <= seconds) {
+      seconds -= val;
+      switch (i) {
+        case 0:
+          hour++;
+          break;
+        case 1:
+          minute++;
+          break;
+        case 2:
+          second++;
+          break;
+      }
+    }
+  }
+  return [hour, minute, second];
+}
+
 function formatTime(millis: number) {
-  const totalSeconds = Math.floor(millis / 1000);
-  const seconds = totalSeconds % 60;
-  const minutes = Math.floor(totalSeconds / 60);
-  return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
+  const totalSeconds = millis / 1000;
+  const [hour, minute, second] = formatTimeWithSeconds(totalSeconds);
+  let time = zeroPad(minute, 2) + ':' + zeroPad(second, 2);
+  if (hour > 0) {
+    time = zeroPad(hour, 2) + ':' + time;
+  }
+  return time;
 }
 
+
 @Component({
   selector: 'app-replay-guacamole',
   templateUrl: './guacamole.component.html',
@@ -115,6 +142,4 @@ export class ReplayGuacamoleComponent implements OnInit {
       this.isPlaying = false;
     }
   }
-
-
 }

src/app/pages/replay/json/json.component.html

 <div>
-  <!--<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" (click)="speedDown()"></i>
   </button>
   <button type="button" class="btn" (click)="toggle()">
-    <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':!play,'fa-pause': play}"></i>
+    <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':!isPlaying, 'fa-pause': isPlaying}"></i>
   </button>
   <button type="button" class="btn" (click)="speedUp()">
     <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)]="percent" min=0 max=100 (mousedown)="stop()" (mouseup)="runFrom()"/>
+  <input id="scrubber" type="range" [(ngModel)]="time" min=0 [attr.max]="max" (mouseup)="runFrom()"/>
 
-  {{time | utcDate | date:"HH:mm:ss"}}
+  <span id="position">{{ position }}</span>
+  <span>/</span>
+  <span id="duration">{{ duration }}</span>
   {{"Speed"|trans}}: {{speed}}
 </div>
 

src/app/pages/replay/json/json.component.ts

@@ -3,23 +3,82 @@ import {Terminal} from 'xterm';
 import {HttpService, LogService} from '../../../app.service';
 import {Replay} from '../replay.model';
 
+function zeroPad(num, minLength) {
+  let str = num.toString();
+  // Add leading zeroes until string is long enough
+  while (str.length < minLength) {
+    str = '0' + str;
+  }
+  return str;
+}
+
+function formatTimeWithSeconds(seconds) {
+  let hour = 0, minute = 0, second = 0;
+  const ref = [3600, 60, 1];
+  for (let i = 0; i < ref.length; i++) {
+    const val = ref[i];
+    while (val <= seconds) {
+      seconds -= val;
+      switch (i) {
+        case 0:
+          hour++;
+          break;
+        case 1:
+          minute++;
+          break;
+        case 2:
+          second++;
+          break;
+      }
+    }
+  }
+  return [hour, minute, second];
+}
+
+function formatTime(millis: number) {
+  const totalSeconds = millis / 1000;
+  const [hour, minute, second] = formatTimeWithSeconds(totalSeconds);
+  let time = zeroPad(minute, 2) + ':' + zeroPad(second, 2);
+  if (hour > 0) {
+    time = zeroPad(hour, 2) + ':' + time;
+  }
+  return time;
+}
+
+
 @Component({
   selector: 'app-replay-json',
   templateUrl: './json.component.html',
   styleUrls: ['./json.component.css']
 })
 export class JsonComponent implements OnInit {
+  isPlaying = false;
+  recording: any;
+  playerRef: any;
+  displayRef: any;
+  max = 0;
+  time = 0;
+  duration = '00:00';
+  timeList = [];
+  replayData = {};
   speed = 2;
-  percent = 0;
-  play = false;
-  tick = 33;
-  timeStep = 33;
-  time = 1;
+  tick = 33; // 每33s滴答一次
+  timeStep = 33; // 步长
   timer: any; // 多长时间播放下一个
   pos = 0; // 播放点
-  scrubber: number;
   term: Terminal;
-
+  get position() {
+    return formatTime(this.time);
+  }
+  set position(data) {
+    return '00:00';
+  }
+  get duration() {
+    return formatTime(this.max);
+  }
+  set duration(data) {
+    return '00:00';
+  }
   @Input() replay: Replay;
 
   constructor(private _http: HttpService) {}
@@ -37,12 +96,12 @@ export class JsonComponent implements OnInit {
       this._http.get_replay_data(this.replay.src)
         .subscribe(
           data => {
-            this.replay.json = data;
-            this.replay.timelist = Object.keys(this.replay.json).map(Number);
-            this.replay.timelist = this.replay.timelist.sort((a, b) => {
+            this.replayData = data;
+            this.timeList = Object.keys(this.replayData).map(Number);
+            this.timeList = this.timeList.sort((a, b) => {
               return a - b;
             });
-            this.replay.totalTime = this.replay.timelist[this.replay.timelist.length - 1] * 1000;
+            this.max = this.timeList[this.timeList.length - 1] * 1000;
             this.toggle();
           },
           err => {
@@ -56,55 +115,48 @@ export class JsonComponent implements OnInit {
   restart() {
     clearInterval(this.timer);
     this.term.reset();
-    this.time = 1;
     this.pos = 0;
-    this.play = true;
+    this.isPlaying = true;
     this.timer = setInterval(() => {
       this.advance();
     }, this.tick);
   }
 
   toggle() {
-    if (this.play) {
+    if (this.isPlaying) {
       clearInterval(this.timer);
-      this.play = !this.play;
+      this.isPlaying = !this.isPlaying;
     } else {
       this.timer = setInterval(() => {
         this.advance();
       }, this.tick);
-      this.play = !this.play;
+      this.isPlaying = !this.isPlaying;
     }
   }
 
   advance() {
     // 每个time间隔执行一次
-    // this.scrubber = Math.ceil((this.time / this.replay.totalTime) * 100);
-    for (; this.pos < this.replay.timelist.length; this.pos++) {
-      if (this.replay.timelist[this.pos] * 1000 <= this.time) {
-        this.term.write(this.replay.json[this.replay.timelist[this.pos].toString()]);
+    // for (let i in this.timeList) {
+    // }
+    for (; this.pos < this.timeList.length; this.pos++) {
+      if (this.timeList[this.pos] * 1000 <= this.time) {
+        this.term.write(this.replayData[this.timeList[this.pos].toString()]);
       } else {
         break;
       }
     }
 
     // 超过了总的时间点, 停止播放
-    if (this.pos >= this.replay.timelist.length) {
-      this.play = !this.play;
+    if (this.pos >= this.timeList.length) {
+      this.isPlaying = !this.isPlaying;
       clearInterval(this.timer);
     }
-
-    // 如果两次时间间隔超过了5s
-    if (this.replay.timelist[this.pos] - this.replay.timelist[this.pos - 1] > 5) {
-      this.time += 5000;
-    }
-
     this.time += this.timeStep * this.speed;
-    this.percent = this.time / this.replay.totalTime * 100;
   }
 
   stop() {
     clearInterval(this.timer);
-    this.play = false;
+    this.isPlaying = false;
   }
 
   speedUp() {
@@ -116,31 +168,15 @@ export class JsonComponent implements OnInit {
   }
 
   runFrom() {
-    clearInterval(this.timer);
-    const time = this.replay.totalTime * this.percent / 100;
-    this.replay.timelist.forEach((v, i) => {
-      const preTime = this.replay.timelist[i - 1];
-      if (time <= v * 1000 && time >= preTime * 1000) {
+    for (let i = 0; i < this.timeList.length; i++) {
+      const v = this.timeList[i];
+      const preTime = this.timeList[i - 1];
+      if (this.time <= v * 1000 && this.time >= preTime * 1000) {
         this.time = v * 1000;
         this.pos = i;
-        return;
+        break;
       }
-    });
-    this.timer = setInterval(() => {
-      this.advance();
-    }, this.tick);
-    this.play = !this.play;
+    }
+    this.advance();
   }
-    // this.pos = 0;
-    // this.term.reset();
-    // this.play = false;
-    // for (; this.pos < this.replay.timelist.length; this.pos++) {
-    //   if (this.replay.timelist[this.pos] * 1000 <= this.percent / 100 * this.replay.totalTime) {
-    //     this.term.term.write(this.replay.json[this.replay.timelist[this.pos].toString()]);
-    //   } else {
-    //     break;
-    //   }
-    // }
-    // this.time = this.replay.totalTime * this.percent / 100;
-  // }
 }