From 9f428ff158cade8ad0f6d84c3f3bee02812ce160 Mon Sep 17 00:00:00 2001
From: Eric <xplzv@126.com>
Date: Fri, 28 Apr 2023 03:18:54 +0000
Subject: [PATCH] perf: support mp4 replay

---
 src/app/app.module.ts                         |  2 +
 src/app/elements/elements.component.ts        |  2 +
 src/app/elements/replay/mp4/mp4.component.css |  0
 .../elements/replay/mp4/mp4.component.html    | 31 +++++++++
 .../elements/replay/mp4/mp4.component.spec.ts | 25 +++++++
 src/app/elements/replay/mp4/mp4.component.ts  | 66 +++++++++++++++++++
 src/app/pages/replay/replay.component.html    |  1 +
 src/app/pages/replay/replay.component.ts      |  3 +-
 8 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 src/app/elements/replay/mp4/mp4.component.css
 create mode 100644 src/app/elements/replay/mp4/mp4.component.html
 create mode 100644 src/app/elements/replay/mp4/mp4.component.spec.ts
 create mode 100644 src/app/elements/replay/mp4/mp4.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bf883cc7..e7e0b4aa 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -32,6 +32,7 @@ import {ElementDownloadDialogComponent} from './elements/connect/download-dialog
 import {ElementACLDialogComponent} from './elements/connect/acl-dialog/acl-dialog.component';
 import {ElementDialogAlertComponent} from './elements/dialog/dialog.service';
 import {ClipboardService} from 'ngx-clipboard';
+import { ElementsReplayMp4Component } from './elements/replay/mp4/mp4.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, '/luna/assets/i18n/');
@@ -62,6 +63,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     ...Pipes,
     ...ElementComponents,
     ...PagesComponents,
