Revert "Merge pull request #288 from Tainan404/add-support-for-layout-swap"

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 } from 'components/utils/hooks';
 import Screenshare from 'components/screenshare';
 import Thumbnails from 'components/thumbnails';
 import FullscreenButton from 'components/player/buttons/fullscreen';
@@ -26,8 +26,6 @@ const Content = ({
     index,
   } = useCurrentInterval(storage.tldraw);
 
-  const shouldShowScreenshare = useShouldShowScreenShare();
-
   if (layout.single) return null;
 
   const isTldrawWhiteboard = storage.tldraw.length ||
@@ -60,19 +58,7 @@ const Content = ({
       />
       <div className="top-content">
         {presentation}
-        {layout.screenshare ? (
-          // video-js doesn't mount properly when not mounted in time
-          <span style={!shouldShowScreenshare ?{
-            display: 'none',
-            width: '100%',
-            height: '100%'
-          } : {
-            width: '100%',
-            height: '100%',
-          }}>
-            <Screenshare />
-          </span>
-        ): null}
+        {layout.screenshare ? <Screenshare /> : null}
       </div>
       <div className={cx('bottom-content', { 'inactive': fullscreen })}>
         <Thumbnails

src/components/presentation/index.js

@@ -10,7 +10,6 @@ import Canvas from './canvas';
 import {
   useCurrentContent,
   useCurrentIndex,
-  useShouldShowScreenShare,
 } from 'components/utils/hooks';
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
@@ -61,11 +60,11 @@ const Presentation = () => {
   const viewBox = getViewBox(currentPanzoomIndex);
 
   const started = currentPanzoomIndex !== -1;
-  const shouldShowScreenshare = useShouldShowScreenShare();
+
   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 })}
       id={ID.PRESENTATION}
     >
       <div className={cx('presentation', { logo: !started })}>

src/components/thumbnails/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   defineMessages,
@@ -34,7 +34,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-  handleSearch: () => {},
+  handleSearch: () => { },
   interactive: false,
   search: [],
 };
@@ -44,6 +44,7 @@ const Thumbnails = ({
   interactive,
   search,
 }) => {
+  const currentIndex = useCurrentIndex(storage.thumbnails);
   const interaction = useRef(false);
   const firstNode = useRef();
   const currentNode = useRef();
@@ -76,52 +77,6 @@ const Thumbnails = ({
     }
   });
 
