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 @@
+
+
{{"user"| translate}} : {{replay.user}}
+
{{"asset"| translate}} : {{replay.asset}}
+
{{"system user"| translate}} : {{replay.system_user}}
+
{{"start time"| translate}} : {{startTime}}
+
{{"download"| translate}}
+
+
+
+
+
+
+
{{ item.input }}
+
{{ item.atime }}
+
+
+
+
+
+
+
+
+
+
\ 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;
+
+ 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();
+ 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 @@
+
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];
}
}