From 2a8656ed2ee9f06df8eb9607e15d75204da52052 Mon Sep 17 00:00:00 2001
From: germanocaumo <germanocaumo@gmail.com>
Date: Mon, 8 Dec 2025 12:47:29 -0300
Subject: [PATCH 1/2] feat(layout): hide presentation according to layout.xml
 new events

This adds support to the new event saying when the presenter minimized the presentation. When found it:
- Hides presentation (and thumbnails) completely
- Make the webcams occupy the main area
- Expands chat/notes to full left side (like it is when single content)
---
 src/components/bars/top/buttons/swap.js |  8 ++++----
 src/components/bars/top/index.js        | 11 ++++++----
 src/components/player/content/index.js  | 18 +++++++++--------
 src/components/player/index.js          | 17 +++++++++++++++-
 src/components/player/media/index.js    |  5 ++++-
 src/components/presentation/index.js    |  6 +++---
 src/components/thumbnails/index.js      |  2 +-
 src/components/tldraw/index.js          | 10 ++++-----
 src/components/tldraw_v2/index.js       |  6 +++---
 src/components/utils/hooks/index.js     | 27 +++++++++++++++++--------
 src/utils/builder.js                    | 10 +++++++--
 src/utils/data/validators.js            | 17 +++++++---------
 12 files changed, 87 insertions(+), 50 deletions(-)

diff --git a/src/components/bars/top/buttons/swap.js b/src/components/bars/top/buttons/swap.js
index e714b986..bd953d29 100644
--- a/src/components/bars/top/buttons/swap.js
+++ b/src/components/bars/top/buttons/swap.js
@@ -16,14 +16,14 @@ const intlMessages = defineMessages({
   },
 });
 
-const propTypes = { toggleSwap: PropTypes.func };
+const propTypes = { toggleSwap: PropTypes.func, hidePresentation: PropTypes.bool };
 
-const defaultProps = { toggleSwap: () => {} };
+const defaultProps = { toggleSwap: () => { }, hidePresentation: false };
 
