diff --git a/src/components/player/content/index.js b/src/components/player/content/index.js index 6502f312..58aa5596 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 } 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 = ({ />
{presentation} - {layout.screenshare ? ( - // video-js doesn't mount properly when not mounted in time - - - - ): null} + {layout.screenshare ? : null}
{ const viewBox = getViewBox(currentPanzoomIndex); const started = currentPanzoomIndex !== -1; - const shouldShowScreenshare = useShouldShowScreenShare(); + return (
diff --git a/src/components/thumbnails/index.js b/src/components/thumbnails/index.js index a121952c..fb750f4f 100644 --- a/src/components/thumbnails/index.js +++ b/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 (
interaction.current = false} tabIndex="0" > - {items.reduce((result, item, index) => { + {storage.thumbnails.reduce((result, item, index) => { if (!isFiltered(index)) { const active = index === currentIndex; diff --git a/src/components/tldraw/index.js b/src/components/tldraw/index.js index 42191818..80ef697d 100644 --- a/src/components/tldraw/index.js +++ b/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 (
{!started diff --git a/src/components/tldraw_v2/index.js b/src/components/tldraw_v2/index.js index bb183523..ed51fce0 100644 --- a/src/components/tldraw_v2/index.js +++ b/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 (
{!started ?
diff --git a/src/components/utils/hooks/index.js b/src/components/utils/hooks/index.js index bc7881c2..a68b3068 100644 --- a/src/components/utils/hooks/index.js +++ b/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, }; diff --git a/src/config.js b/src/config.js index 4dcf2581..83383b6d 100644 --- a/src/config.js +++ b/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' }; diff --git a/src/utils/builder.js b/src/utils/builder.js index 0a39f37e..579f176b 100644 --- a/src/utils/builder.js +++ b/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); diff --git a/src/utils/constants.js b/src/utils/constants.js index 6f9606c4..e87cbb32 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -52,7 +52,6 @@ const ID = { USERS: 'users', VIDEOS: 'videos', WEBCAMS: 'webcams', - LAYOUT: 'layout', }; const CONTENT = [ diff --git a/src/utils/data/storage.js b/src/utils/data/storage.js index d8022d5a..15151f2c 100644 --- a/src/utils/data/storage.js +++ b/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]; }, diff --git a/src/utils/data/validators.js b/src/utils/data/validators.js index a7d2b466..79a5522e 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,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, };