feat: update

app.js

@@ -170,6 +170,12 @@ server.run = function (options) {
           }]
       }])
     });
+  apis.route('/replay')
+    .get(function (req, res) {
+      res.json({
+        "type": "json"
+      })
+    });
   apis.route('/perms/v1/user/my/asset-groups-assets/')
     .get(function (req, res) {
       res.json([

src/app/ControlPage/control/ssh/ssh.component.css

@@ -43,13 +43,3 @@
 .hidden {
   display: none;
 }
-
-#liuzheng {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  font-size: 11px !important;
-  padding-bottom: 16px !important;
-  font-family: 'Monaco', iosevka !important;
-}

src/app/ControlPage/control/ssh/ssh.component.html

@@ -3,4 +3,3 @@
        [ngClass]="{'disconnected':!m.connected,'hidden': m.hide || m.type!='ssh'}" id="term-{{i}}">
   </div>
 </div>
-<span id="liuzheng">liuzheng</span>

src/app/app-routing.module.ts

@@ -13,13 +13,15 @@ import {IndexPageComponent} from './IndexPage/index-page.component';
 import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
-import {RdppageComponent} from "./rdppage/rdppage.component";
-import {TermpageComponent} from "./termpage/termpage.component";
+import {RdppageComponent} from './rdppage/rdppage.component';
+import {TermpageComponent} from './termpage/termpage.component';
+import {ReplayPageComponent} from './replay-page/replay-page.component';
 
 const appRoutes: Routes = [
   {path: 'users/login', component: LoginComponent},
   {path: 'rdp/:token', component: RdppageComponent},
   {path: 'term/:token', component: TermpageComponent},
+  {path: 'replay/:token', component: ReplayPageComponent},
   {path: '', component: ControlPageComponent},
   {path: '**', component: NotFoundComponent}
 ];

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

-<p>
-  json works!
-</p>
+<div id="term"></div>

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

+
+button {
+  width: 40px;
+}

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

@@ -8,7 +8,7 @@
   <i class="fa fa-backward" aria-hidden="true"></i>
 </button>
 <button type="button" class="btn" (click)="play()">
-  <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':playing,'fa-pause': !playing}"></i>
+  <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':!playing,'fa-pause': playing}"></i>
 </button>
 <button type="button" class="btn">
   <i class="fa fa-forward" aria-hidden="true"></i>
@@ -22,3 +22,5 @@
 <button type="button" class="btn">
   <i class="fa fa-compress" aria-hidden="true"></i>
 </button>
+<app-mp4 *ngIf="video.type=='mp4'"></app-mp4>
+<app-json *ngIf="video.type=='json'"></app-json>

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

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {Logger} from 'angular2-logger/core';
+import {HttpService} from '../app.service';
 
 @Component({
   selector: 'app-replay-page',
@@ -6,10 +9,34 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./replay-page.component.css']
 })
 export class ReplayPageComponent implements OnInit {
+  playing: boolean;
+  video: any;
 
-  constructor() { }
+  constructor(private activatedRoute: ActivatedRoute,
+              private _http: HttpService,
+              private _logger: Logger) {
+  }
 
   ngOnInit() {
+    let token: string;
+    this.activatedRoute.params.subscribe((params: Params) => {
+      token = params['token'];
+    });
+    this._http.get('/api/replay?' + token)
+      .map(res => res.json())
+      .subscribe(
+        data => {
+          this.video = data;
+        },
+        err => {
+          this._logger.error(err);
+        },
+      );
+
+  }
+
+  play() {
+    this.playing = !this.playing;
   }
 
 }

src/app/termpage/termpage.component.css

@@ -21,17 +21,3 @@
 #term .terminal div span {
   min-width: 12px;
 }
-
-#liuzheng {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  font-size: 11px !important;
-  padding-bottom: 16px !important;
-  font-family: 'Monaco', iosevka !important;
-}
-
-button{
-  width: 40px;
-}

src/app/termpage/termpage.component.html

-<span id="liuzheng">liuzheng</span>
-
 <div id="term"></div>

src/app/termpage/termpage.component.ts

@@ -12,7 +12,6 @@ declare let Terminal: any;
   styleUrls: ['./termpage.component.css']
 })
 export class TermpageComponent implements OnInit {
-  playing: boolean;
 
   constructor(private activatedRoute: ActivatedRoute) {
     DataStore.NavShow = false;
@@ -56,8 +55,4 @@ export class TermpageComponent implements OnInit {
 
   }
 
-  play() {
-    this.playing = !this.playing;
-  }
-
 }

src/index.html

@@ -10,5 +10,7 @@
 </head>
 <body>
 <app-root></app-root>
+<span id="liuzheng">liuzheng</span>
+
 </body>
 </html>

src/styles.css

@@ -20,3 +20,14 @@ body {
 app-root {
   height: 100%;
 }
+
+
+#liuzheng {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  font-size: 11px !important;
+  padding-bottom: 16px !important;
+  font-family: 'Monaco', iosevka !important;
+}