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 index a37f062af..e6be080d2 100644 --- a/packages/core/src/components/dyte-participant-tile/dyte-participant-tile.tsx +++ b/packages/core/src/components/dyte-participant-tile/dyte-participant-tile.tsx @@ -83,12 +83,11 @@ export class DyteParticipantTile { @Event() tileUnload: EventEmitter; private onVideoRef(el: HTMLVideoElement) { - this.videoEl = el; - if (this.isPreview || this.participant == null || this.meeting == null) { + if (this.isPreview || !this.participant || !this.meeting || this.videoEl === el) { return; } - this.participant && this.participant.registerVideoElement(el); - + this.videoEl = el; + this.participant.registerVideoElement(this.videoEl); this.tileLoad.emit({ participant: this.participant, videoElement: this.videoEl }); } diff --git a/packages/core/src/components/dyte-simple-grid/dyte-simple-grid.tsx b/packages/core/src/components/dyte-simple-grid/dyte-simple-grid.tsx index 2ce74f707..72875fc5e 100644 --- a/packages/core/src/components/dyte-simple-grid/dyte-simple-grid.tsx +++ b/packages/core/src/components/dyte-simple-grid/dyte-simple-grid.tsx @@ -8,7 +8,6 @@ import { Size, States } from '../../types/props'; import { UIConfig } from '../../types/ui-config'; import { Dimensions, useGrid } from '../../lib/grid'; import ResizeObserver from 'resize-observer-polyfill'; -import { getInitials } from '../../utils/string'; import { MediaConnectionState } from '@dytesdk/web-core'; /** @@ -75,32 +74,6 @@ export class DyteSimpleGrid { this.resizeObserver?.disconnect(); } - private onParticipantTileLoad = ( - event: CustomEvent<{ participant: Peer; videoElement: HTMLVideoElement }> - ) => { - if (!this.meeting) return; - - const { participant, videoElement } = event.detail; - if (!participant || !videoElement) return; - - this.meeting.participants.pip?.addSource( - participant.id, - videoElement, - participant.videoEnabled, - false, - participant.name ?? getInitials(participant.name) - ); - if (participant.videoEnabled) { - this.meeting.participants.pip?.enableSource(participant.id); - } - }; - private onParticipantTileUnload = (event: CustomEvent) => { - if (!this.meeting) return; - - const participant = event.detail; - this.meeting.participants.pip?.removeSource(participant.id); - }; - render() { const defaults = { meeting: this.meeting, @@ -138,8 +111,6 @@ export class DyteSimpleGrid { }, key: participant.id, 'data-participant': participant.id, - onTileLoad: this.onParticipantTileLoad, - onTileUnload: this.onParticipantTileUnload, mediaConnection: this.mediaConnection, }} childProps={{ participant }}