From 11aa9a6503d1f5110e270267e6c6a424224302c2 Mon Sep 17 00:00:00 2001 From: amar-1995 Date: Wed, 4 Oct 2023 12:02:24 +0530 Subject: [PATCH 1/3] feat: pdf sharing ui in prebuilt --- packages/react-sdk/src/utils/commons.ts | 4 +- .../components/AppData/useUISettings.js | 14 +- .../components/pdfAnnotator/submitPdf.jsx | 2 +- .../src/Prebuilt/layouts/EmbedView.jsx | 168 +++++++++++------- .../src/Prebuilt/layouts/PDFView.jsx | 148 +++++---------- .../layouts/VideoStreamingSection.tsx | 6 +- 6 files changed, 176 insertions(+), 166 deletions(-) diff --git a/packages/react-sdk/src/utils/commons.ts b/packages/react-sdk/src/utils/commons.ts index 409148ac72..e966e5be54 100644 --- a/packages/react-sdk/src/utils/commons.ts +++ b/packages/react-sdk/src/utils/commons.ts @@ -25,10 +25,10 @@ export default function usePrevious(state: T): T | undefined { return ref.current; } -const chromiumBasedBrowsers = ['chrome', 'brave', 'opera', 'edge']; +const chromiumBasedBrowsers = ['blink']; export const isChromiumBased = chromiumBasedBrowsers.some( - (value: string) => parsedUserAgent.getBrowser()?.name?.toLowerCase() === value, + (value: string) => parsedUserAgent.getEngine()?.name?.toLowerCase() === value, ); export const pdfIframeURL = 'https://pdf-annotation.100ms.live/generic/web/viewer.html'; diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js b/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js index d468faeb4a..c9fff985b9 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/useUISettings.js @@ -69,8 +69,18 @@ export const useUrlToEmbed = () => { return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url; }; -export const usePDFAnnotator = () => { - return useHMSStore(selectAppData(APP_DATA.pdfConfig))?.state; +export const usePDFConfig = () => { + return useHMSStore(selectAppData(APP_DATA.pdfConfig)); +}; + +export const useResetPDFConfig = () => { + const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig); + return useCallback(() => setPDFConfig(), [setPDFConfig]); +}; + +export const useResetEmbedConfig = () => { + const [, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig); + return () => setEmbedConfig(); }; export const usePinnedTrack = () => { const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId)); diff --git a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx index 47f496fd8d..0508e72096 100644 --- a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx @@ -31,7 +31,7 @@ export const SubmitPDF = ({ pdfFile, onOpenChange }) => { type="submit" onClick={() => { if (pdfFile) { - setPDFConfig({ state: true, file: pdfFile }); + setPDFConfig(pdfFile); onOpenChange(false); } }} diff --git a/packages/roomkit-react/src/Prebuilt/layouts/EmbedView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/EmbedView.jsx index 922fdeac9d..fb0721493b 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/EmbedView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/EmbedView.jsx @@ -1,26 +1,21 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { - selectPeers, - selectPeerScreenSharing, - throwErrorHandler, - useHMSStore, - useScreenShare, -} from '@100mslive/react-sdk'; +import React, { useEffect, useMemo } from 'react'; +import { selectAppData, selectPeers, selectPeerScreenSharing, useEmbedShare, useHMSStore } from '@100mslive/react-sdk'; import { SecondaryTiles } from '../components/SecondaryTiles'; +import { ToastManager } from '../components/Toast/ToastManager'; import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout'; import { Box } from '../../Layout'; -import { useSetAppDataByKey } from '../components/AppData/useUISettings'; +import { useResetEmbedConfig, useSetAppDataByKey } from '../components/AppData/useUISettings'; import { APP_DATA } from '../common/constants'; export const EmbedView = () => { return ( - + - + ); }; -export const EmbebScreenShareView = ({ children }) => { +export const EmbedScreenShareView = ({ children }) => { const peers = useHMSStore(selectPeers); const peerPresenting = useHMSStore(selectPeerScreenSharing); @@ -44,64 +39,117 @@ export const EmbebScreenShareView = ({ children }) => { ); }; - +/** + * EmbedView is responsible for rendering the iframe and managing the screen sharing functionality. + */ const EmbedComponent = () => { - const { amIScreenSharing, toggleScreenShare } = useScreenShare(throwErrorHandler); - const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig); - const [wasScreenShared, setWasScreenShared] = useState(false); - // to handle - https://github.com/facebook/react/issues/24502 - const screenShareAttemptInProgress = useRef(false); - const src = embedConfig.url; - const iframeRef = useRef(); - - const resetEmbedConfig = useCallback(() => { - if (src) { - setEmbedConfig({ url: '' }); - } - }, [src, setEmbedConfig]); + const embedConfig = useHMSStore(selectAppData(APP_DATA.embedConfig)); + const resetConfig = useResetEmbedConfig(); - useEffect(() => { - if (embedConfig.shareScreen && !amIScreenSharing && !wasScreenShared && !screenShareAttemptInProgress.current) { - screenShareAttemptInProgress.current = true; - // start screenshare on load for others in the room to see - toggleScreenShare({ - forceCurrentTab: true, - cropElement: iframeRef.current, - }) - .then(() => { - setWasScreenShared(true); - }) - .catch(resetEmbedConfig) - .finally(() => { - screenShareAttemptInProgress.current = false; - }); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + // need to send resetConfig to clear configuration, if stop screenshare occurs. + const { iframeRef, startEmbedShare, isEmbedShareInProgress } = useEmbedShare(resetConfig); useEffect(() => { - // reset embed when screenshare is closed from anywhere - if (wasScreenShared && !amIScreenSharing) { - resetEmbedConfig(); - } - return () => { - // close screenshare when this component is being unmounted - if (wasScreenShared && amIScreenSharing) { - resetEmbedConfig(); - toggleScreenShare(); // stop + (async () => { + if (embedConfig && !isEmbedShareInProgress) { + try { + await startEmbedShare(embedConfig); + } catch (err) { + resetConfig(); + ToastManager.addToast({ + title: `Error while sharing embed url ${err.message || ''}`, + variant: 'error', + }); + } } - }; - }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]); + })(); + }, [isEmbedShareInProgress, embedConfig, startEmbedShare, resetConfig]); return ( - +