Merge pull request #259 from richard-austin/stage-6-mouse-wheel-contr…

…olled-zoom-on-live-video

* Full screen and audio toggle buttons added to recording page.

client/src/app/recording-control/recording-control.component.html

@@ -64,6 +64,18 @@
     <div>
       <app-video></app-video>
       <div class="buttons-flex-container">
+        <div class="additional-buttons">
+          <label *ngIf="hasAudio()" class="video-buttons"
+                 [matTooltip]="'Click to ' + (isMuted() ? 'unmute' : 'mute') + ' sound'"
+                 matTooltipClass="tooltip">
+            <mat-icon (click)="toggleMuteAudio()">{{ isMuted() ? 'volume_off' : 'volume_up' }}</mat-icon>
+          </label>
+          <label class="video-buttons"
+                 matTooltip="Set full screen"
+                 matTooltipClass="tooltip">
+            <mat-icon (click)="video.setFullScreen()">fullscreen</mat-icon>
+          </label>
+        </div>
         <mat-card class="recording-buttons hide-background mat-elevation-z8">
           <mat-button-toggle-group aria-label="Playback control" name="playbackControl"
                                    [(ngModel)]="selectedPlaybackMode">

client/src/app/recording-control/recording-control.component.scss

@@ -36,6 +36,14 @@ mat-card.recording-buttons {
   }
 }
 
+div.additional-buttons {
+  margin-top: 0.3rem;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 div.no-display {
   display: none;
 }

client/src/app/recording-control/recording-control.component.ts

@@ -170,6 +170,15 @@ export class RecordingControlComponent implements OnInit, AfterViewInit, OnDestr
       this.showInvalidInput(false);
     }
   }
+  hasAudio (): boolean {
+    const video: any = this.video?.video;
+    if(video) {
+      return video.mozHasAudio ||
+        Boolean(video.webkitAudioDecodedByteCount) ||
+        Boolean(video.audioTracks && video.audioTracks.length);
+    }
+    return false;
+  }
 
   /**
    * showInvalidInput: Called after checking for a valid recording for this component.
@@ -361,4 +370,16 @@ export class RecordingControlComponent implements OnInit, AfterViewInit, OnDestr
   ngOnDestroy(): void {
     this.video.video.controls = true; // Enable controls again
   }
+
+  toggleMuteAudio() {
+    if(this.video !== undefined && this.video !== null)
+      this.video.videoFeeder.mute(!this.video.videoFeeder.isMuted);
+  }
+
+  isMuted() : boolean {
+    let retVal = false;
+    if(this.video !== undefined && this.video !== null)
+      retVal = this.video.videoFeeder.isMuted;
+    return retVal;
+  }
 }

client/src/app/video/video.component.scss

@@ -106,33 +106,6 @@ div.latency-limit-selector {
   }
 }
 
-.video-buttons {
-  cursor: pointer;
-  @media only screen and (max-width: 768px){
-    :active {
-      scale: 1.3;
-      transition: scale 350ms linear
-    }
-    :not(:active) {
-      scale: 1;
-      transition-property: transform;
-      transition: scale 350ms linear;
-    }
-  }
-  @media only screen and (min-width: 768px) {
-    :hover {
-      scale: 1.3;
-      transition: scale 350ms
-    }
-
-    :not(:hover) {
-      scale: 1;
-      transition-property: transform;
-      transition: scale 350ms linear;
-    }
-  }
-}
-
 .audio-out-disabled {
   color: gray !important;
   cursor: pointer;

client/src/app/video/video.component.ts

@@ -103,9 +103,11 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
     this.video.addEventListener('fullscreenchange', () => {
       this.vt.reset();  // Set to normal scale for if the mouse wheel was turned while full screen showing
     });
-    this.video.ontimeupdate = (ev:Event) => {
-      this.currentTime = new Date( this.video.currentTime * 1000).toISOString().substring(11, 19);
-      this.totalTime = new Date( this.video.duration * 1000).toISOString().substring(11, 19);
+    this.video.ontimeupdate = () => {
+      if (this.video.currentTime !== null && !isNaN(this.video.currentTime))
+        this.currentTime = new Date(this.video.currentTime * 1000).toISOString().substring(11, 19);
+      if (this.video.duration !== null && !isNaN(this.video.duration))
+        this.totalTime = new Date(this.video.duration * 1000).toISOString().substring(11, 19);
     };
     window.screen.orientation.onchange = (ev: Event) => {
       // Set up VideoTransformations again to take account of viewport dimension changes

client/src/styles.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
 @include mat.core;
 
 // Basic colours used in theme
@@ -185,4 +185,30 @@ mat-card.hide-background {
     margin-left: 0.5rem;
   }
 }
+label.video-buttons {
+  cursor: pointer;
+  @media only screen and (max-width: 768px){
+    :active {
+      scale: 1.3;
+      transition: scale 350ms linear
+    }
+    :not(:active) {
+      scale: 1;
+      transition-property: transform;
+      transition: scale 350ms linear;
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    :hover {
+      scale: 1.3;
+      transition: scale 350ms
+    }
+
+    :not(:hover) {
+      scale: 1;
+      transition-property: transform;
+      transition: scale 350ms linear;
+    }
+  }
+}