perf: add viewer on watermark

proxy.conf.json

@@ -6,12 +6,12 @@
     "changeOrigin": true
   },
   "/koko/static/*": {
-    "target": "http://localhost:5050",
+    "target": "http://localhost:5000",
     "secure": false,
     "ws": true
   },
   "/koko/*": {
-    "target": "http://localhost:5050",
+    "target": "http://localhost:5000",
     "secure": false,
     "ws": true,
     "changeOrigin": true

src/app/pages/monitor/monitor.component.ts

@@ -1,7 +1,7 @@
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {AppService, HttpService, I18nService, SettingService} from '@app/services';
 import {ActivatedRoute} from '@angular/router';
-import {Session, Ticket} from '@app/model';
+import {Session, Ticket, User} from '@app/model';
 import {ToastrService} from 'ngx-toastr';
 
 @Component({
@@ -14,27 +14,37 @@ export class PagesMonitorComponent implements OnInit {
   iframeURL: string;
   sessionDetail: Session = null;
   sessionID: string;
-  isPaused : boolean = false;
+  isPaused: boolean = false;
   ticketID: string;
   ticketDetail: Ticket;
   supportedLock: boolean = false;
+  user: User;
 
   constructor(private _appService: AppService,
               private _settingSvc: SettingService,
               private _http: HttpService,
               private _route: ActivatedRoute,
               private _toastr: ToastrService,
-              private _i18n: I18nService,) {
+              private _i18n: I18nService) {
+    this.getCurrentUser();
+  }
+
+  getCurrentUser() {
+    this._http.getUserProfile().subscribe(user => {
+      this.user = user;
+    });
   }
 
   ngOnInit() {
     this._route.params.subscribe(params => {
       this.sessionID = params['sid'];
       this.generateMonitorURL().then(() => {
+        const sessionObj = this.sessionDetail;
+        const auditorUser =  `${this._i18n.instant('Viewer')}: ${this.user.name}(${this.user.username})`;
+        const sessionContent = `${this._i18n.instant('Operator')}: ${sessionObj.user}\n${sessionObj.asset}`;
+        const content = `${auditorUser}\n${sessionContent}`;
         this._settingSvc.createWaterMarkIfNeed(
-          this.windowRef.nativeElement,
-          `${this.sessionDetail.user}\n${this.sessionDetail.asset}`
-        );
+          this.windowRef.nativeElement, content);
       });
     });
     this._route.queryParams.subscribe(params => {
@@ -81,11 +91,11 @@ export class PagesMonitorComponent implements OnInit {
     if (this.ticketID && !this.ticketDetail) {
       this._http.toggleLockSessionForTicket(this.ticketID, this.sessionID, !this.isPaused
       ).then((res) => {
-        this.handleToggleResponse(res).then()
+        this.handleToggleResponse(res).then();
       });
-    }else {
+    } else {
       this._http.toggleLockSession(this.sessionID, !this.isPaused).then((res) => {
-       this.handleToggleResponse(res).then()
+       this.handleToggleResponse(res).then();
       });
     }
   }
@@ -94,8 +104,8 @@ export class PagesMonitorComponent implements OnInit {
     const pauseTaskMsg = await this._i18n.t('Pause task has been send');
     const resumeTaskMsg = await this._i18n.t('Resume task has been send');
     const session_ids = res['ok'];
-    const msg = this.isPaused ?  resumeTaskMsg:pauseTaskMsg;
-    this._toastr.success(msg)
+    const msg = this.isPaused ?  resumeTaskMsg : pauseTaskMsg;
+    this._toastr.success(msg);
     if (session_ids.indexOf(this.sessionID) !== -1) {
 
     }

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

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {HttpService, LogService, SettingService} from '@app/services';
-import {Replay} from '@app/model';
+import {HttpService, I18nService, LogService, SettingService} from '@app/services';
+import {Replay, User} from '@app/model';
 
 @Component({
   selector: 'pages-replay',
@@ -10,11 +10,20 @@ import {Replay} from '@app/model';
 })
 export class PagesReplayComponent implements OnInit {
   replay: Replay = new Replay();
+  user: User;
 
   constructor(private route: ActivatedRoute,
               private _http: HttpService,
               private _settingSvc: SettingService,
+              private _i18n: I18nService,
               private _logger: LogService) {
+    this.getCurrentUser();
+  }
+
+  getCurrentUser() {
+    this._http.getUserProfile().subscribe(user => {
+      this.user = user;
+    });
   }
 
   ngOnInit() {
@@ -34,8 +43,11 @@ export class PagesReplayComponent implements OnInit {
             Object.assign(this.replay, data);
             this.replay.id = sid;
             clearInterval(interval);
+            const auditorUser =  `${this._i18n.instant('Viewer')}: ${this.user.name}(${this.user.username})`;
+            const sessionContent = `${this._i18n.instant('Operator')}: ${this.replay.user}\n${this.replay.asset}`;
+            const content = `${auditorUser}\n${sessionContent}`;
             this._settingSvc.createWaterMarkIfNeed(
-              document.body, `${this.replay.user}\n${this.replay.asset}`
+              document.body, `${content}`
             );
           }
         },

src/app/utils/common.ts

@@ -115,7 +115,7 @@ function createWatermarkDiv(content, {
 
     for (let n = 0; n < words.length; n++) {
       line = words[n];
-      line = truncateCenter(line, 25);
+      line = truncateCenter(line, 64);
       _ctx.fillText(line, x, y);
       y += _lineHeight;
     }