-  const items = useMemo(()=> {
-    const thumbnails = storage.thumbnails;
-    const layoutSwap = storage.layoutSwap ?? [];
-    const merged = [...thumbnails, ...layoutSwap];
-    const sorted = merged.sort((a, b) => a.timestamp - b.timestamp);
-
-    const addThumbsForSwap = sorted.map((item, index, arr) => {
-      const previousItem = arr[index - 1];
-      const nextItem = arr[index + 1];
-      if (item.hasOwnProperty('showScreenshare')) {
-        if (!item.showScreenshare) {
-          const previousThumbs = arr.slice(0, index)
-          const Thumbnail = previousThumbs.find((t) => t.src && t.src !== 'screenshare');
-          return {
-            ...item,
-            src: Thumbnail?.src ?? '',
-            alt: Thumbnail?.alt ?? '',
-          };
-        } else if (
-            item.showScreenshare 
-            && (nextItem && nextItem.src !== 'screenshare') 
-            && (previousItem && previousItem.src !== 'screenshare')
-          ) {
-          return {
-            ...item,
-            src: 'screenshare',
-            alt: 'screenshare',
-          }
-        }
-        return null;
-      }
-      return item;
-    }).filter((item) => item !== null);
-
-    const reworkIds = addThumbsForSwap.map((item, index) => {
-      return {
-        ...item,
-        id: index + 1,
-      }
-    });
-
-    return reworkIds;
-  }, [storage.thumbnails, storage.layoutSwap]);
-
-  const currentIndex = useCurrentIndex(items);
-
   return (
     <div
       aria-label={intl.formatMessage(intlMessages.aria)}
@@ -131,7 +86,7 @@ const Thumbnails = ({
       onMouseLeave={() => interaction.current = false}
       tabIndex="0"
     >
-      {items.reduce((result, item, index) => {
+      {storage.thumbnails.reduce((result, item, index) => {
         if (!isFiltered(index)) {
           const active = index === currentIndex;
 

src/components/tldraw/index.js

@@ -18,7 +18,6 @@ import {
   useCurrentContent,
   useCurrentIndex,
   useCurrentInterval,
-  useShouldShowScreenShare,
 } from 'components/utils/hooks';
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
@@ -118,7 +117,7 @@ const TldrawPresentation = ({ size }) => {
   const currentPanzoomIndex = useCurrentIndex(storage.panzooms);
   const currentSlideIndex = useCurrentIndex(storage.slides);
   const started = currentPanzoomIndex !== -1;
-  const shouldShowScreenShare = useShouldShowScreenShare();
+
   const result = SlideData(tldrawAPI);
 
   let { assets, shapes, scaleRatio } = result;
@@ -157,7 +156,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 })}
       id={ID.PRESENTATION}
     >
       {!started

src/components/tldraw_v2/index.js

@@ -11,7 +11,6 @@ import {
   useCurrentContent,
   useCurrentIndex,
   useCurrentInterval,
-  useShouldShowScreenShare,
 } from 'components/utils/hooks';
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
@@ -100,7 +99,6 @@ const TldrawPresentationV2 = ({ size }) => {
   const started = currentPanzoomIndex !== -1;
 
   const result = SlideData(tldrawAPI);
-  const shouldShowScreenshare = useShouldShowScreenShare();
 
   let { assets, shapes, scaleRatio } = result;
   const {
@@ -157,7 +155,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 })}
       id={ID.PRESENTATION}
     >{!started
       ? <div className={cx('presentation', 'logo')} />

src/components/utils/hooks/index.js

@@ -8,8 +8,7 @@ import {
   getCurrentDataIndex,
   getCurrentDataInterval,
 } from 'utils/data';
-import storage from 'utils/data/storage';
-import { isEqual, isShowScreenshareAsContent } from 'utils/data/validators';
+import { isEqual } from 'utils/data/validators';
 
 const useCurrentContent = () => {
   const [currentContent, setCurrentContent] = useState(ID.PRESENTATION);
@@ -29,24 +28,6 @@ const useCurrentContent = () => {
   return currentContent;
 };
 
-const useShouldShowScreenShare = () => {
-  const [shouldShowScreenShare, setShouldShowScreenShare] = useState(false);
-
-  useEffect(() => {
-    const handleTimeUpdate = (event) => {
-      const nextShouldShowScreenShare = isShowScreenshareAsContent(storage.layoutSwap, event.detail.time);
-      if (shouldShowScreenShare !== nextShouldShowScreenShare) setShouldShowScreenShare(nextShouldShowScreenShare);
-    };
-
-    document.addEventListener(EVENTS.TIME_UPDATE, handleTimeUpdate);
-    return () => {
-      document.removeEventListener(EVENTS.TIME_UPDATE, handleTimeUpdate);
-    };
-  }, [shouldShowScreenShare]);
-
-  return shouldShowScreenShare;
-}
-
 const useCurrentIndex = (data) => {
   const [currentIndex, setCurrentIndex] = useState(-1);
 
@@ -96,5 +77,4 @@ export {
   useCurrentContent,
   useCurrentIndex,
   useCurrentInterval,
-  useShouldShowScreenShare,
 };

src/config.js

@@ -27,7 +27,6 @@ const files = {
   shapes: 'shapes.svg',
   tldraw: 'tldraw.json',
   videos: 'external_videos.json',
-  layout: 'layout.xml',
 };
 
 const locale = { default: 'en' };

src/utils/builder.js

@@ -336,7 +336,7 @@ const buildShapes = result => {
     data.thumbnails = buildThumbnails(data.slides);
     data.canvases = buildCanvases(g, data.slides);
   }
-  data.slides = data.slides.filter(slide => !slide.src.includes(ID.DESKSHARE));
+
   return data;
 };
 
@@ -371,22 +371,6 @@ const buildTldraw = result => {
   return tldraw;
 }
 
-const buildLayout = result => {
-  const { recording } = result;
-
-  if (recording?.event) {
-    const newData = convertToArray(recording.event).map(layout => {
-      return {
-        timestamp: parseFloat(layout._timestamp),
-        showScreenshare: layout._show_screenshare === 'true',
-      }
-    });
-    return newData;
-  }
-
-  return [];
-};
-
 const buildPanzooms = result => {
   let data = [];
   const { recording } = result;
@@ -583,9 +567,6 @@ const build = (filename, value) => {
           case config.shapes:
             data = buildShapes(result);
             break;
-          case config.layout:
-            data = buildLayout(result);
-            break;
           default:
             logger.debug('unhandled', 'xml', filename);
             reject(filename);

src/utils/constants.js

@@ -52,7 +52,6 @@ const ID = {
   USERS: 'users',
   VIDEOS: 'videos',
   WEBCAMS: 'webcams',
-  LAYOUT: 'layout',
 };
 
 const CONTENT = [

src/utils/data/storage.js

@@ -165,7 +165,6 @@ const storage = {
       videos: hasProperty(DATA, ID.VIDEOS),
       presentation: hasProperty(DATA, ID.SHAPES),
       screenshare: hasProperty(DATA, ID.SCREENSHARE),
-      layoutSwap: hasProperty(DATA, ID.LAYOUT),
     };
   },
   get content() {
@@ -177,7 +176,6 @@ const storage = {
       videos: !isEmpty(this.videos),
       presentation: hasPresentation(this.slides),
       screenshare: !isEmpty(this.screenshare),
-      layoutSwap: !isEmpty(this.layoutSwap),
     };
   },
   get alternates() {
@@ -240,9 +238,6 @@ const storage = {
 
     return DATA[ID.THUMBNAILS];
   },
-  get layoutSwap() {
-    return DATA[ID.LAYOUT];
-  },
   get tldraw() {
     return DATA[ID.TLDRAW];
   },

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,24 +159,6 @@ const isVisible = (time, timestamp) => timestamp <= time;
 
 const wasCleared = (time, clear) => clear !== -1 && clear <= time;
 
-function getMostRecentEvent(arr, time) {
-  return arr
-    .filter(item => item.timestamp <= time)
-    .reduce(
-      (prev, curr) => (prev?.timestamp > curr.timestamp ? prev : curr),
-      null
-    );
-}
-
-const isShowScreenshareAsContent = (data, time) => {
-  if (isEmpty(data)) return true;
-
-  const event = getMostRecentEvent(data, time);
-
-  if (!event) return false;
-  return event.showScreenshare;
-}
-
 export {
   hasIndex,
   hasPresentation,
@@ -191,5 +173,4 @@ export {
   isValid,
   isVisible,
   wasCleared,
-  isShowScreenshareAsContent,
 };