fix(player): fixes some crashes and warnings when using minimize presentation

Fixes some bugs mainly when seeking into/out minimized presentation.

Author: germanocaumo

src/components/webcams/index.js

@@ -90,7 +90,7 @@ const buildOptions = (sources, tracks) => {
 };
 
 const dispatchTimeUpdate = (time) => {
-  const event = new CustomEvent(EVENTS.TIME_UPDATE, { detail: { time }});
+  const event = new CustomEvent(EVENTS.TIME_UPDATE, { detail: { time } });
   document.dispatchEvent(event);
 };
 
@@ -108,9 +108,10 @@ const Webcams = () => {
 
       player.webcams = videojs(video, buildOptions(sources, tracks), () => {
         player.webcams.on('play', () => {
+          if (interval.current) clearInterval(interval.current);
           const frequency = getFrequency();
           interval.current = setInterval(() => {
-            if (player.webcams) {
+            if (player.webcams && !player.webcams.isDisposed()) {
               const currentTime = player.webcams.currentTime();
               dispatchTimeUpdate(currentTime);
             }
@@ -140,6 +141,7 @@ const Webcams = () => {
 
   useEffect(() => {
     return () => {
+      if (interval.current) clearInterval(interval.current);
       if (player.webcams) {
         player.webcams.dispose();
         player.webcams = null;

src/utils/player.js

@@ -18,19 +18,29 @@ const player = {
     return PLAYERS[ID.WEBCAMS];
   },
   set screenshare(value) {
-    if (!PLAYERS[ID.SCREENSHARE]) PLAYERS[ID.SCREENSHARE] = value;
+    PLAYERS[ID.SCREENSHARE] = value;
 
-    if (this.webcams) {
+    if (this.synchronizer) {
+      this.synchronizer.destroy();
+      this.synchronizer = null;
+    }
+
+    if (value && this.webcams) {
       this.synchronizer = new Synchronizer(this.webcams, this.screenshare);
     }
   },
   set synchronizer(value) {
-    if (!SYNCHRONIZER) SYNCHRONIZER = value;
+    SYNCHRONIZER = value;
   },
   set webcams(value) {
-    if (!PLAYERS[ID.WEBCAMS]) PLAYERS[ID.WEBCAMS] = value;
+    PLAYERS[ID.WEBCAMS] = value;
+
+    if (this.synchronizer) {
+      this.synchronizer.destroy();
+      this.synchronizer = null;
+    }
 
-    if (this.screenshare) {
+    if (value && this.screenshare) {
       this.synchronizer = new Synchronizer(this.webcams, this.screenshare);
     }
   },

src/utils/synchronizer.js

@@ -39,6 +39,7 @@ export default class Synchronizer {
   constructor(primary, secondary) {
     this.primary = primary;
     this.secondary = secondary;
+    this.listeners = [];
 
     this.status = {
       primary: 'waiting',
@@ -50,66 +51,91 @@ export default class Synchronizer {
     this.init();
   }
 
+  _on(target, event, callback) {
+    target.on(event, callback);
+    this.listeners.push({ target, event, callback });
+  }
+
+  destroy() {
+    this.listeners.forEach(({ target, event, callback }) => {
+      target.off(event, callback);
+    });
+    this.listeners = [];
+
+    if (this.visibilityHandler) {
+      document.removeEventListener('visibilitychange', this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
+  }
+
   init() {
     STATUSES.forEach(status => {
-      this.primary.on(status, () => this.status.primary = status);
-      this.secondary.on(status, () => this.status.secondary = status);
+      this._on(this.primary, status, () => this.status.primary = status);
+      this._on(this.secondary, status, () => this.status.secondary = status);
     });
 
-    this.primary.on('play', () => this.secondary.play());
-    this.primary.on('pause', () => this.secondary.pause());
+    this._on(this.primary, 'play', () => {
+      if (!this.secondary?.isDisposed?.()) this.secondary?.play();
+    });
+    this._on(this.primary, 'pause', () => {
+      if (!this.secondary?.isDisposed?.()) this.secondary?.pause();
+    });
 
-    this.primary.on('seeking', () => {
+    this._on(this.primary, 'seeking', () => {
+      if (this.primary.isDisposed?.()) return;
       const currentTime = this.primary.currentTime();
-      this.secondary.currentTime(currentTime);
+      if (!this.secondary?.isDisposed?.()) this.secondary?.currentTime(currentTime);
     });
 
-    this.primary.on('ratechange', () => {
+    this._on(this.primary, 'ratechange', () => {
+      if (this.primary.isDisposed?.()) return;
       const playbackRate = this.primary.playbackRate();
-      this.secondary.playbackRate(playbackRate);
+      if (!this.secondary?.isDisposed?.()) this.secondary?.playbackRate(playbackRate);
     });
 
-    this.primary.on('waiting', () => {
+    this._on(this.primary, 'waiting', () => {
       if (!this.synching && this.status.secondary === 'canplay') {
         this.synching = true;
-        this.primary.pause();
+        if (!this.primary.isDisposed?.()) this.primary.pause();
       }
     });
 
-    this.primary.on('canplay', () => {
+    this._on(this.primary, 'canplay', () => {
       if (this.synching) {
         this.synching = false;
-        this.primary.play();
+        if (!this.primary.isDisposed?.()) this.primary.play();
       }
     });
 
-    this.secondary.on('waiting', () => {
+    this._on(this.secondary, 'waiting', () => {
       if (!this.synching && this.status.primary === 'canplay') {
         this.synching = true;
-        this.primary.pause();
+        if (!this.primary.isDisposed?.()) this.primary.pause();
       }
     });
 
-    this.secondary.on('canplay', () => {
+    this._on(this.secondary, 'canplay', () => {
       if (this.synching) {
         this.synching = false;
-        this.primary.play();
+        if (!this.primary.isDisposed?.()) this.primary.play();
       }
     });
 
     // IMPORTANT: Blink holds the secondary media down while the document
     // page is not visible
     // Force medias to sync on visibility change and document is visible
-    document.addEventListener('visibilitychange', () => {
+    this.visibilityHandler = () => {
       if (document.visibilityState === 'visible') {
+        if (this.primary.isDisposed?.()) return;
         const currentTime = this.primary.currentTime();
-        this.secondary.currentTime(currentTime);
+        if (!this.secondary?.isDisposed?.()) this.secondary?.currentTime(currentTime);
       }
-    });
+    };
+    document.addEventListener('visibilitychange', this.visibilityHandler);
 
     EVENTS.forEach(event => {
-      this.primary.on(event, () => logger.debug(`primary ${event} ${this.status.primary}`));
-      this.secondary.on(event, () => logger.debug(`secondary ${event} ${this.status.secondary}`));
+      this._on(this.primary, event, () => logger.debug(`primary ${event} ${this.status.primary}`));
+      this._on(this.secondary, event, () => logger.debug(`secondary ${event} ${this.status.secondary}`));
     });
   }
 }