[Update] 优化录像播放

proxy.conf.json

@@ -28,6 +28,10 @@
     },
     "secure": false
   },
+  "/media/": {
+    "target": "http://127.0.0.1:8080",
+    "secure": false
+  },
   "/guacamole/": {
     "target": "http://127.0.0.1:8083",
     "secure": false,

src/app/app.service.ts

@@ -91,10 +91,6 @@ export class HttpService {
     return this.http.get<Array<SystemUser>>(url);
   }
 
-  refreshMyGrantedNodes() {
-    return this.http.get<Array<TreeNode>>('/api/perms/v1/user/nodes-assets/tree/?cache_policy=2');
-  }
-
   getGuacamoleToken(user_id: string, authToken: string) {
     const body = new HttpParams()
       .set('username', user_id)

src/app/elements/asset-tree/asset-tree.component.ts

@@ -93,7 +93,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
     if (this._navSvc.treeLoadAsync) {
       setting['async'] = {
         enable: true,
-        url: '/api/perms/v1/users/nodes/children-with-assets/tree/',
+        url: '/api/perms/v1/users/nodes/children-with-assets/tree/?cache_policy=1',
         autoParam: ['id=key', 'name=n', 'level=lv'],
         type: 'get'
       };

src/app/pages/replay/guacamole/guacamole.component.html

 <div id="player">
   <div class="controls">
-      <button id="play-pause" class="btn" (click)="toggle()">
-        <i class="fa" [ngClass]="{'fa-play':!isPlaying,'fa-pause': isPlaying}"></i>
-      </button>
-      <button type="button" class="btn" (click)="restart()">
-          <i class="fa fa-repeat" aria-hidden="true"></i>
-      </button>
-      <input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()">
-      <span id="position">{{ position }}</span>
-      <span>/</span>
-      <span id="duration">{{ duration }}</span>
+    <button id="play-pause" class="btn" (click)="toggle()">
+      <i class="fa" [ngClass]="{'fa-play':!isPlaying,'fa-pause': isPlaying}"></i>
+    </button>
+    <button type="button" class="btn" (click)="restart()">
+      <i class="fa fa-repeat" aria-hidden="true"></i>
+    </button>
+    <input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()">
+    <span id="position">{{ position }}</span>
+    <span>/</span>
+    <span id="duration">{{ duration }}</span>
   </div>
   <div id="display" (click)="toggle()">
-      <div class="notification-container">
-          <div class="seek-notification">
-              <p>
-                  Seek in progress...
-                  <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
-              </p>
-          </div>
+    <div class="notification-container">
+      <div class="seek-notification">
+        <p>
+          Seek in progress...
+          <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
+        </p>
       </div>
+    </div>
+    <div id="screen"></div>
   </div>
 </div>

src/app/pages/replay/guacamole/guacamole.component.scss

 #player {
-    width: 800px;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
 }
 
 #display {
-    position: relative;
+  position: relative;
+  width: calc(100vw - 10px);
+  height: calc(100vh - 40px);
+}
+
+#screen * {
 }
 
 #player .notification-container {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
 }
 
 #player .seek-notification {
+  color: white;
+  background: rgba(0, 0, 0, 0.75);
 
-    color: white;
-    background: rgba(0, 0, 0, 0.75);
-
-    display: none; /* Initially hidden */
-    width: 100%;
-    height: 100%;
+  display: none; /* Initially hidden */
+  width: 100%;
+  height: 100%;
 
 }
 
 #player.seeking .seek-notification {
-    display: table;
+  display: table;
 }
 
 #player .seek-notification p {
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-    font-family: sans-serif;
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+  font-family: sans-serif;
 }
 
 #player .controls {
 
-    width: 100%;
+  width: 100%;
+  height: 30px;
+
+  /* IE10 */
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-direction: row;
 
-    /* IE10 */
-    display: -ms-flexbox;
-    -ms-flex-align: center;
-    -ms-flex-direction: row;
+  /* Ancient Mozilla */
+  display: -moz-box;
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
 
-    /* Ancient Mozilla */
-    display: -moz-box;
-    -moz-box-align: center;
-    -moz-box-orient: horizontal;
+  /* Ancient WebKit */
+  display: -webkit-box;
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
 
-    /* Ancient WebKit */
-    display: -webkit-box;
-    -webkit-box-align: center;
-    -webkit-box-orient: horizontal;
+  /* Old WebKit */
+  display: -webkit-flex;
+  -webkit-align-items: center;
+  -webkit-flex-direction: row;
 