-const Swap = ({ toggleSwap }) => {
+const Swap = ({ toggleSwap, hidePresentation }) => {
   const intl = useIntl();
 
-  if (!layout.control || !config.swap || layout.single) return null;
+  if (!layout.control || !config.swap || layout.single || hidePresentation) return null;
 
   return (
     <Button
diff --git a/src/components/bars/top/index.js b/src/components/bars/top/index.js
index 9f76e9dd..631da556 100644
--- a/src/components/bars/top/index.js
+++ b/src/components/bars/top/index.js
@@ -13,13 +13,14 @@ const propTypes = {
   section: PropTypes.bool,
   toggleSection: PropTypes.func,
   toggleSwap: PropTypes.func,
+  hidePresentation: PropTypes.bool,
 };
 
 const defaultProps = {
-  openModal: () => {},
+  openModal: () => { },
   section: false,
-  toggleSection: () => {},
-  toggleSwap: () => {},
+  toggleSection: () => { },
+  toggleSwap: () => { },
 };
 
 const Top = ({
@@ -27,6 +28,7 @@ const Top = ({
   section,
   toggleSection,
   toggleSwap,
+  hidePresentation,
 }) => {
 
   return (
@@ -43,7 +45,7 @@ const Top = ({
       <div className="right">
         <ThemeButton />
         <SearchButton openSearch={() => openModal(ID.SEARCH)} />
-        <SwapButton toggleSwap={toggleSwap} />
+        <SwapButton toggleSwap={toggleSwap} hidePresentation={hidePresentation} />
       </div>
     </div>
   );
@@ -54,6 +56,7 @@ Top.defaultProps = defaultProps;
 
 // Checks the side section state
 const areEqual = (prevProps, nextProps) => {
+  if (prevProps.hidePresentation !== nextProps.hidePresentation) return false;
   return prevProps.section === nextProps.section;
 };
 
diff --git a/src/components/player/content/index.js b/src/components/player/content/index.js
index 6502f312..68c52895 100644
--- a/src/components/player/content/index.js
+++ b/src/components/player/content/index.js
@@ -4,7 +4,7 @@ import Presentation from 'components/presentation';
 import TldrawPresentation from 'components/tldraw';
 import TldrawPresentationV2 from 'components/tldraw_v2';
 import { getTldrawBbbVersion } from 'utils/tldraw';
-import { useCurrentInterval, useShouldShowScreenShare } from 'components/utils/hooks';
+import { useCurrentInterval, useLayoutSwap } from 'components/utils/hooks';
 import Screenshare from 'components/screenshare';
 import Thumbnails from 'components/thumbnails';
 import FullscreenButton from 'components/player/buttons/fullscreen';
@@ -21,21 +21,21 @@ const Content = ({
   search,
   swap,
   toggleFullscreen,
+  hidePresentation,
 }) => {
   const {
     index,
   } = useCurrentInterval(storage.tldraw);
 
-  const shouldShowScreenshare = useShouldShowScreenShare();
+  const { showScreenshare } = useLayoutSwap();
 
-  if (layout.single) return null;
+  if (layout.single || hidePresentation) return null;
 
   const isTldrawWhiteboard = storage.tldraw.length ||
-                             storage.panzooms.tldraw ||
-                             storage.cursor.tldraw;
+    storage.panzooms.tldraw ||
+    storage.cursor.tldraw;
 
   let presentation;
-  
   if (isTldrawWhiteboard) {
     const bbbVersion = getTldrawBbbVersion(index);
 
@@ -62,7 +62,7 @@ const Content = ({
         {presentation}
         {layout.screenshare ? (
           // video-js doesn't mount properly when not mounted in time
-          <span style={!shouldShowScreenshare ?{
+          <span style={!showScreenshare ? {
             display: 'none',
             width: '100%',
             height: '100%'
@@ -72,7 +72,7 @@ const Content = ({
           }}>
             <Screenshare />
           </span>
-        ): null}
+        ) : null}
       </div>
       <div className={cx('bottom-content', { 'inactive': fullscreen })}>
         <Thumbnails
@@ -90,6 +90,8 @@ const areEqual = (prevProps, nextProps) => {
 
   if (prevProps.swap !== nextProps.swap) return false;
 
+  if (prevProps.hidePresentation !== nextProps.hidePresentation) return false;
+
   if (!isEqual(prevProps.search, nextProps.search)) return false;
 
   return true;
diff --git a/src/components/player/index.js b/src/components/player/index.js
index aa1a5006..5f878197 100644
--- a/src/components/player/index.js
+++ b/src/components/player/index.js
@@ -19,6 +19,7 @@ import {
 import { ID } from 'utils/constants';
 import layout from 'utils/layout';
 import Shortcuts from 'utils/shortcuts';
+import { useLayoutSwap } from 'components/utils/hooks';
 import './index.scss';
 
 const intlMessages = defineMessages({
@@ -39,6 +40,17 @@ const Player = () => {
 
   const shortcuts = useRef();
 
+  const { showPresentation } = useLayoutSwap();
+  const hidePresentation = showPresentation === false;
+
+  useEffect(() => {
+    if (showPresentation === false) {
+      setSwap(true);
+    } else {
+      setSwap(false);
+    }
+  }, [showPresentation]);
+
   useEffect(() => {
     const { seconds } = config.seek;
 
@@ -67,7 +79,7 @@ const Player = () => {
   const style = {
     'fullscreen-content': fullscreen,
     'hidden-section': !section,
-    'single-content': layout.single,
+    'single-content': layout.single || hidePresentation,
   };
 
   return (
@@ -81,11 +93,13 @@ const Player = () => {
         section={section}
         toggleSection={() => setSection(prevSection => !prevSection)}
         toggleSwap={() => setSwap(prevSwap => !prevSwap)}
+        hidePresentation={hidePresentation}
       />
       <Media
         fullscreen={fullscreen}
         swap={swap}
         toggleFullscreen={() => setFullscreen(prevFullscreen => !prevFullscreen)}
+        hidePresentation={hidePresentation}
       />
       <Application />
       <Content
@@ -94,6 +108,7 @@ const Player = () => {
         search={search}
         swap={swap}
         toggleFullscreen={() => setFullscreen(prevFullscreen => !prevFullscreen)}
+        hidePresentation={hidePresentation}
       />
       <BottomBar />
       <Modal
diff --git a/src/components/player/media/index.js b/src/components/player/media/index.js
index bd82fd53..23b2bdaf 100644
--- a/src/components/player/media/index.js
+++ b/src/components/player/media/index.js
@@ -10,10 +10,11 @@ const Media = ({
   fullscreen,
   swap,
   toggleFullscreen,
+  hidePresentation,
 }) => {
 
   return (
-    <div className={cx('media', { 'swapped-media': swap || layout.single })}>
+    <div className={cx('media', { 'swapped-media': swap || layout.single || hidePresentation })}>
       <FullscreenButton
         content={LAYOUT.MEDIA}
         fullscreen={fullscreen}
@@ -28,6 +29,8 @@ const Media = ({
 const areEqual = (prevProps, nextProps) => {
   if (prevProps.fullscreen !== nextProps.fullscreen) return false;
 
+  if (prevProps.hidePresentation !== nextProps.hidePresentation) return false;
+
   if (prevProps.swap !== nextProps.swap) return false;
 
   return true;
diff --git a/src/components/presentation/index.js b/src/components/presentation/index.js
index 2787e69b..450a52f0 100644
--- a/src/components/presentation/index.js
+++ b/src/components/presentation/index.js
@@ -10,7 +10,7 @@ import Canvas from './canvas';
 import {
   useCurrentContent,
   useCurrentIndex,
-  useShouldShowScreenShare,
+  useLayoutSwap,
 } from 'components/utils/hooks';
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
@@ -61,11 +61,11 @@ const Presentation = () => {
   const viewBox = getViewBox(currentPanzoomIndex);
 
   const started = currentPanzoomIndex !== -1;
-  const shouldShowScreenshare = useShouldShowScreenShare();
+  const { showScreenshare } = useLayoutSwap();
   return (
     <div
       aria-label={intl.formatMessage(intlMessages.aria)}
-      className={cx('presentation-wrapper', { inactive: (currentContent !== ID.PRESENTATION && shouldShowScreenshare) })}
+      className={cx('presentation-wrapper', { inactive: (currentContent !== ID.PRESENTATION && showScreenshare) })}
       id={ID.PRESENTATION}
     >
       <div className={cx('presentation', { logo: !started })}>
diff --git a/src/components/thumbnails/index.js b/src/components/thumbnails/index.js
index d94f92a0..30447016 100644
--- a/src/components/thumbnails/index.js
+++ b/src/components/thumbnails/index.js
@@ -78,7 +78,7 @@ const Thumbnails = ({
 
   const items = useMemo(() => {
     const thumbnails = storage.thumbnails;
-    const layoutSwap = storage.layoutSwap ?? [];
+    const layoutSwap = (storage.layoutSwap ?? []).filter(item => item.hasOwnProperty('showScreenshare'));
     const merged = [...thumbnails, ...layoutSwap];
     const sorted = merged.sort((a, b) => a.timestamp - b.timestamp);
 
diff --git a/src/components/tldraw/index.js b/src/components/tldraw/index.js
index 42191818..f6fd74b8 100644
--- a/src/components/tldraw/index.js
+++ b/src/components/tldraw/index.js
@@ -18,7 +18,7 @@ import {
   useCurrentContent,
   useCurrentIndex,
   useCurrentInterval,
-  useShouldShowScreenShare,
+  useLayoutSwap,
 } from 'components/utils/hooks';
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
@@ -102,9 +102,9 @@ const SlideData = (tldrawAPI) => {
       const {
         shape,
       } = tldrawData[i];
-  
+
       shape.parentId = tldrawAPI?.currentPageId;
-      shapes[shape.id] = shape; 
+      shapes[shape.id] = shape;
     }
   }
 
@@ -118,7 +118,7 @@ const TldrawPresentation = ({ size }) => {
   const currentPanzoomIndex = useCurrentIndex(storage.panzooms);
   const currentSlideIndex = useCurrentIndex(storage.slides);
   const started = currentPanzoomIndex !== -1;
-  const shouldShowScreenShare = useShouldShowScreenShare();
+  const { showScreenshare } = useLayoutSwap();
   const result = SlideData(tldrawAPI);
 
   let { assets, shapes, scaleRatio } = result;
@@ -157,7 +157,7 @@ const TldrawPresentation = ({ size }) => {
   return (
     <div
       aria-label={intl.formatMessage(intlMessages.aria)}
-      className={cx('presentation-wrapper', { inactive: (currentContent !== ID.PRESENTATION && shouldShowScreenShare) })}
+      className={cx('presentation-wrapper', { inactive: (currentContent !== ID.PRESENTATION && showScreenshare) })}
       id={ID.PRESENTATION}
     >
       {!started
diff --git a/src/components/tldraw_v2/index.js b/src/components/tldraw_v2/index.js
index 2247e49a..843b4ec9 100644
--- a/src/components/tldraw_v2/index.js
+++ b/src/components/tldraw_v2/index.js
@@ -11,7 +11,7 @@ import {
   useCurrentContent,
   useCurrentIndex,
   useCurrentInterval,
-  useShouldShowScreenShare,
+  useLayoutSwap,
 } from 'components/utils/hooks';
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
@@ -102,7 +102,7 @@ const TldrawPresentationV2 = ({ size }) => {
   const started = currentPanzoomIndex !== -1;
 
   const result = SlideData(tldrawAPI);
-  const shouldShowScreenshare = useShouldShowScreenShare();
+  const { showScreenshare } = useLayoutSwap();
 
   let { assets, shapes, scaleRatio } = result;
   const {
@@ -159,7 +159,7 @@ const TldrawPresentationV2 = ({ size }) => {
   return (
     <div
       aria-label={intl.formatMessage(intlMessages.aria)}
-      className={cx('presentation-wrapper', { inactive: (currentContent !== ID.PRESENTATION && shouldShowScreenshare) })}
+      className={cx('presentation-wrapper', { inactive: (currentContent !== ID.PRESENTATION && showScreenshare) })}
       id={ID.PRESENTATION}
     >{!started
       ? <div className={cx('presentation', 'logo')} />
diff --git a/src/components/utils/hooks/index.js b/src/components/utils/hooks/index.js
index bc7881c2..4f9e0e61 100644
--- a/src/components/utils/hooks/index.js
+++ b/src/components/utils/hooks/index.js
@@ -9,7 +9,7 @@ import {
   getCurrentDataInterval,
 } from 'utils/data';
 import storage from 'utils/data/storage';
-import { isEqual, isShowScreenshareAsContent } from 'utils/data/validators';
+import { isEqual, getLayoutEvent } from 'utils/data/validators';
 
 const useCurrentContent = () => {
   const [currentContent, setCurrentContent] = useState(ID.PRESENTATION);
@@ -29,22 +29,33 @@ const useCurrentContent = () => {
   return currentContent;
 };
 
-const useShouldShowScreenShare = () => {
-  const [shouldShowScreenShare, setShouldShowScreenShare] = useState(false);
+const useLayoutSwap = () => {
+  const [layoutSwap, setLayoutSwap] = useState({
+    showPresentation: true,
+    showScreenshare: false,
+  });
 
   useEffect(() => {
     const handleTimeUpdate = (event) => {
-      const nextShouldShowScreenShare = isShowScreenshareAsContent(storage.layoutSwap, event.detail.time);
-      if (shouldShowScreenShare !== nextShouldShowScreenShare) setShouldShowScreenShare(nextShouldShowScreenShare);
+      const layoutEvent = getLayoutEvent(storage.layoutSwap, event.detail.time);
+      const nextShowPresentation = layoutEvent ? layoutEvent.showPresentation : true;
+      const nextShowScreenshare = layoutEvent ? layoutEvent.showScreenshare : false;
+
+      if (layoutSwap.showPresentation !== nextShowPresentation || layoutSwap.showScreenshare !== nextShowScreenshare) {
+        setLayoutSwap({
+          showPresentation: nextShowPresentation,
+          showScreenshare: nextShowScreenshare,
+        });
+      }
     };
 
     document.addEventListener(EVENTS.TIME_UPDATE, handleTimeUpdate);
     return () => {
       document.removeEventListener(EVENTS.TIME_UPDATE, handleTimeUpdate);
     };
-  }, [shouldShowScreenShare]);
+  }, [layoutSwap]);
 
-  return shouldShowScreenShare;
+  return layoutSwap;
 }
 
 const useCurrentIndex = (data) => {
@@ -96,5 +107,5 @@ export {
   useCurrentContent,
   useCurrentIndex,
   useCurrentInterval,
-  useShouldShowScreenShare,
+  useLayoutSwap,
 };
diff --git a/src/utils/builder.js b/src/utils/builder.js
index 440116e7..6e54d87f 100644
--- a/src/utils/builder.js
+++ b/src/utils/builder.js
@@ -379,10 +379,16 @@ const buildLayout = result => {
 
   if (recording?.event) {
     const newData = convertToArray(recording.event).map(layout => {
-      return {
+      const data = {
         timestamp: parseFloat(layout._timestamp),
-        showScreenshare: layout._show_screenshare === 'true',
+      };
+      if (layout._show_screenshare) {
+        data.showScreenshare = layout._show_screenshare === 'true';
+      }
+      if (layout._show_presentation) {
+        data.showPresentation = layout._show_presentation === 'true';
       }
+      return data;
     });
     return newData;
   }
diff --git a/src/utils/data/validators.js b/src/utils/data/validators.js
index a7d2b466..aacc4c6f 100644
--- a/src/utils/data/validators.js
+++ b/src/utils/data/validators.js
@@ -52,7 +52,7 @@ const isContentVisible = (layout, swap) => {
 
   let visible;
   switch (layout) {
-    case  CONTENT:
+    case CONTENT:
       visible = !swap;
       break;
     case MEDIA:
@@ -159,22 +159,19 @@ const isVisible = (time, timestamp) => timestamp <= time;
 
 const wasCleared = (time, clear) => clear !== -1 && clear <= time;
 
-function getMostRecentEvent(arr, time) {
+function getMostRecentEvent(arr, time, property) {
   return arr
-    .filter(item => item.timestamp <= time)
+    .filter(item => item.timestamp <= time && (!property || hasProperty(item, property)))
     .reduce(
       (prev, curr) => (prev?.timestamp > curr.timestamp ? prev : curr),
       null
     );
 }
 
-const isShowScreenshareAsContent = (data, time) => {
-  if (isEmpty(data)) return true;
+const getLayoutEvent = (data, time) => {
+  if (isEmpty(data)) return null;
 
-  const event = getMostRecentEvent(data, time);
-
-  if (!event) return false;
-  return event.showScreenshare;
+  return getMostRecentEvent(data, time);
 }
 
 export {
@@ -191,5 +188,5 @@ export {
   isValid,
   isVisible,
   wasCleared,
-  isShowScreenshareAsContent,
+  getLayoutEvent,
 };

From 412f6b2e423da2e6ba5726644271a958858a8448 Mon Sep 17 00:00:00 2001
From: germanocaumo <germanocaumo@gmail.com>
Date: Mon, 8 Dec 2025 12:51:41 -0300
Subject: [PATCH 2/2] fix(player): fixes some crashes and warnings when using
 minimize presentation

Fixes some bugs mainly when seeking into/out minimized presentation.
---
 src/components/webcams/index.js |  6 ++-
 src/utils/player.js             | 20 +++++++---
 src/utils/synchronizer.js       | 68 +++++++++++++++++++++++----------
 3 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/src/components/webcams/index.js b/src/components/webcams/index.js
index 1a101173..f9bcff63 100644
--- a/src/components/webcams/index.js
+++ b/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;
diff --git a/src/utils/player.js b/src/utils/player.js
index 96f9372b..9aa6a141 100644
--- a/src/utils/player.js
+++ b/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);
     }
   },
diff --git a/src/utils/synchronizer.js b/src/utils/synchronizer.js
index 57ff18f8..aa2a5997 100644
--- a/src/utils/synchronizer.js
+++ b/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}`));
     });
   }
 }