@100mslive/roomkit-react
Version:

68 lines (65 loc) • 1.99 kB
JSX
import React, { useEffect } from 'react';
import { usePDFShare } from '@100mslive/react-sdk';
import { ToastManager } from '../components/Toast/ToastManager';
import { Box } from '../../Layout';
import { EmbedScreenShareView } from './EmbedView';
import { usePDFConfig, useResetPDFConfig } from '../components/AppData/useUISettings';
/**
* PDFView is responsible for rendering the PDF iframe and managing the screen sharing functionality.
*/
export const PDFView = () => {
const pdfConfig = usePDFConfig();
const resetConfig = useResetPDFConfig();
// need to send resetConfig to clear configuration, if stop screenshare occurs.
const { iframeRef, startPDFShare, isPDFShareInProgress } = usePDFShare(resetConfig);
useEffect(() => {
// no working in other useEffect, as return is called multiple time on state change
return () => {
resetConfig();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
(async () => {
try {
if (!isPDFShareInProgress && pdfConfig) {
await startPDFShare(pdfConfig);
}
} catch (err) {
resetConfig();
ToastManager.addToast({
title: `Error while sharing annotator ${err.message || ''}`,
variant: 'error',
});
}
})();
}, [isPDFShareInProgress, pdfConfig, resetConfig, startPDFShare]);
return (
<EmbedScreenShareView>
<Box
css={{
mx: '$8',
flex: '3 1 0',
'@lg': {
flex: '2 1 0',
display: 'flex',
alignItems: 'center',
},
}}
>
<iframe
title="Embed View"
ref={iframeRef}
style={{
width: '100%',
height: '100%',
border: 0,
borderRadius: '0.75rem',
}}
allow="autoplay; clipboard-write;"
referrerPolicy="no-referrer"
/>
</Box>
</EmbedScreenShareView>
);
};