-    /* Old WebKit */
-    display: -webkit-flex;
-    -webkit-align-items: center;
-    -webkit-flex-direction: row;
+  /* W3C */
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 
-    /* W3C */
-    display: flex;
-    align-items: center;
-    flex-direction: row;
+  padding-right: 10px;
 
 }
 
 #player .controls > * {
-    margin: 0.25em;
+  margin: 0.25em;
 }
 
 #player .controls #position-slider {
-    -ms-flex: 1 1 auto;
-    -moz-box-flex: 1;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 
 #player .controls #play-pause {
-    margin-left: 0;
-    //min-width: 5em;
+  margin-left: 0;
+  //min-width: 5em;
 }
 
 #player .controls #position,
 #player .controls #duration {
-    font-family: monospace;
+  font-family: monospace;
 }
 
 #player .controls #duration {
-    margin-right: 0;
+  margin-right: 0;
 }

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

@@ -55,6 +55,7 @@ export class ReplayGuacamoleComponent implements OnInit {
   recording: any;
   playerRef: any;
   displayRef: any;
+  screenRef: any;
   max = 100;
   percent = 0;
   duration = '00:00';
@@ -70,21 +71,28 @@ export class ReplayGuacamoleComponent implements OnInit {
     }
     this.playerRef = document.getElementById('player');
     this.displayRef = document.getElementById('display');
+    this.screenRef = document.getElementById('screen');
     const tunnel = new Guacamole.StaticHTTPTunnel(this.replay.src);
     this.recording = new Guacamole.SessionRecording(tunnel);
     const recordingDisplay = this.recording.getDisplay();
-
-    this.displayRef.appendChild(recordingDisplay.getElement());
+    const recordingElement = recordingDisplay.getElement();
+    recordingElement.style.margin = '0 auto';
+    this.screenRef.appendChild(recordingElement);
     this.initRecording();
     const that = this;
 
-    recordingDisplay.onresize = function displayResized(width, height) {
+    recordingDisplay.onresize = function onDisplayResize(width, height) {
       // Do not scale if displayRef has no width
-      if (!width) {
+      if (!height) {
         return;
       }
       // Scale displayRef to fit width of container
-      recordingDisplay.scale(that.displayRef.offsetWidth / width);
+      const widthScale = that.displayRef.offsetWidth / width;
+      const heightScale = that.displayRef.offsetHeight / height;
+      console.log('old => new: ', widthScale, heightScale);
+      const minScale = widthScale < heightScale ? widthScale : heightScale;
+      recordingDisplay.scale(minScale);
+      // recordingDisplay.scale(that.displayRef.offsetHeigth / height);
     };
     // this.toggle();
   }

src/app/pages/replay/replay.component.ts

 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Params} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 import {HttpService, LogService} from '@app/app.service';
-import {DataStore} from '@app/globals';
 import {Replay} from './replay.model';
 
 @Component({
@@ -15,25 +14,22 @@ export class PagesReplayComponent implements OnInit {
   constructor(private route: ActivatedRoute,
               private _http: HttpService,
               private _logger: LogService) {
-    DataStore.NavShow = false;
   }
 
   ngOnInit() {
-    let token = '';
-    this.route.params
-      .subscribe(params => {
-        token = params['token'];
-      });
-    this._http.getReplay(token)
-      .subscribe(
-        data => {
-          this.replay.type = data['type'];
-          this.replay.src = data['src'];
-          this.replay.id = data['id'];
-        },
-        err => {
-          alert('没找到录像文件');
-        }
-      );
+    let sid = '';
+    this.route.params.subscribe(params => {
+      sid = params['sid'];
+    });
+    this._http.getReplay(sid).subscribe(
+      data => {
+        this.replay.type = data['type'];
+        this.replay.src = data['src'];
+        this.replay.id = data['id'];
+      },
+      err => {
+        alert('没找到录像文件');
+      }
+    );
   }
 }

src/app/router/router.module.ts

@@ -10,7 +10,7 @@ import {ElementSftpComponent} from '../elements/sftp/sftp.component';
 
 
 const appRoutes: Routes = [
-  {path: 'replay/:token', component: PagesReplayComponent},
+  {path: 'replay/:sid', component: PagesReplayComponent},
   {path: 'monitor/:token', component: PagesMonitorComponent},
   {path: 'connect', component: PagesConnectComponent},
   {path: 'sftp', component: ElementSftpComponent},