fix: update device selector state as per media permission state

dyte-io · Oct 6, 2024 · 655a505 · 655a505
1 parent 6365933
commit 655a505
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/packages/core/src/components/dyte-camera-selector/dyte-camera-selector.tsx b/packages/core/src/components/dyte-camera-selector/dyte-camera-selector.tsx
@@ -49,6 +49,7 @@ export class DyteCameraSelector {
 
     meeting.self?.addListener('deviceListUpdate', this.deviceListUpdateListener);
     meeting.self?.addListener('deviceUpdate', this.deviceUpdateListener);
+    meeting.self?.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
 
     writeTask(async () => {
       const videoDevices = await meeting.self.getVideoDevices();
@@ -75,6 +76,7 @@ export class DyteCameraSelector {
     this.meeting?.stage?.removeListener('stageStatusUpdate', this.stageStateListener);
     this.meeting?.self.removeListener('deviceListUpdate', this.deviceListUpdateListener);
     this.meeting?.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+    this.meeting?.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
   }
 
   private stageStateListener = () => {
@@ -90,6 +92,13 @@ export class DyteCameraSelector {
     this.currentDevice = device;
   };
 
+  private mediaPermissionUpdateListener = async ({ kind, message }) => {
+    if (!this.meeting) return;
+    if (kind === 'video' && message === 'ACCEPTED') {
+      this.videoDevices = await this.meeting.self.getVideoDevices();
+    }
+  };
+
   private async setDevice(deviceId: string) {
     const device = this.videoDevices.find((d) => d.deviceId === deviceId);
     this.currentDevice = device;

diff --git a/packages/core/src/components/dyte-microphone-selector/dyte-microphone-selector.tsx b/packages/core/src/components/dyte-microphone-selector/dyte-microphone-selector.tsx
@@ -52,6 +52,7 @@ export class DyteMicrophoneSelector {
     this.meeting?.stage?.removeListener('stageStatusUpdate', this.stageStateListener);
     this.meeting?.self.removeListener('deviceListUpdate', this.deviceListUpdateListener);
     this.meeting?.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+    this.meeting?.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
   }
 
   private stageStateListener = () => {
@@ -77,6 +78,13 @@ export class DyteMicrophoneSelector {
     }
   };
 
+  private mediaPermissionUpdateListener = async ({ kind, message }) => {
+    if (!this.meeting) return;
+    if (kind === 'audio' && message === 'ACCEPTED') {
+      this.audioinputDevices = await this.meeting.self.getAudioDevices();
+    }
+  };
+
   @Watch('meeting')
   meetingChanged(meeting: Meeting) {
     if (meeting == null) return;
@@ -93,6 +101,7 @@ export class DyteMicrophoneSelector {
       stage?.addListener('stageStatusUpdate', this.stageStateListener);
       self.addListener('deviceListUpdate', this.deviceListUpdateListener);
       self.addListener('deviceUpdate', this.deviceUpdateListener);
+      self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
 
       if (currentAudioDevice != undefined) {
         this.audioinputDevices = [

diff --git a/packages/core/src/components/dyte-speaker-selector/dyte-speaker-selector.tsx b/packages/core/src/components/dyte-speaker-selector/dyte-speaker-selector.tsx
@@ -56,6 +56,7 @@ export class DyteSpeakerSelector {
   disconnectedCallback() {
     this.meeting?.self.removeListener('deviceListUpdate', this.deviceListUpdateListener);
     this.meeting?.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+    this.meeting?.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdate);
   }
 
   private deviceListUpdateListener = ({ devices }) => {
@@ -77,6 +78,13 @@ export class DyteSpeakerSelector {
     }
   };
 
+  private mediaPermissionUpdate = async ({ kind, message }) => {
+    if (!this.meeting) return;
+    if (kind === 'audio' && message === 'ACCEPTED') {
+      this.speakerDevices = await this.meeting.self.getSpeakerDevices();
+    }
+  };
+
   @Watch('meeting')
   meetingChanged(meeting: Meeting) {
     if (meeting == null) return;
@@ -91,6 +99,7 @@ export class DyteSpeakerSelector {
 
       self.addListener('deviceListUpdate', this.deviceListUpdateListener);
       self.addListener('deviceUpdate', this.deviceUpdateListener);
+      self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdate);
 
       if (currentSpeakerDevice != undefined) {
         this.speakerDevices = [