[Update] 修改录像播放

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

@@ -80,9 +80,6 @@ export class ElementReplayGuacamoleComponent implements OnInit {
     recordingElement.style.margin = '0 auto';
     this.screenRef.appendChild(recordingElement);
     this.initRecording();
-
-
-    // this.toggle();
   }
 
   initRecording() {
@@ -99,7 +96,7 @@ export class ElementReplayGuacamoleComponent implements OnInit {
     this.recording.onprogress = (millis) => {
       this.duration = formatTime(millis);
       this.max = millis;
-      this.toggle();
+      this.play();
     };
 
     // If paused, the play/pause button should read "Play"
@@ -140,13 +137,25 @@ export class ElementReplayGuacamoleComponent implements OnInit {
     e.stopPropagation();
   }
 
-  toggle() {
+  play() {
     if (!this.recording.isPlaying()) {
       this.recording.play();
       this.isPlaying = true;
-    } else {
+    }
+  }
+
+  pause() {
+    if (this.recording.isPlaying()) {
       this.recording.pause();
       this.isPlaying = false;
     }
   }
+
+  toggle() {
+    if (!this.recording.isPlaying()) {
+      this.play();
+    } else {
+      this.pause();
+    }
+  }
 }

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

@@ -14,13 +14,19 @@
 
   <input id="scrubber" type="range" [(ngModel)]="time" min=0 [attr.max]="max" (mouseup)="runFrom()"/>
 
-  <span id="position">{{ position }}</span>
+  <span id="position" style="padding-left: 10px">{{ position }}</span>
   <span>/</span>
   <span id="duration">{{ duration }}</span>
   {{"Speed"|trans}}: {{speed}}
+
+  <span style="float: right;padding-top: 5px;padding-right: 20px">
+    <span style="padding-left: 10px">{{"cols"|trans}}: <input type="number" style="width: 60px" [(ngModel)]="termCols"></span>
+    <span style="padding-left: 10px">{{"rows"|trans}}: <input type="number" style="width: 60px" [(ngModel)]="termRows"></span>
+    <span style="padding-left: 10px"><input type="button" value="{{'confirm'|trans}}" (click)="resizeTerm()"></span>
+  </span>
 </div>
 
 <div id="winContainer" style="height: 90%;width: 100%">
-  <elements-term [term]="term"></elements-term>
+  <elements-term #termRef [term]="term" [stopWatchWinChange]="true" (winSizeChangeTrigger)="onTermSizeChange($event)"></elements-term>
 </div>
 <!--<asciinema-player></asciinema-player>-->

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

-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, OnChanges} from '@angular/core';
 import {Terminal} from 'xterm';
 import {HttpService, LogService} from '@app/services';
 import {Replay} from '@app/model';
@@ -67,6 +67,9 @@ export class ElementReplayJsonComponent implements OnInit {
   timer: any; // 多长时间播放下一个
   pos = 0; // 播放点
   term: Terminal;
+  termCols = 80;
+  termRows = 24;
+
   get position() {
     return formatTime(this.time);
   }
@@ -110,6 +113,7 @@ export class ElementReplayJsonComponent implements OnInit {
     clearInterval(this.timer);
     this.term.reset();
     this.pos = 0;
+    this.time = 0;
     this.isPlaying = true;
     this.timer = setInterval(() => {
       this.advance();
@@ -173,4 +177,16 @@ export class ElementReplayJsonComponent implements OnInit {
     }
     this.advance();
   }
+
+  resizeTerm() {
+    this.term.resize(this.termCols, this.termRows);
+    this.restart();
+  }
+
+  onTermSizeChange(evt) {
+    setTimeout(() => {
+      this.termCols = evt[0];
+      this.termRows = evt[1];
+    }, 500);
+  }
 }

src/app/elements/term/term.component.ts

@@ -3,7 +3,7 @@ import {ElementRef} from '@angular/core';
 import {Terminal} from 'xterm';
 import {fit} from 'xterm/lib/addons/fit/fit';
 import {LogService} from '@app/services';
-import {Observable, fromEvent} from 'rxjs';
+import {Observable, fromEvent, Subscription} from 'rxjs';
 import {debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as $ from 'jquery/dist/jquery.min.js';
 import 'rxjs/Observable';
@@ -18,12 +18,12 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   @ViewChild('term') el: ElementRef;
   @Input() term: Terminal;
   @Input() offset: Array<number>;
+  @Input() stopWatchWinChange = false;
   @Output() winSizeChangeTrigger = new EventEmitter<Array<number>>();
   winSizeChange$: Observable<any>;
+  winSizeSub: Subscription;
 
-  constructor(private _logger: LogService) {
-
-  }
+  constructor(private _logger: LogService) {}
 
   ngOnInit() {
     this.winSizeChange$ = fromEvent(window, 'resize').pipe(
@@ -31,7 +31,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
       distinctUntilChanged(),
     );
 
-    this.winSizeChange$
+    this.winSizeSub = this.winSizeChange$
       .subscribe(() => {
         this._logger.debug('Get win size change event');
         this.resizeTerm();
@@ -41,6 +41,9 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     this.term.open(this.el.nativeElement);
     this.resizeTerm();
+    if (this.stopWatchWinChange) {
+      this.winSizeSub.unsubscribe();
+    }
   }
 
   getWinSize() {

src/assets/i18n/zh.json

@@ -74,5 +74,7 @@
   "open in new window": "新窗口打开",
   "setting": "设置",
   "yes": "是",
-  "no": "否"
+  "no": "否",
+  "cols": "列数",
+  "rows": "行数"
 }