VIH-8295 hide additional flex bar in icons container when user is an …

…observer because they will see a bar but no icons such as share-screen to separate the sections

VideoWeb/VideoWeb/ClientApp/src/app/waiting-space/hearing-controls/hearing-controls-base.component.spec.ts

@@ -4,7 +4,7 @@ import { BehaviorSubject, Observable, of, Subject, Subscription } from 'rxjs';
 import {
     ClientSettingsResponse,
     ConferenceResponse,
-    ParticipantForUserResponse,
+    ParticipantForUserResponse, ParticipantResponse,
     ParticipantStatus,
     Role
 } from 'src/app/services/clients/api-client';
@@ -1122,4 +1122,21 @@ describe('HearingControlsBaseComponent', () => {
             expect(eventsServiceSpy.sendMediaStatus).toHaveBeenCalledTimes(0);
         });
     });
+
+    describe('isObserver', () => {
+        it('should return true when participant role is QuickLinkObserver', () => {
+            component.participant = { role: Role.QuickLinkObserver } as ParticipantResponse;
+            expect(component.isObserver).toBeTrue();
+        });
+
+        it('should return false when participant role is not QuickLinkObserver', () => {
+            component.participant = { role: Role.Judge } as ParticipantResponse;
+            expect(component.isObserver).toBeFalse();
+        });
+
+        it('should return false when participant is undefined', () => {
+            component.participant = undefined;
+            expect(component.isObserver).toBeFalse();
+        });
+    });
 });

VideoWeb/VideoWeb/ClientApp/src/app/waiting-space/hearing-controls/hearing-controls-base.component.ts

@@ -106,6 +106,10 @@ export abstract class HearingControlsBaseComponent implements OnInit, OnDestroy
         return this.participant.role === Role.JudicialOfficeHolder || this.isJudge;
     }
 
+    get isObserver(): boolean {
+        return this.participant?.role === Role.QuickLinkObserver;
+    }
+
     get isJOHRoom(): boolean {
         return this.participant?.current_room?.label.startsWith('JudgeJOH');
     }

VideoWeb/VideoWeb/ClientApp/src/app/waiting-space/private-consultation-room-controls/private-consultation-room-controls.component.html

@@ -251,7 +251,7 @@
         </div>
       </div>
     </div>
-    <div class="flexBar"></div>
+    <div *ngIf="!isObserver" class="flexBar"></div>
     <div
       class="icon-button"
       id="toggle-participants-panel"