[Update] 完成windows录像播放

package.json

@@ -4,8 +4,8 @@
   "license": "GPLv3",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0 --port 4200",
-    "build": "ng build --environment prod --base-href=/luna/  --deploy '/luna/'",
+    "start": "ng serve --proxy-config proxy.conf.json",
+    "build": "ng build --environment prod  --base-href=/luna/  --deploy '/luna/'",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -34,9 +34,11 @@
     "compass-mixins": "^0.12.10",
     "core-js": "2.5.3",
     "directory-encoder": "^0.9.2",
-    "elfinder": "git+https://github.com/Studio-42/elFinder.git#2.1.33",
+    "elfinder": "^2.1.33",
     "filetree-css": "^1.0.0",
     "font-awesome": "4.7.0",
+    "fsevents": "^1.2.3",
+    "guacamole-common-js": "^0.9.14-b",
     "handlebars": "^4.0.11",
     "intl": "1.2.5",
     "jquery": "3.2.1",
@@ -63,10 +65,10 @@
     "rxjs": "5.5.6",
     "sass-math": "^1.0.0",
     "socket.io": "^2.0.3",
-    "socket.io-client": "^2.0.4",
+    "socket.io-client": "^2.1.0",
     "ssh-keygen": "^0.4.1",
     "tether": "^1.4.0",
-    "tslib": "1.8.1",
+    "tslib": "^1.9.0",
     "uuid-js": "^0.7.5",
     "xterm": "^2.9.2",
     "zone.js": "0.8.20"

src/app/app.module.ts

@@ -48,7 +48,7 @@ import {AssetTreeDialogComponent} from './elements/asset-tree/asset-tree.compone
     ...Pipes,
     ...ElementComponents,
     ...PagesComponents,
