[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

@@ -20,5 +20,6 @@
         </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;
+  width: calc(100vw - 10px);
+  height: calc(100vh - 40px);
+}
+
+#screen * {
 }
 
 #player .notification-container {
@@ -16,7 +23,6 @@
 }
 
 #player .seek-notification {
-
   color: white;
   background: rgba(0, 0, 0, 0.75);
 
@@ -40,6 +46,7 @@
 #player .controls {
 
   width: 100%;
+  height: 30px;
 
   /* IE10 */
   display: -ms-flexbox;
@@ -66,6 +73,8 @@
   align-items: center;
   flex-direction: row;
 
+  padding-right: 10px;
+
 }
 
 #player .controls > * {

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,17 +14,14 @@ 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'];
+    let sid = '';
+    this.route.params.subscribe(params => {
+      sid = params['sid'];
     });
-    this._http.getReplay(token)
-      .subscribe(
+    this._http.getReplay(sid).subscribe(
       data => {
         this.replay.type = data['type'];
         this.replay.src = data['src'];

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},