feat(layout): hide presentation according to layout.xml new events

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

src/components/bars/top/index.js

@@ -13,20 +13,22 @@ 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 = ({
   openModal,
   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;
 };
 

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;

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

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;

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 })}>

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);
 

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

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')} />

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,
 };

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;