+    ElementsReplayMp4Component,
   ],
   entryComponents: [
     ChangLanWarningDialogComponent,
diff --git a/src/app/elements/elements.component.ts b/src/app/elements/elements.component.ts
index 41e5af8d..55f338e4 100644
--- a/src/app/elements/elements.component.ts
+++ b/src/app/elements/elements.component.ts
@@ -26,6 +26,7 @@ import {ElementAdvancedOptionComponent} from './connect/connect-dialog/advanced-
 import {ElementConnectMethodComponent} from './connect/connect-dialog/connect-method/connect-method.component';
 import {ElementDownloadDialogComponent} from './connect/download-dialog/download-dialog.component';
 import {ElementACLDialogComponent} from './connect/acl-dialog/acl-dialog.component';
+import { ElementsReplayMp4Component } from './replay/mp4/mp4.component';
 
 
 export const ElementComponents = [
@@ -59,4 +60,5 @@ export const ElementComponents = [
   ElementReplayAsciicastComponent,
   ElementAdvancedOptionComponent,
   ElementConnectMethodComponent,
+  ElementsReplayMp4Component,
 ];
diff --git a/src/app/elements/replay/mp4/mp4.component.css b/src/app/elements/replay/mp4/mp4.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/elements/replay/mp4/mp4.component.html b/src/app/elements/replay/mp4/mp4.component.html
new file mode 100644
index 00000000..aac363e8
--- /dev/null
+++ b/src/app/elements/replay/mp4/mp4.component.html
@@ -0,0 +1,31 @@
+<div class="controls">
+    <span id="user" style="padding-left: 20px" *ngIf="replay.user">{{"user"| translate}} : {{replay.user}}</span>
+    <span id="asset" style="padding-left: 20px" *ngIf="replay.asset">{{"asset"| translate}} : {{replay.asset}}</span>
+    <span id="system_user" style="padding-left: 20px" *ngIf="replay.system_user">{{"system user"| translate}} : {{replay.system_user}}</span>
+    <span id="date_start" style="padding-left: 20px" *ngIf="replay.date_start">{{"start time"| translate}} : {{startTime}} </span>
+    <span id="download" style="padding-left: 30px" *ngIf="replay.download_url"><a type="button" [href]="replay.download_url">{{"download"| translate}}</a></span>
+  </div>
+  <div id="player">
+    <as-split direction="horizontal" gutterSize="0">
+      <as-split-area *ngIf="commands.length" [size]="15" [maxSize]="15" [minSize]="0" order="0">
+        <div class="command-results" 
+              infiniteScroll
+              [infiniteScrollDistance]="2"
+              [infiniteScrollThrottle]="50"
+              (scrolled)="onScroll()"
+              [scrollWindow]="false">
+            <div class="item" *ngFor="let item of commands" (click)="commandClick(item)"> 
+              <div class="command" [title]="item.input">{{ item.input }}</div>
+              <div class="timestamp">{{ item.atime }}</div>
+            </div>
+        </div>
+      </as-split-area>
+      <as-split-area [size]="85" [maxSize]="100" [minSize]="85" order="1">
+          <div id="screen"> 
+            <video controls [height]="height" [width]="width">
+                <source [src]="replay.src" type="video/mp4">
+            </video>
+          </div>
+      </as-split-area>
+    </as-split>
+  </div>
\ No newline at end of file
diff --git a/src/app/elements/replay/mp4/mp4.component.spec.ts b/src/app/elements/replay/mp4/mp4.component.spec.ts
new file mode 100644
index 00000000..3b811a87
--- /dev/null
+++ b/src/app/elements/replay/mp4/mp4.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ElementsReplayMp4Component } from './mp4.component';
+
+describe('ElementsReplayMp4Component', () => {
+  let component: ElementsReplayMp4Component;
+  let fixture: ComponentFixture<ElementsReplayMp4Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ElementsReplayMp4Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementsReplayMp4Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/elements/replay/mp4/mp4.component.ts b/src/app/elements/replay/mp4/mp4.component.ts
new file mode 100644
index 00000000..baf3fd38
--- /dev/null
+++ b/src/app/elements/replay/mp4/mp4.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit,Input } from '@angular/core';
+import {Replay,Command} from '@app/model';
+import {HttpService} from '@app/services';
+import {TranslateService} from '@ngx-translate/core';
+import {formatTime} from '@app/utils/common';
+
+@Component({
+  selector: 'elements-replay-mp4',
+  templateUrl: './mp4.component.html',
+  styleUrls: ['./mp4.component.css']
+})
+export class ElementsReplayMp4Component implements OnInit {
+  @Input() replay: Replay;
+  startTime = null;
+  startTimeStamp = null;
+  commands: Command[];
+  page = 0;
+  height = 0;
+  width = 0;
+
+  constructor(private _http: HttpService, private _translate: TranslateService) { }
+
+  ngOnInit() {
+    this.commands = new Array<Command>();
+    const date = new Date(Date.parse(this.replay.date_start));
+    this.startTime = this.toSafeLocalDateStr(date);
+    this.startTimeStamp = Date.parse(this.replay.date_start);
+    this.getCommands(this.page);
+    this.height = window.innerHeight - 100;
+    this.width = window.innerWidth - 100;
+  }
+
+  toSafeLocalDateStr(d) {
+    const date_s = d.toLocaleString(this.getUserLang(), {hour12: false});
+    return date_s.split('/').join('-');
+  }
+
+  getUserLang() {
+    const userLangEN = document.cookie.indexOf('django_language=en');
+    if (userLangEN === -1) {
+    return 'zh-CN';
+    } else {
+    return 'en-US';
+    }
+  }
+
+  getCommands(page: number) {
+    if (!this.startTimeStamp) {
+      return;
+    }
+    this._http.getCommandsData(this.replay.id, page)
+    .subscribe(
+      data => {
+        const results = data.results;
+        results.forEach(element => {
+          element.atime = formatTime(element.timestamp * 1000 - this.startTimeStamp);
+        });
+        this.commands = this.commands.concat(results);
+      },
+      err => {
+        alert('没找到命令记录');
+      }
+    );
+  }
+
+}
diff --git a/src/app/pages/replay/replay.component.html b/src/app/pages/replay/replay.component.html
index bed6bc90..468284be 100644
--- a/src/app/pages/replay/replay.component.html
+++ b/src/app/pages/replay/replay.component.html
@@ -2,6 +2,7 @@
   <elements-replay-json [replay]="replay" *ngIf="replay.type=='json'"></elements-replay-json>
   <elements-replay-guacamole [replay]="replay" *ngIf="replay.type=='guacamole'"></elements-replay-guacamole>
   <elements-replay-asciicast [replay]="replay" *ngIf="replay.type=='asciicast'"></elements-replay-asciicast>
+  <elements-replay-mp4 [replay]="replay" *ngIf="replay.type=='mp4'"></elements-replay-mp4>
   <div id="loading">
     <div class="lds-spinner" *ngIf="isLoad()">
       <div></div>
diff --git a/src/app/pages/replay/replay.component.ts b/src/app/pages/replay/replay.component.ts
index eecb48aa..6e375e1b 100644
--- a/src/app/pages/replay/replay.component.ts
+++ b/src/app/pages/replay/replay.component.ts
@@ -52,7 +52,8 @@ export class PagesReplayComponent implements OnInit {
     const supportedType = {
       'json': true,
       'guacamole': true,
-      'asciicast': true};
+      'asciicast': true,
+      'mp4': true,};
     return !supportedType[tp];
   }
 }