From 46eb2e0042a955620b2904333e2d1062b7a3c03d Mon Sep 17 00:00:00 2001
From: Nikita Konev <nikit.cpp@yandex.ru>
Date: Fri, 27 Dec 2024 02:06:29 +0300
Subject: [PATCH] better removeComponentIfNeed

---
 frontend/src/ChatVideo.vue | 71 +++++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/frontend/src/ChatVideo.vue b/frontend/src/ChatVideo.vue
index 946aed95..f5a92e85 100644
--- a/frontend/src/ChatVideo.vue
+++ b/frontend/src/ChatVideo.vue
@@ -336,9 +336,7 @@ export default {
       participant,
     ) {
       console.log('handleTrackUnsubscribed', track);
-      // remove tracks from all attached elements
-      track.detach();
-      this.removeComponent(participant.identity, track);
+      this.removeComponentIfNeed(participant.identity, track);
     },
 
     handleLocalTrackUnpublished(trackPublication, participant) {
@@ -346,56 +344,67 @@ export default {
       console.log('handleLocalTrackUnpublished sid=', track.sid, "kind=", track.kind);
       console.debug('handleLocalTrackUnpublished', trackPublication, "track", track);
 
-      // when local tracks are ended, update UI to remove them from rendering
-      track.detach();
-      this.removeComponent(participant.identity, track);
+      this.removeComponentIfNeed(participant.identity, track);
 
       this.refreshLocalMuteAppBarButtons();
     },
-    electNewPresenterIfNeed() {
-      // about second: detachPresenterIfNeed() leaves presenterVideoPublication null
-      if (this.chatStore.presenterEnabled && !this.presenterData?.videoStream) {
-        const data = this.getAnyPrioritizedVideoData();
-        if (data) {
-          this.updatePresenterIfNeed(data, false);
-        }
-      }
-    },
     electNewPresenter() {
       const data = this.getAnyPrioritizedVideoData();
       if (data) {
         this.updatePresenter(data);
       }
     },
-    removeComponent(userIdentity, track) {
+    removeComponentIfNeed(userIdentity, track) {
+      // remove tracks from all attached elements
+      track.detach();
+
+      let presenterWasUnpinned = false;
+      if (track.sid === this.chatStore.pinnedTrackSid) {
+        this.chatStore.pinnedTrackSid = null;
+        this.detachPresenter();
+        presenterWasUnpinned = true;
+      }
+
+      let presenterWasDetached = false;
       for (const componentWrapper of this.getByUser(userIdentity)) {
         const component = componentWrapper.component;
         const app = componentWrapper.app;
         const containerEl = componentWrapper.containerEl;
         console.debug("For removal checking component=", component, "against", track);
         if (component.getVideoStreamId() == track.sid || component.getAudioStreamId() == track.sid) {
-          console.log("Removing component=", component.getId());
-          try {
-            app.unmount();
-            this.videoContainerDiv.removeChild(containerEl);
-          } catch (e) {
-            console.debug("Something wrong on removing child", e, component.$el, this.videoContainerDiv);
+          if (component.getVideoStreamId() == track.sid) {
+            console.log("Setting null video for component=", component.getId());
+            if (this.chatStore.presenterEnabled && this.presenterData?.videoStream && this.presenterData.videoStream.trackSid == component.getVideoStreamId()) {
+              this.detachPresenter();
+              presenterWasDetached = true;
+            }
+            component.setVideoStream(null)
+          } else if (component.getAudioStreamId() == track.sid) {
+            console.log("Setting null audio for component=", component.getId());
+            component.setAudioStream(null)
           }
-          this.removeComponentForUser(userIdentity, componentWrapper);
 
-          if (this.chatStore.presenterEnabled && this.presenterData?.videoStream && this.presenterData.videoStream.trackSid == component.getVideoStream()?.trackSid) {
-            this.detachPresenter();
-          }
+          if (component.getVideoStreamId() == null && component.getAudioStreamId() == null) {
+            try {
+              console.log("Removing component=", component.getId());
+              app.unmount();
+              this.videoContainerDiv.removeChild(containerEl);
+              this.removeComponentForUser(userIdentity, componentWrapper);
+
+              console.log("Successfully removed component=", component.getId());
 
+              this.recalculateLayout();
+              break
+            } catch (e) {
+              console.debug("Something wrong on removing child", e, component.$el, this.videoContainerDiv);
+            }
+          }
         }
       }
 
-      if (track.sid === this.chatStore.pinnedTrackSid) {
-        this.chatStore.pinnedTrackSid = null;
+      if (presenterWasDetached || presenterWasUnpinned) {
+        this.electNewPresenter();
       }
-
-      this.recalculateLayout();
-      this.electNewPresenterIfNeed();
     },
 
     handleActiveSpeakerChange(speakers) {