@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx

@@ -0,0 +1,89 @@
+import React, { useCallback } from 'react';
+import { Button, Flex } from '../../../';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { APP_DATA } from '../../common/constants';
+
+export const SubmitPDF = ({
+  pdfFile,
+  pdfURL,
+  isValidateProgress,
+  setIsPDFUrlValid,
+  setIsValidateProgress,
+  onOpenChange,
+}) => {
+  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
+
+  const isValidPDF = useCallback(
+    pdfURL => {
+      const extension = pdfURL.split('.').pop().toLowerCase();
+      setIsValidateProgress(true);
+      if (extension === 'pdf') {
+        setIsPDFUrlValid(true);
+        setIsValidateProgress(false);
+        setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
+        onOpenChange(false);
+      }
+
+      fetch(pdfURL, { method: 'HEAD' })
+        .then(response => response.headers.get('content-type'))
+        .then(contentType => {
+          if (contentType === 'application/pdf') {
+            setIsPDFUrlValid(true);
+            setIsValidateProgress(false);
+            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
+            onOpenChange(false);
+          } else {
+            setIsPDFUrlValid(false);
+            setIsValidateProgress(false);
+          }
+        })
+        .catch(() => {
+          setIsPDFUrlValid(false);
+          setIsValidateProgress(false);
+        });
+    },
+    [onOpenChange, pdfFile, setIsPDFUrlValid, setIsValidateProgress, setPDFConfig],
+  );
+  return (
+    <Flex
+      direction="row"
+      css={{
+        mb: '0',
+        mt: 'auto',
+        gap: '$8',
+      }}
+    >
+      <Button
+        variant="standard"
+        outlined
+        type="submit"
+        onClick={() => {
+          onOpenChange(false);
+        }}
+        css={{ w: '50%' }}
+      >
+        Cancel
+      </Button>
+      <Button
+        variant="primary"
+        type="submit"
+        onClick={() => {
+          if (pdfFile) {
+            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
+            onOpenChange(false);
+          } else if (pdfURL) {
+            isValidPDF(pdfURL);
+          }
+        }}
+        disabled={!pdfFile && !pdfURL}
+        loading={isValidateProgress}
+        data-testid="share_pdf_btn"
+        css={{
+          w: '50%',
+        }}
+      >
+        Start Sharing
+      </Button>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { TrashIcon } from '@100mslive/react-icons';
+import { Dialog, Flex, Text } from '../../../';
+import { DialogRow } from '../../primitives/DialogContent';
+import { PDFHeader } from './pdfHeader';
+import { PDFInfo } from './pdfInfo';
+import { SubmitPDF } from './submitPdf';
+
+export const UploadedFile = ({
+  pdfFile,
+  pdfURL,
+  isValidateProgress,
+  setPDFFile,
+  setIsPDFUrlValid,
+  setIsValidateProgress,
+  onOpenChange,
+}) => {
+  const [fileName, ext] = pdfFile.name.split('.');
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content
+          css={{
+            w: 'min(420px,80%)',
+            overflow: 'auto',
+            p: '$10',
+          }}
+        >
+          <Flex direction="column">
+            <PDFHeader />
+            <DialogRow
+              css={{
+                fontFamily: '$sans',
+                bg: '$surfaceLight',
+                r: '$1',
+                outline: 'none',
+                border: '1px solid $borderLight',
+                p: '$4 $6',
+                minHeight: '$11',
+                c: '$textPrimary',
+                fs: '$md',
+                w: '100%',
+                '&:focus': {
+                  boxShadow: '0 0 0 1px $colors$borderAccent',
+                  border: '1px solid $transparent',
+                },
+                mb: 0,
+                mt: '$6',
+              }}
+            >
+              <Flex direction="row" css={{ flexGrow: '1', maxWidth: '88%' }}>
+                <Text
+                  css={{
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {fileName}
+                </Text>
+                <Text css={{ whiteSpace: 'nowrap' }}>.{ext}</Text>
+              </Flex>
+              <TrashIcon
+                onClick={() => setPDFFile(null)}
+                style={{
+                  cursor: 'pointer',
+                }}
+              />
+            </DialogRow>
+            <PDFInfo />
+            <SubmitPDF
+              pdfFile={pdfFile}
+              pdfURL={pdfURL}
+              isValidateProgress={isValidateProgress}
+              setIsPDFUrlValid={setIsPDFUrlValid}
+              setIsValidateProgress={setIsValidateProgress}
+              onOpenChange={onOpenChange}
+            />
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/peerTileUtils.jsx

@@ -0,0 +1,27 @@
+const PEER_NAME_PLACEHOLDER = 'peerName';
+const labelMap = new Map([
+  [[true, 'screen'].toString(), 'Your Screen'],
+  [[true, 'regular'].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
+  [[false, 'screen'].toString(), `${PEER_NAME_PLACEHOLDER}'s Screen`],
+  [[false, 'regular'].toString(), PEER_NAME_PLACEHOLDER],
+  [[true, undefined].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
+  [[false, undefined].toString(), `${PEER_NAME_PLACEHOLDER}`],
+]);
+
+export const getVideoTileLabel = ({ peerName, isLocal, track }) => {
+  const isPeerPresent = peerName !== undefined;
+  if (!isPeerPresent || !track) {
+    // for peers with only audio track
+    return isPeerPresent ? labelMap.get([isLocal, undefined].toString()).replace(PEER_NAME_PLACEHOLDER, peerName) : '';
+  }
+  const isLocallyMuted = track.volume === 0;
+  // Map [isLocal, videoSource] to the label to be displayed.
+  let label = labelMap.get([isLocal, track.source].toString());
+  if (label) {
+    label = label.replace(PEER_NAME_PLACEHOLDER, peerName);
+  } else {
+    label = `${peerName} ${track.source}`;
+  }
+  label = `${label}${track.degraded ? '(Degraded)' : ''}`;
+  return `${label}${isLocallyMuted ? ' (Muted for you)' : ''}`;
+};

package/src/Prebuilt/hms.js

@@ -0,0 +1,7 @@
+import { HMSReactiveStore } from '@100mslive/react-sdk';
+
+const hms = new HMSReactiveStore();
+export const hmsStore = hms.getStore();
+export const hmsActions = hms.getActions();
+export const hmsNotifications = hms.getNotifications();
+export const hmsStats = hms.getStats();

package/src/Prebuilt/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export declare const HMSPrebuilt: React.FC<{
+  roomCode: string;
+  logo?: {
+    url: string;
+  };
+  options?: {
+    endPoints?: {
+      tokenByRoomIdRole?: string;
+      tokenByRoomCode?: string;
+      init?: string;
+    };
+  };
+}>;

package/src/Prebuilt/index.js

@@ -0,0 +1,2 @@
+import { HMSPrebuilt } from './App.jsx';
+export { HMSPrebuilt };

package/src/Prebuilt/layouts/ActiveSpeakerView.jsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import { selectDominantSpeaker, selectPeers, useHMSStore } from '@100mslive/react-sdk';
+import { GridSidePaneView } from '../components/gridView';
+import VideoTile from '../components/VideoTile';
+import { Box, Flex } from '../../Layout';
+
+const ActiveSpeakerView = () => {
+  const dominantSpeaker = useHMSStore(selectDominantSpeaker);
+  const latestDominantSpeakerRef = useRef(dominantSpeaker);
+  const peers = (useHMSStore(selectPeers) || []).filter(
+    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,
+  );
+  // if there is no current dominant speaker latest keeps pointing to last
+  if (dominantSpeaker) {
+    latestDominantSpeakerRef.current = dominantSpeaker;
+  }
+  if (peers.length === 0) {
+    return null;
+  }
+  // show local peer if there hasn't been any dominant speaker
+  const activeSpeaker = latestDominantSpeakerRef.current || peers[0];
+  const showSidePane = activeSpeaker && peers.length > 1;
+
+  return (
+    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>
+      <Box css={{ flex: '1 1 0 ' }}>
+        <VideoTile peerId={activeSpeaker.id} width="100%" height="100%" />
+      </Box>
+      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== activeSpeaker.id)} />}
+    </Flex>
+  );
+};
+
+export default ActiveSpeakerView;

package/src/Prebuilt/layouts/EmbedView.jsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import {
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectPeers,
+  selectPeerScreenSharing,
+  throwErrorHandler,
+  useHMSStore,
+  useScreenShare,
+} from '@100mslive/react-sdk';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+import { SidePane } from './screenShareView';
+import { useSetAppDataByKey } from '../components/AppData/useUISettings';
+import { APP_DATA } from '../common/constants';
+
+export const EmbedView = () => {
+  return (
+    <EmbebScreenShareView>
+      <EmbedComponent />
+    </EmbebScreenShareView>
+  );
+};
+
+export const EmbebScreenShareView = ({ children }) => {
+  const peers = useHMSStore(selectPeers);
+
+  const mediaQueryLg = cssConfig.media.xl;
+  const showSidebarInBottom = useMedia(mediaQueryLg);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const peerPresenting = useHMSStore(selectPeerScreenSharing);
+  const isPresenterFromMyRole = peerPresenting?.roleName?.toLowerCase() === localPeerRole?.toLowerCase();
+  const amIPresenting = localPeerID === peerPresenting?.id;
+  const showPresenterInSmallTile = showSidebarInBottom || amIPresenting || isPresenterFromMyRole;
+
+  const smallTilePeers = useMemo(() => {
+    const smallTilePeers = peers.filter(peer => peer.id !== peerPresenting?.id);
+    if (showPresenterInSmallTile && peerPresenting) {
+      smallTilePeers.unshift(peerPresenting); // put presenter on first page
+    }
+    return smallTilePeers;
+  }, [peers, peerPresenting, showPresenterInSmallTile]);
+  return (
+    <Flex css={{ size: '100%' }} direction={showSidebarInBottom ? 'column' : 'row'}>
+      {children}
+      <Flex
+        direction={{ '@initial': 'column', '@lg': 'row' }}
+        css={{
+          overflow: 'hidden',
+          p: '$4 $8',
+          flex: '0 0 20%',
+          '@xl': {
+            flex: '1 1 0',
+          },
+        }}
+      >
+        <SidePane
+          showSidebarInBottom={showSidebarInBottom}
+          peerScreenSharing={peerPresenting}
+          isPresenterInSmallTiles={showPresenterInSmallTile}
+          smallTilePeers={smallTilePeers}
+          totalPeers={peers.length}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+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]);
+
+  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
+  }, []);
+
+  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
+      }
+    };
+  }, [wasScreenShared, amIScreenSharing, resetEmbedConfig, toggleScreenShare]);
+
+  return (
+    <Box
+      ref={iframeRef}
+      css={{
+        mx: '$8',
+        flex: '3 1 0',
+        '@lg': {
+          flex: '2 1 0',
+          display: 'flex',
+          alignItems: 'center',
+        },
+      }}
+    >
+      <iframe
+        src={src}
+        title={src}
+        style={{ width: '100%', height: '100%', border: 0 }}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture fullscreen"
+        referrerPolicy="no-referrer"
+      />
+    </Box>
+  );
+};