feat: support windows replay and need api support

需要API支持
api 修改 http.get('/api/terminal/v1/sessions/' + token + '/replay');
该API返回值应修改成
{ id: string, // session id
src: string, // 录像地址，例如/media/2018-04-23/xxxx.gz,
/media/2018-04-23/xxxx.mp4
type: string, // mp4 , json
height: int, // 高度
width: int, // 宽度
}

https://trello.com/c/DYNi38DI/285-windows%E5%BD%95%E5%83%8F%E6%92%AD%E6%94%BE%E5%92%8C%E4%BC%98%E5%8C%96linux%E6%92%AD%E6%94%BE

mock.py

@@ -4,6 +4,7 @@ from flask import Flask, send_from_directory, render_template, request, jsonify,
 from flask_socketio import SocketIO, Namespace, emit, join_room, leave_room
 import paramiko
 import uuid
+from flask import Flask, request, current_app, redirect
 
 app = Flask(__name__, template_folder='dist')
 
@@ -55,6 +56,7 @@ class SSHws(Namespace):
       "room": str(uuid.uuid4()),
       "chan": dict()
     }
+    print(request.sid)
     join_room(self.clients[request.sid]["room"])
     # self.socketio.start_background_task(self.send_data, self)
 

proxy.conf.json

 {
   "/api": {
-    "target": "http://127.0.0.1:5000",
+    "target": "http://127.0.0.1:8088",
     "secure": false
   },
   "/luna/i18n": {

src/app/app-routing.module.ts

@@ -24,7 +24,7 @@ const appRoutes: Routes = [
   // {path: 'users/login', component: LoginComponent},
   {path: 'replay/:token', component: ReplayPageComponent},
   {path: 'monitor/:token', component: MonitorPageComponent},
-  // {path: 'test', component: TestPageComponent},
+  {path: 'test', component: TestPageComponent},
   {path: 'connect', component: ConnectPageComponent},
   // {path: 'setting', component: SettingPageComponent},
   {path: 'undefined', component: BlankPageComponent},

src/app/app.service.ts

@@ -126,6 +126,10 @@ export class HttpService {
     return this.http.get('/api/terminal/v1/sessions/' + token + '/replay');
   }
 
+  get_replay_json(src: string) {
+    return this.http.get(src);
+  }
+
   get_user_id_from_token(token: string) {
     const params = new HttpParams()
       .set('user-only', '1')

src/app/globals.ts

@@ -26,13 +26,17 @@ export let Video: {
   id: string,
   src: string,
   type: string,
+  height: number,
+  width: number,
   json: object;
   timelist: Array<number>;
   totalTime: number;
 } = {
-  id: 'sss',
-  src: 'sss',
-  type: 'json',
+  id: '',
+  src: '',
+  type: '',
+  width: 0,
+  height: 0,
   json: {},
   timelist: [],
   totalTime: 0,

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

-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {Video, term} from '../../globals';
+import {HttpService, LogService} from '../../app.service';
 
 @Component({
-  selector: 'app-json',
+  selector: 'app-replay-json',
   templateUrl: './json.component.html',
   styleUrls: ['./json.component.css']
 })
@@ -17,10 +18,26 @@ export class JsonComponent implements OnInit {
   pos = 0;
   scrubber: number;
 
-  constructor() {
+  constructor(private _http: HttpService,
+              private _logger: LogService) {
   }
 
   ngOnInit() {
+    this._http.get_replay_json(Video.src)
+      .subscribe(
+        data => {
+          Video.json = data;
+          Video.timelist = Object.keys(Video.json).map(Number);
+          Video.timelist = Video.timelist.sort(function (a, b) {
+            return a - b;
+          });
+          Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
+        },
+        err => {
+          alert('无法下载');
+          this._logger.error(err);
+        }
+      );
     const that = this;
     let r = true;
     window.onresize = function () {

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

-<p>
-  mp4 works!
-</p>
+<div [ngStyle]="{'width.px': Video.width,'height.px':Video.height}">
+  <video  controls>
+    <source [src]="Video.src" type="video/mp4">
+    Your browser does not support the video tag.
+    <br>
+    您的浏览器不支持，请升级
+  </video>
+</div>

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

-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Video} from '../../globals';
 
 @Component({
-  selector: 'app-mp4',
+  selector: 'app-replay-mp4',
   templateUrl: './mp4.component.html',
   styleUrls: ['./mp4.component.css']
 })
 export class Mp4Component implements OnInit {
+  Video = Video;
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
   }

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

-<app-json></app-json>
+<app-replay-json *ngIf="Video.type=='json'"></app-replay-json>
+<app-replay-mp4 *ngIf="Video.type=='mp4'"></app-replay-mp4>

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

@@ -26,18 +26,16 @@ export class ReplayPageComponent implements OnInit {
     this._http.get_replay(token)
       .subscribe(
         data => {
-          Video.type = 'json';
-          Video.json = data;
-          Video.timelist = Object.keys(Video.json).map(Number);
-          Video.timelist = Video.timelist.sort(function (a, b) {
-            return a - b;
-          });
-          Video.totalTime = Video.timelist[Video.timelist.length - 1] * 1000;
+          Video.type = data['type'];
+          Video.src = data['src'];
+          Video.id = data['id'];
+          Video.width = data['width'];
+          Video.height = data['height'];
         },
         err => {
-          alert('无法下载');
+          alert('API请求出错');
           this._logger.error(err);
-        },
+        }
       );
 
   }

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

-<app-element-elfinder></app-element-elfinder>
+<app-replay-mp4></app-replay-mp4>

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

 import {Component, OnInit} from '@angular/core';
-import {DataStore} from '../globals';
+import {Video, DataStore} from '../globals';
 
 @Component({
   selector: 'app-test-page',
@@ -7,12 +7,17 @@ import {DataStore} from '../globals';
   styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
+  Video = Video;
 
   constructor() {
     DataStore.NavShow = false;
   }
 
   ngOnInit() {
+    this.Video.id = 'asfafdasd';
+    this.Video.src = 'https://www.w3schools.com/tags/movie.mp4';
+    this.Video.height = 240;
+    this.Video.width = 320;
   }
 
 }