Merge pull request #14 from dyte-io/fix/pip-fixes

fix: pip misc bugs
dyte-io · Oct 1, 2024 · a84fcc4 · a84fcc4
2 parents c101f1a + 8d3c213
commit a84fcc4
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/packages/core/src/components/dyte-grid/dyte-grid.tsx b/packages/core/src/components/dyte-grid/dyte-grid.tsx
@@ -130,6 +130,12 @@ export class DyteGrid {
     if (oldMeeting !== null) this.disconnectMeeting(oldMeeting);
     if (meeting != null) {
       const { self, participants, plugins, stage } = meeting;
+      // Check if PiP is supported and enabled
+      this.pipSupported =
+        this.meeting.participants.pip?.isSupported() && meeting.self.config?.pipMode;
+      if (this.pipSupported) {
+        this.meeting.participants.pip.init();
+      }
       // Initialize values
       const { permissions } = self;
 
@@ -161,13 +167,6 @@ export class DyteGrid {
         this.updateStage();
       }
 
-      // Check if PiP is supported and enabled
-      this.pipSupported =
-        this.meeting.participants.pip?.isSupported() && meeting.self.config?.pipMode;
-      if (this.pipSupported) {
-        this.meeting.participants.pip.init();
-      }
-
       // Add all listeners
       self.addListener('roomLeft', this.updateRoomStateListener);
       self.addListener('roomJoined', this.updateRoomStateListener);

diff --git a/packages/core/src/components/dyte-participant-tile/dyte-participant-tile.tsx b/packages/core/src/components/dyte-participant-tile/dyte-participant-tile.tsx
@@ -87,7 +87,7 @@ export class DyteParticipantTile {
       return;
     }
     this.videoEl = el;
-    this.participant.registerVideoElement(this.videoEl);
+    this.participant.registerVideoElement(this.videoEl, this.isPreview);
     this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl });
   }
 
@@ -107,7 +107,7 @@ export class DyteParticipantTile {
     if (this.playTimeout) clearTimeout(this.playTimeout);
     if (this.participant == null) return;
 
-    this.participant.deregisterVideoElement(this.videoEl);
+    this.participant.deregisterVideoElement(this.videoEl, this.isPreview);
     (this.participant as DyteParticipant).removeListener('pinned', this.onPinned);
     (this.participant as DyteParticipant).removeListener('unpinned', this.onPinned);
     this.meeting.meta.off('mediaConnectionUpdate', this.mediaConnectionUpdateListener);
@@ -127,14 +127,14 @@ export class DyteParticipantTile {
 
     if (this.meeting === undefined) {
       if (this.isPreview) {
-        this.videoEl && this.participant.registerVideoElement(this.videoEl);
+        this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
       }
       return;
     }
 
     this.isPinned = participant.isPinned;
 
-    this.videoEl && this.participant.registerVideoElement(this.videoEl);
+    this.videoEl && this.participant.registerVideoElement(this.videoEl, this.isPreview);
 
     (participant as DyteParticipant).addListener('pinned', this.onPinned);
     (participant as DyteParticipant).addListener('unpinned', this.onPinned);

diff --git a/packages/core/src/components/dyte-settings-video/dyte-settings-video.tsx b/packages/core/src/components/dyte-settings-video/dyte-settings-video.tsx
@@ -91,6 +91,7 @@ export class DyteSettingsVideo {
                 t={this.t}
                 states={states}
                 size={this.size}
+                isPreview
               />
             ) : (
               <div class="camera-off-helper">

diff --git a/packages/core/src/components/dyte-setup-screen/dyte-setup-screen.tsx b/packages/core/src/components/dyte-setup-screen/dyte-setup-screen.tsx
@@ -115,7 +115,7 @@ export class DyteSetupScreen {
             <Render
               element="dyte-participant-tile"
               defaults={defaults}
-              props={{ participant: this.meeting?.self, size: 'md' }}
+              props={{ participant: this.meeting?.self, size: 'md', isPreview: true }}
               childProps={{ participant: this.meeting?.self, size: 'md' }}
               deepProps
             />