-  ],
+ ],
   entryComponents: [
     AssetTreeDialogComponent,
     ElementDialogAlertComponent,

src/app/elements/guacamole/guacamole.component.html

-<iframe #rdp [src]="trust(target)" (mouseenter)="active()"></iframe>
+<!--<iframe #rdp [src]="trust('https://inews.gtimg.com/newsapp_bt/0/3460971429/1000')"  width="100%" height="100%" (mouseenter)="active()"></iframe>-->
+<iframe #rdp [src]="trust(target)" width="100%" height="100%"  (mouseenter)="active()"></iframe>

src/app/elements/guacamole/guacamole.component.ts

@@ -30,6 +30,7 @@ export class ElementGuacamoleComponent implements OnInit {
     if (!this.target) {
       const base = window.btoa(this.host.id + '\0' + 'c' + '\0' + 'jumpserver');
       if (environment.production) {
+        console.log('env', environment, 'pro');
         if (DataStore.guacamole_token) {
           this._http.guacamole_add_asset(User.id, this.host.id, this.userid).subscribe(
             data => {
@@ -40,6 +41,7 @@ export class ElementGuacamoleComponent implements OnInit {
             }
           );
         } else {
+          console.log('env', environment, 'dev');
           this._http.get_guacamole_token(User.id, '').subscribe(
             data => {
               // /guacamole/client will redirect to http://guacamole/#/client
@@ -63,6 +65,7 @@ export class ElementGuacamoleComponent implements OnInit {
         this.target = this._cookie.get('guacamole');
       }
     }
+    console.log('Target: ', this.target);
 
     NavList.List[this.index].Rdp = this.el.nativeElement;
   }

src/app/pages/pages.component.ts

@@ -15,6 +15,7 @@ import {PagesControlNavComponent} from './control/control/controlnav/nav.compone
 import {SearchComponent, SearchFilter} from './control/search/search.component';
 import {PagesMonitorLinuxComponent} from './monitor/linux/linux.component';
 import {PagesMonitorWindowsComponent} from './monitor/windows/windows.component';
+import {ReplayGuacamoleComponent} from './replay/guacamole/guacamole.component';
 
 export const PagesComponents = [
   PagesBlankComponent,
@@ -30,5 +31,6 @@ export const PagesComponents = [
   SearchComponent,
   SearchFilter,
   PagesMonitorLinuxComponent,
-  PagesMonitorWindowsComponent
+  PagesMonitorWindowsComponent,
+  ReplayGuacamoleComponent
 ];

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>
+      <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()">Cancel</button>
+              </p>
+          </div>
+      </div>
+  </div>
+</div>

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

+#player {
+    width: 640px;
+}
+
+#display {
+    position: relative;
+}
+
+#player .notification-container {
+    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);
+
+    display: none; /* Initially hidden */
+    width: 100%;
+    height: 100%;
+
+}
+
+#player.seeking .seek-notification {
+    display: table;
+}
+
+#player .seek-notification p {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    font-family: sans-serif;
+}
+
+#player .controls {
+
+    width: 100%;
+
+    /* 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 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;
+
+    /* W3C */
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+}
+
+#player .controls > * {
+    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;
+}
+
+#player .controls #play-pause {
+    margin-left: 0;
+    //min-width: 5em;
+}
+
+#player .controls #position,
+#player .controls #duration {
+    font-family: monospace;
+}
+
+#player .controls #duration {
+    margin-right: 0;
+}

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

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReplayGuacamoleComponent } from './guacamole.component';
+
+describe('ReplayGuacamoleComponent', () => {
+  let component: ReplayGuacamoleComponent;
+  let fixture: ComponentFixture<ReplayGuacamoleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReplayGuacamoleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReplayGuacamoleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit, Input } from '@angular/core';
+import * as Guacamole from 'guacamole-common-js/dist/guacamole-common';
+// import { Replay } from '../replay.model';
+
+function zeroPad(num, minLength) {
+    let str = num.toString();
+    // Add leading zeroes until string is long enough
+    while (str.length < minLength) {
+      str = '0' + str;
+    }
+    return str;
+}
+
+function formatTime(millis) {
+    const totalSeconds = Math.floor(millis / 1000);
+    const seconds = totalSeconds % 60;
+    const minutes = Math.floor(totalSeconds / 60);
+    return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
+}
+
+@Component({
+  selector: 'app-replay-guacamole',
+  templateUrl: './guacamole.component.html',
+  styleUrls: ['./guacamole.component.scss']
+})
+export class ReplayGuacamoleComponent implements OnInit {
+  isPlaying = false;
+  recording: Guacamole.SessionRecording;
+  playerRef: any;
+  displayRef: any;
+  max = 100;
+  percent = 0;
+  duration = '00:00';
+  position = '00:00';
+  @Input() replay: Replay;
+
+  constructor() { }
+
+  ngOnInit() {
+    if (!this.replay.src) {
+      alert('Not found replay');
+      return;
+    }
+    this.playerRef = document.getElementById('player');
+    this.displayRef = document.getElementById('display');
+    const tunnel = new Guacamole.StaticHTTPTunnel(this.replay.src);
+    this.recording = new Guacamole.SessionRecording(tunnel);
+    const recordingDisplay = this.recording.getDisplay();
+
+    this.displayRef.appendChild(recordingDisplay.getElement());
+    this.initRecording();
+    const that = this;
+
+    recordingDisplay.onresize = function displayResized(width, height) {
+      // Do not scale if displayRef has no width
+      if (!width) {
+        return;
+      }
+      // Scale displayRef to fit width of container
+      recordingDisplay.scale(that.displayRef.offsetWidth / width);
+    };
+  }
+
+  initRecording() {
+    const that = this;
+    this.recording.connect();
+    this.recording.onplay = function() {
+      that.isPlaying = true;
+    };
+
+    this.recording.onseek = function (millis) {
+      that.position = formatTime(millis);
+      that.percent = millis;
+    };
+
+    this.recording.onprogress = function (millis) {
+      that.duration = formatTime(millis);
+      that.max = millis;
+    };
+
+    // If paused, the play/pause button should read "Play"
+    this.recording.onpause = function() {
+      that.isPlaying = false;
+    };
+  }
+
+  runFrom() {
+    this.recording.seek(this.percent, () =>
+      this.playerRef.className = ''
+    );
+
+      // Seek is in progress
+    this.playerRef.className = 'seeking';
+  }
+
+  cancelSeek(e) {
+    this.recording.play();
+    this.playerRef.className = '';
+    e.stopPropagation();
+  }
+
+  toggle() {
+    if (!this.recording.isPlaying()) {
+      this.recording.play();
+      this.isPlaying = true;
+    } else {
+      this.recording.pause();
+      this.isPlaying = false;
+    }
+  }
+
+
+}

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

-<div [ngStyle]="{'width.px': 800,'height.px': 400}">
+<div [ngStyle]="{'width.px': 800,'height.px': 600}">
   <video controls>
     <source [src]="replay.src" type="video/mp4">
     Your browser does not support the video tag.

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

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