Show encryption key status from LiveKit (#2700)

* Refactor to make encryption system available in view models

* WIP show encryption errors from LiveKit

* Missing CSS

* Show encryption status based on LK and RTC

* Lint

* Lint

* Fix tests

* Update wording

* Refactor

* Lint

src/state/CallViewModel.ts

@@ -226,6 +226,7 @@ class UserMedia {
     member: RoomMember | undefined,
     participant: LocalParticipant | RemoteParticipant,
     encryptionSystem: EncryptionSystem,
+    livekitRoom: LivekitRoom,
   ) {
     this.vm = participant.isLocal
       ? new LocalUserMediaViewModel(
@@ -233,12 +234,14 @@ class UserMedia {
           member,
           participant as LocalParticipant,
           encryptionSystem,
+          livekitRoom,
         )
       : new RemoteUserMediaViewModel(
           id,
           member,
           participant as RemoteParticipant,
           encryptionSystem,
+          livekitRoom,
         );
 
     this.speaker = this.vm.speaking.pipe(
@@ -282,12 +285,14 @@ class ScreenShare {
     member: RoomMember | undefined,
     participant: LocalParticipant | RemoteParticipant,
     encryptionSystem: EncryptionSystem,
+    liveKitRoom: LivekitRoom,
   ) {
     this.vm = new ScreenShareViewModel(
       id,
       member,
       participant,
       encryptionSystem,
+      liveKitRoom,
     );
   }
 
@@ -428,6 +433,7 @@ export class CallViewModel extends ViewModel {
                       member,
                       p,
                       this.encryptionSystem,
+                      this.livekitRoom,
                     ),
                 ];
 
@@ -441,6 +447,7 @@ export class CallViewModel extends ViewModel {
                         member,
                         p,
                         this.encryptionSystem,
+                        this.livekitRoom,
                       ),
                   ];
                 }