VIH-8233 Mic Visualiser bar crashing on device change when only one mic available

VideoWeb/VideoWeb/ClientApp/src/app/shared/force-play-video.directive.spec.ts

@@ -17,10 +17,14 @@ describe('ForcePlayVideoDirective', () => {
     let onPlayingCallback: (event: any) => void = null;
     let onPauseCallback: (event: any) => void = null;
     let onErrorCallback: (event: any) => void = null;
+    let onLoadedMetadaCallback: (event: any) => void = null;
 
     beforeEach(() => {
         elementRefSpy = jasmine.createSpyObj<ElementRef>([], ['nativeElement']);
-        nativeElementSpy = jasmine.createSpyObj<HTMLVideoElement>(['play', 'pause'], ['oncanplay', 'onerror', 'onplaying', 'onpause']);
+        nativeElementSpy = jasmine.createSpyObj<HTMLVideoElement>(
+            ['play', 'pause'],
+            ['oncanplay', 'onerror', 'onplaying', 'onpause', 'onloadedmetadata']
+        );
         nativeElementSpy.play.and.callFake(() => Promise.resolve());
         getSpiedPropertyGetter(elementRefSpy, 'nativeElement').and.returnValue(nativeElementSpy);
         getSpiedPropertySetter(nativeElementSpy, 'oncanplay').and.callFake((callback: (event: any) => void) => {
@@ -39,6 +43,10 @@ describe('ForcePlayVideoDirective', () => {
             onErrorCallback = callback;
         });
 
+        getSpiedPropertySetter(nativeElementSpy, 'onloadedmetadata').and.callFake((callback: (event: any) => void) => {
+            onLoadedMetadaCallback = callback;
+        });
+
         renderer2FactorySpy = jasmine.createSpyObj<RendererFactory2>(['createRenderer']);
         renderer2Spy = jasmine.createSpyObj<Renderer2>(['setAttribute', 'listen']);
 
@@ -135,6 +143,7 @@ describe('ForcePlayVideoDirective', () => {
 
             // Act
             onCanPlayCallback(null);
+            onLoadedMetadaCallback(null);
 
             // Assert
             expect(nativeElementSpy.play).toHaveBeenCalledTimes(1);
@@ -160,6 +169,7 @@ describe('ForcePlayVideoDirective', () => {
 
             // Act
             onCanPlayCallback(null);
+            onLoadedMetadaCallback(null);
             tick();
 
             // Assert
@@ -213,6 +223,7 @@ describe('ForcePlayVideoDirective', () => {
 
             // Act
             mouseDownCallback(null);
+            onLoadedMetadaCallback(null);
 
             // Assert
             expect(nativeElementSpy.play).toHaveBeenCalledTimes(1);
@@ -291,6 +302,7 @@ describe('ForcePlayVideoDirective', () => {
 
             // Act
             mouseDownCallback(null);
+            onLoadedMetadaCallback(null);
             tick();
 
             // Assert
@@ -332,6 +344,7 @@ describe('ForcePlayVideoDirective', () => {
 
             // Act
             touchStartCallback(null);
+            onLoadedMetadaCallback(null);
 
             // Assert
             expect(nativeElementSpy.play).toHaveBeenCalledTimes(1);

VideoWeb/VideoWeb/ClientApp/src/app/shared/force-play-video.directive.ts

@@ -66,9 +66,11 @@ export class ForcePlayVideoDirective implements OnInit, OnDestroy {
             if (isPlayingElem) {
                 return;
             }
-            this.videoElement.play().catch(error => {
-                this.logger.error(`${this.loggerPrefix} - error playing video.`, error);
-            });
+            this.videoElement.onloadedmetadata = () => {
+                this.videoElement.play().catch(error => {
+                    this.logger.error(`${this.loggerPrefix} - error playing video.`, error);
+                });
+            };
         }
     }
 

VideoWeb/VideoWeb/ClientApp/src/app/shared/select-media-devices/select-media-devices.component.ts

@@ -63,7 +63,7 @@ export class SelectMediaDevicesComponent implements OnInit, OnDestroy, AfterView
 
     ngAfterViewInit() {
         ModalTrapFocus.trap(this.SELECT_MEDIA_DEVICES_MODAL);
-        this.availableMicsList.nativeElement.focus();
+        this.availableMicsList?.nativeElement.focus();
     }
 
     ngOnInit() {

VideoWeb/VideoWeb/ClientApp/src/app/shared/self-test/self-test.component.html

@@ -18,9 +18,8 @@ <h1 class="govuk-heading-xl mb-2">
   <div class="self-view-container">
     <div>
       <video
-        appForcePlayVideo
+        #selfViewVideo
         [muted]="true"
-        *ngIf="streamsActive"
         id="outgoingStream"
         [srcObject]="this.outgoingStream"
         width="100%"
@@ -35,15 +34,15 @@ <h1 class="govuk-heading-xl mb-2">
       <app-mic-visualiser
         *ngIf="displayFeed && streamsActive && preferredMicrophoneStream"
         [stream]="preferredMicrophoneStream"
-        [incomingStream]="incomingStream"
+        [incomingStream]="preferredMicrophoneStream"
       ></app-mic-visualiser>
     </div>
   </div>
 </div>
 
 <div class="govuk-grid-row">
   <div *ngIf="showChangeDevices" class="govuk-grid-column-full govuk-!-margin-bottom-6">
-    <a id="change-device-link" href="javascript:void(0);" role="button" (click)="changeDevices()" class="govuk-link">{{
+    <a id="change-device-link" href="javascript:void(0);" (click)="changeDevices()" class="govuk-link">{{
       'self-test.change-camera-mic' | translate
     }}</a>
   </div>

VideoWeb/VideoWeb/ClientApp/src/app/shared/self-test/self-test.component.spec.ts

@@ -25,6 +25,7 @@ import { mockMicStream } from 'src/app/waiting-space/waiting-room-shared/tests/w
 import { getSpiedPropertyGetter } from '../jasmine-helpers/property-helpers';
 import { UserMediaDevice } from '../models/user-media-device';
 import { SelfTestComponent } from './self-test.component';
+import { ElementRef } from '@angular/core';
 
 describe('SelfTestComponent', () => {
     let component: SelfTestComponent;
@@ -36,6 +37,7 @@ describe('SelfTestComponent', () => {
     let userMediaServiceSpy: jasmine.SpyObj<UserMediaService>;
     let connectedDevicesSubject: Subject<UserMediaDevice[]>;
     let activateMicrophoneSubject: Subject<MediaStream>;
+    let activeCameraStreamSubject: Subject<MediaStream>;
 
     let userMediaStreamServiceSpy: jasmine.SpyObj<UserMediaStreamService>;
     let videoCallServiceSpy: jasmine.SpyObj<VideoCallService>;
@@ -65,12 +67,14 @@ describe('SelfTestComponent', () => {
 
         connectedDevicesSubject = new Subject<UserMediaDevice[]>();
         activateMicrophoneSubject = new Subject<MediaStream>();
+        activeCameraStreamSubject = new Subject<MediaStream>();
         getSpiedPropertyGetter(userMediaServiceSpy, 'connectedDevices$').and.returnValue(connectedDevicesSubject.asObservable());
 
-        userMediaStreamServiceSpy = jasmine.createSpyObj<UserMediaStreamService>([], ['activeMicrophoneStream$']);
+        userMediaStreamServiceSpy = jasmine.createSpyObj<UserMediaStreamService>([], ['activeMicrophoneStream$', 'activeCameraStream$']);
         getSpiedPropertyGetter(userMediaStreamServiceSpy, 'activeMicrophoneStream$').and.returnValue(
             activateMicrophoneSubject.asObservable()
         );
+        getSpiedPropertyGetter(userMediaStreamServiceSpy, 'activeCameraStream$').and.returnValue(activeCameraStreamSubject.asObservable());
 
         videoCallServiceSpy = jasmine.createSpyObj<VideoCallService>([
             'onCallConnected',
@@ -726,6 +730,15 @@ describe('SelfTestComponent', () => {
     });
 
     describe('on handleCallSetup', () => {
+        let videoElementRefMock: ElementRef;
+
+        beforeEach(() => {
+            videoElementRefMock = {
+                nativeElement: document.createElement('video')
+            };
+
+            component.videoElement = videoElementRefMock;
+        });
         it('should set the stream and connect the call', () => {
             // Arrange
             const expectedPin = '0000';

VideoWeb/VideoWeb/ClientApp/src/app/shared/self-test/self-test.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { Guid } from 'guid-typescript';
 import { Subject, Subscription } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
@@ -35,6 +35,8 @@ export class SelfTestComponent implements OnInit, OnDestroy {
     @Output() testStarted = new EventEmitter();
     @Output() testCompleted = new EventEmitter<TestCallScoreResponse>();
 
+    @ViewChild('selfViewVideo') videoElement: ElementRef;
+
     token: TokenResponse;
     incomingStream: MediaStream | URL;
     outgoingStream: MediaStream | URL;
@@ -177,6 +179,10 @@ export class SelfTestComponent implements OnInit, OnDestroy {
             .pipe(takeUntil(this.destroyedSubject))
             .subscribe(micStream => (this.preferredMicrophoneStream = micStream));
 
+        this.userMediaStreamService.activeCameraStream$
+            .pipe(takeUntil(this.destroyedSubject))
+            .subscribe(cameraStream => (this.outgoingStream = cameraStream));
+
         this.userMediaService
             .hasMultipleDevices()
             .pipe(takeUntil(this.destroyedSubject))
@@ -209,6 +215,10 @@ export class SelfTestComponent implements OnInit, OnDestroy {
             participant: this.selfTestParticipantId
         });
         this.outgoingStream = callSetup.stream;
+        this.videoElement.nativeElement.srcObject = this.outgoingStream;
+        this.videoElement.nativeElement.addEventListener('loadedmetadata', () => {
+            this.videoElement.nativeElement.play().catch(error => this.logger.error(`${this.loggerPrefix} - Error playing video:`, error));
+        });
         this.videoCallService.connect('0000', null);
     }
 

VideoWeb/VideoWeb/Startup.cs

@@ -126,7 +126,10 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             // this is a workaround to set HSTS in a docker
             // reference from https://github.com/dotnet/dotnet-docker/issues/2268#issuecomment-714613811
             app.Use(async (context, next) => {
-                context.Response.Headers.Add("Strict-Transport-Security", "max-age=31536000");
+                if (!context.Response.Headers.ContainsKey("Strict-Transport-Security"))
+                {
+                    context.Response.Headers.Add("Strict-Transport-Security", "max-age=31536000");
+                }
                 await next.Invoke();
             });