perf: modify guacamole player css

Author: LeeEirc

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

@@ -6,7 +6,7 @@
     <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 [ngClass]="rangeHideClass" style="width: 100%"><input id="position-slider" type="range" [(ngModel)]="percent" [attr.max]="max" (mouseup)="runFrom()"></span>
     <span id="position">{{ position }}</span>
     <span>/</span>
     <span id="duration">{{ duration }}</span>

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

@@ -149,3 +149,140 @@
 #player .controls #duration {
   margin-right: 0;
 }
+
+input[type="range"] {
+  background: transparent;
+  width: 100%;
+  margin: 0;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+/*
+ * WebKit
+ */
+
+input[type="range"] {
+  -webkit-appearance: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+
+  border: none;
+  border-radius: 0;
+  background: #5AF;
+
+  width: 100%;
+  height: 0.5em;
+
+  cursor: pointer;
+
+}
+
+input[type="range"]::-webkit-slider-thumb {
+
+  border: none;
+  border-radius: 0;
+  background: white;
+  //background: #5AF;
+
+  width: 3px;
+  height: 0.5em;
+
+  -webkit-appearance: none;
+  cursor: pointer;
+
+}
+
+input[type="range"]:focus::-webkit-slider-runnable-track {
+  background: #5AF;
+}
+
+/*
+ * Firefox
+ */
+
+input[type="range"]::-moz-range-track {
+
+  border: none;
+  border-radius: 0;
+  background: #5AF;
+
+  width: 100%;
+  height: 0.5em;
+
+  cursor: pointer;
+
+}
+
+input[type="range"]::-moz-range-thumb {
+
+  border: none;
+  border-radius: 0;
+  background: white;
+
+  width: 3px;
+  height: 0.5em;
+
+  cursor: pointer;
+
+}
+
+/*
+ * Internet Explorer
+ */
+
+input[type="range"]::-ms-track {
+
+  width: 100%;
+  height: 0.5em;
+  margin: 0;
+
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: transparent;
+
+  cursor: pointer;
+
+}
+
+input[type="range"]::-ms-thumb {
+
+  border: none;
+  border-radius: 0;
+  background: white;
+
+  width: 3px;
+  height: 0.5em;
+  margin: 0;
+
+  cursor: pointer;
+
+}
+
+input[type="range"]::-ms-fill-lower,
+input[type="range"]::-ms-fill-upper,
+input[type="range"]:focus::-ms-fill-lower,
+input[type="range"]:focus::-ms-fill-upper {
+  border: none;
+  border-radius: 0;
+  background: #5AF;
+}
+
+.hideCursor {
+  input[type="range"]::-webkit-slider-thumb {
+
+    background: #5AF;
+  }
+
+  input[type="range"]::-ms-thumb {
+    background: #5AF;
+  }
+
+  input[type="range"]::-ms-thumb {
+    background: #5AF;
+  }
+}

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

@@ -39,6 +39,10 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
   leftInfo = null;
   winSizeChange$: Observable<any>;
   winSizeSub: Subscription;
+  firstLoad = true;
+  rangeHideClass = 'hideCursor';
+  lastDuration: number = 0;
+  interval: number;
 
   constructor(private _http: HttpService, private _translate: TranslateService) {}
 
@@ -98,9 +102,14 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
     };
 
     this.recording.onprogress = (millis) => {
+      if (millis >= this.max) {
       this.duration = formatTime(millis);
       this.max = millis;
-      this.play();
+      }
+      if (!this.recording.isPlaying() && this.firstLoad) {
+        this.recording.play();
+        this.firstLoad = false;
+      }
     };
 
     // If paused, the play/pause button should read "Play"
@@ -115,6 +124,15 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
       }
       this.recordingDisplay.scale(this.getPropScale());
     };
+    clearInterval(this.interval);
+    this.interval = setInterval(() => {
+      if (this.lastDuration === this.max) {
+        clearInterval(this.interval);
+        this.rangeHideClass = '';
+      } else {
+        this.lastDuration = this.max;
+      }
+    }, 1000);
   }
 
   destroy() {
@@ -140,6 +158,10 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
       this.winSizeSub.unsubscribe();
       this.winSizeSub = null;
     }
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+    this.interval = null;
 
     this.playerRef = null;
     this.displayRef = null;
@@ -154,6 +176,9 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
     this.commands = [];
     this.page = 0;
     this.leftInfo = null;
+    this.firstLoad = true;
+    this.rangeHideClass = 'hideCursor';
+    this.lastDuration = 0;
   }
 
   getPropScale() {
@@ -190,14 +215,17 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
     return date_s.split('/').join('-');
   }
 
-  runFrom() {
+  setDisableStatusSiderElement(disable: boolean) {
     const sliderElement = document.getElementById('position-slider') as HTMLInputElement;
+    sliderElement.disabled = disable;
+  }
 
-    sliderElement.disabled = true;
+  runFrom() {
+    this.setDisableStatusSiderElement(true);
 
     this.recording.seek(this.percent, () => {
         this.playerRef.className = '';
-        sliderElement.disabled = false;
+      this.setDisableStatusSiderElement(false);
       }
     );
 
@@ -209,6 +237,7 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
     this.recording.play();
     this.playerRef.className = '';
     e.stopPropagation();
+    this.setDisableStatusSiderElement(false);
   }
 
   play() {

src/app/elements/replay/parts/parts.component.html

@@ -37,7 +37,7 @@
           <div class="loading-spinner">
             <mat-spinner *ngIf="videoLoading"></mat-spinner>
           </div>
-          <elements-replay-guacamole class='guacamole-video' [replay]="currentVideo" *ngIf="currentVideo?.type=='guacamole' && !videoLoading"></elements-replay-guacamole>
+          <elements-replay-guacamole class='guacamole-video' [replay]="currentVideo" *ngIf="currentVideo"></elements-replay-guacamole>
         </mat-card>
       </div>
       <mat-card  class="video-list">