@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/hooks/useSetPinnedMessage.js

@@ -0,0 +1,38 @@
+// @ts-check
+import { useCallback } from 'react';
+import {
+  selectPeerNameByID,
+  selectSessionMetadata,
+  useHMSActions,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { ToastManager } from '../Toast/ToastManager';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+/**
+ * set pinned chat message by updating the session store
+ */
+export const useSetPinnedMessage = () => {
+  const hmsActions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
+  const pinnedMessage = useHMSStore(selectSessionMetadata);
+
+  const setPinnedMessage = useCallback(
+    /**
+     * @param {import("@100mslive/react-sdk").HMSMessage | undefined} message
+     */
+    async message => {
+      const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
+      const newPinnedMessage = message ? (peerName ? `${peerName}: ${message.message}` : message.message) : null;
+      if (newPinnedMessage !== pinnedMessage) {
+        await hmsActions.sessionStore
+          .set(SESSION_STORE_KEY.PINNED_MESSAGE, newPinnedMessage)
+          .catch(err => ToastManager.addToast({ title: err.description }));
+      }
+    },
+    [hmsActions, vanillaStore, pinnedMessage],
+  );
+
+  return { setPinnedMessage };
+};

package/src/Prebuilt/components/hooks/useSkipPreview.jsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useSearchParam } from 'react-use';
+import { useSetUiSettings } from '../AppData/useUISettings';
+import { QUERY_PARAM_SKIP_PREVIEW, QUERY_PARAM_SKIP_PREVIEW_HEADFUL, UI_SETTINGS } from '../../common/constants';
+
+export const useSkipPreview = () => {
+  // way to skip preview for automated tests, beam recording and streaming
+  const beamInToken = useSearchParam('token') === 'beam_recording'; // old format to remove
+  // use this field to join directly for quick testing while in local
+  const directJoinHeadfulFromEnv = process.env.REACT_APP_HEADLESS_JOIN === 'true';
+  const directJoinHeadful = useSearchParam(QUERY_PARAM_SKIP_PREVIEW_HEADFUL) === 'true' || directJoinHeadfulFromEnv;
+  let skipPreview = useSearchParam(QUERY_PARAM_SKIP_PREVIEW) === 'true';
+  skipPreview = skipPreview || beamInToken || directJoinHeadful;
+  const [, setIsHeadless] = useSetUiSettings(UI_SETTINGS.isHeadless);
+  useEffect(() => {
+    !directJoinHeadful && setIsHeadless(skipPreview);
+  }, [directJoinHeadful, skipPreview]); //eslint-disable-line
+
+  return skipPreview;
+};

package/src/Prebuilt/components/hooks/useUserPreferences.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { useLocalStorage } from 'react-use';
+
+export const UserPreferencesKeys = {
+  PREVIEW: 'preview',
+  NOTIFICATIONS: 'notifications',
+  UI_SETTINGS: 'uiSettings',
+  RTMP_URLS: 'rtmpUrls',
+};
+
+export const defaultPreviewPreference = {
+  name: '',
+  isAudioMuted: false,
+  isVideoMuted: false,
+};
+
+export const useUserPreferences = (key, defaultPreference) => {
+  const [localStorageValue, setStorageValue] = useLocalStorage(key, defaultPreference);
+  const [preference, setPreference] = useState(localStorageValue || defaultPreference);
+  const changePreference = value => {
+    setPreference(value);
+    setStorageValue(value);
+  };
+  return [preference, changePreference];
+};

package/src/Prebuilt/components/init/Init.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import {
+  selectLocalPeerID,
+  selectLocalPeerName,
+  selectLocalPeerRoleName,
+  selectSessionId,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { useTheme } from '../../../';
+import { setUpZipy } from './initUtils';
+import { FeatureFlagsInit } from '../../services/FeatureFlags';
+
+const Init = () => {
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const localPeerName = useHMSStore(selectLocalPeerName);
+  const sessionId = useHMSStore(selectSessionId);
+  const { toggleTheme } = useTheme();
+
+  useEffect(() => {
+    window.toggleUiTheme = toggleTheme;
+  }, [toggleTheme]);
+
+  useEffect(() => {
+    function resetHeight() {
+      // reset the body height to that of the inner browser
+      // The window.innerHeight property returns integer values. When the actual height is in decimal, window.innerHeight returns a larger value than the actual value. This can cause a scrollbar to appear on some screens.
+      // Hence using window.visualViewport.height which returns a decimal value.
+      document.body.style.height = `${window.visualViewport?.height || window.innerHeight}px`;
+    }
+    // reset the height whenever the window's resized
+    window.addEventListener('resize', resetHeight);
+    // called to initially set the height.
+    resetHeight();
+    return () => {
+      window.removeEventListener('resize', resetHeight);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (localPeerID && localPeerRole && localPeerName) {
+      const peerData = {
+        localPeer: {
+          id: localPeerID,
+          name: localPeerName,
+          roleName: localPeerRole,
+        },
+        sessionId,
+      };
+      setUpZipy(peerData);
+    }
+    // eslint-disable-next-line
+  }, [localPeerID, localPeerName, localPeerRole, sessionId]);
+
+  return <FeatureFlagsInit />;
+};
+
+export { Init };

package/src/Prebuilt/components/init/initUtils.js

@@ -0,0 +1,90 @@
+import { identify } from 'zipyai';
+
+const zipyKey = process.env.REACT_APP_ZIPY_KEY;
+export const setUpZipy = ({ localPeer, roomId, sessionId }) => {
+  if (!zipyKey) {
+    return;
+  }
+
+  let domain;
+  if (typeof window !== 'undefined') {
+    domain = window.location.hostname;
+  }
+
+  identify(localPeer.id, {
+    firstName: localPeer.name,
+    customerName: domain,
+    email: domain,
+    role: localPeer.roleName,
+    sessionId,
+    roomId,
+  });
+};
+
+// interface RoleConfig {
+//   center?: HMSRoleName[];
+//   sidepane?: HMSRoleName[];
+//   selfRoleChangeTo?: HMSRoleName[];
+//   remoteRoleChangeFor?: HMSRoleName[];
+// }
+
+// interface PolicyConfig {
+//   [role: string]: RoleConfig;
+// }
+
+/**
+ * check if a role is allowed to publish either of audio or video
+ */
+function canPublishAV(role) {
+  const params = role?.publishParams;
+  if (params?.allowed) {
+    return params.allowed.includes('video') || params.allowed.includes('audio');
+  }
+  return false;
+}
+
+/**
+ * Figure out the layout for each role. There is some extra work being done
+ * here currently to figure out the layout for roles other than local peer too
+ * which can be avoided.
+ */
+export const normalizeAppPolicyConfig = (roleNames, rolesMap, appPolicyConfig = {}) => {
+  const newConfig = Object.assign({}, appPolicyConfig);
+  // eslint-disable-next-line complexity
+  roleNames.forEach(roleName => {
+    if (!newConfig[roleName]) {
+      newConfig[roleName] = {};
+    }
+    const subscribedRoles = rolesMap[roleName].subscribeParams?.subscribeToRoles || [];
+
+    const isNotSubscribingOrSubscribingToSelf =
+      subscribedRoles.length === 0 || (subscribedRoles.length === 1 && subscribedRoles[0] === roleName);
+    if (!newConfig[roleName].center) {
+      const publishingRoleNames = roleNames.filter(
+        roleName => canPublishAV(rolesMap[roleName]) && subscribedRoles.includes(roleName),
+      );
+      if (isNotSubscribingOrSubscribingToSelf) {
+        newConfig[roleName].center = [roleName];
+      } else {
+        // all other publishing roles apart from local role in center by default
+        newConfig[roleName].center = publishingRoleNames.filter(rName => rName !== roleName);
+      }
+    }
+    // everyone from my role is in sidepane by default if they can publish
+    if (!newConfig[roleName].sidepane) {
+      if (isNotSubscribingOrSubscribingToSelf) {
+        newConfig[roleName].sidepane = [];
+      } else {
+        newConfig[roleName].sidepane = canPublishAV(rolesMap[roleName]) ? [roleName] : [];
+      }
+    }
+    if (!newConfig[roleName].selfRoleChangeTo) {
+      newConfig[roleName].selfRoleChangeTo = roleNames;
+    }
+    if (!newConfig[roleName].remoteRoleChangeFor) {
+      newConfig[roleName].remoteRoleChangeFor = roleNames;
+    }
+  });
+
+  return newConfig;
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InfoIcon } from '@100mslive/react-icons';
+import { Text } from '../../../';
+import { DialogRow } from '../../primitives/DialogContent';
+
+export const PdfErrorView = ({ isPDFUrlValid }) => {
+  return (
+    !isPDFUrlValid && (
+      <DialogRow
+        css={{
+          mt: '-$8',
+          color: '$error',
+          justifyContent: 'start',
+        }}
+      >
+        <InfoIcon width="12px" height="12px" />
+        <Text
+          variant="caption"
+          css={{
+            pl: '$1',
+            color: '$error',
+          }}
+        >
+          Please enter a valid PDF URL
+        </Text>
+      </DialogRow>
+    )
+  );
+};

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

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Dialog, Flex, HorizontalDivider, Input, Text } from '../../../';
+import { DialogInputFile, DialogRow } from '../../primitives/DialogContent';
+import { PdfErrorView } from './pdfErrorView';
+import { PDFHeader } from './pdfHeader';
+import { PDFInfo } from './pdfInfo';
+import { SubmitPDF } from './submitPdf';
+import { UploadedFile } from './uploadedFile';
+
+export function PDFFileOptions({ onOpenChange }) {
+  const [isPDFUrlValid, setIsPDFUrlValid] = useState(true);
+  const [isValidateProgress, setIsValidateProgress] = useState(false);
+  const [pdfFile, setPDFFile] = useState(null);
+  const [pdfURL, setPDFURL] = useState('');
+
+  return !pdfFile ? (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content
+          css={{
+            w: 'min(420px,80%)',
+            overflow: 'auto',
+            p: '$10',
+          }}
+        >
+          <Flex direction="column">
+            <PDFHeader />
+            <DialogInputFile
+              onChange={target => {
+                setPDFFile(target.files[0]);
+              }}
+              placeholder="Click to upload"
+              type="file"
+              accept=".pdf"
+            />
+            <DialogRow
+              css={{
+                m: '$10 0',
+              }}
+            >
+              <HorizontalDivider
+                css={{
+                  mr: '$4',
+                }}
+              />
+              <Text
+                variant="tiny"
+                css={{
+                  color: '$textDisabled',
+                }}
+              >
+                OR
+              </Text>
+              <HorizontalDivider
+                css={{
+                  ml: '$4',
+                }}
+              />
+            </DialogRow>
+            <Text
+              variant="sm"
+              css={{
+                py: '$2',
+              }}
+            >
+              Import from URL
+            </Text>
+            <Input
+              css={{ w: '100%', mb: '$10' }}
+              value={pdfURL}
+              onFocus={() => {
+                setIsPDFUrlValid(true);
+                setIsValidateProgress(false);
+              }}
+              onChange={e => {
+                setPDFURL(e.target.value);
+              }}
+              placeholder="Add PDF URL"
+              type="text"
+              error={!isPDFUrlValid}
+            />
+            {!isPDFUrlValid && <PdfErrorView isPDFUrlValid={isPDFUrlValid} />}
+            <PDFInfo />
+            <SubmitPDF
+              pdfFile={pdfFile}
+              pdfURL={pdfURL}
+              isValidateProgress={isValidateProgress}
+              setIsPDFUrlValid={setIsPDFUrlValid}
+              setIsValidateProgress={setIsValidateProgress}
+              onOpenChange={onOpenChange}
+            />
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  ) : (
+    <UploadedFile
+      pdfFile={pdfFile}
+      pdfURL={pdfURL}
+      isValidateProgress={isValidateProgress}
+      setPDFFile={setPDFFile}
+      setIsPDFUrlValid={setIsPDFUrlValid}
+      setIsValidateProgress={setIsValidateProgress}
+      onOpenChange={onOpenChange}
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Dialog, Text } from '../../../';
+import { DialogCol } from '../../primitives/DialogContent';
+
+export const PDFHeader = () => {
+  return (
+    <DialogCol
+      align="start"
+      css={{
+        mt: 0,
+        mb: '$6',
+      }}
+    >
+      <Dialog.Title asChild>
+        <Text as="h6" variant="h6">
+          Share PDF
+        </Text>
+      </Dialog.Title>
+      <Dialog.Description asChild>
+        <Text
+          variant="sm"
+          css={{
+            c: '$textMedEmp',
+          }}
+        >
+          Choose PDF you want to annotate and share
+        </Text>
+      </Dialog.Description>
+    </DialogCol>
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InfoIcon } from '@100mslive/react-icons';
+import { Text } from '../../../';
+import { DialogRow } from '../../primitives/DialogContent';
+
+export const PDFInfo = () => {
+  return (
+    <DialogRow
+      css={{
+        px: '$8',
+        py: '$3',
+        bg: '$surfaceLight',
+        r: '$1',
+        outline: 'none',
+        border: '1px solid $borderLight',
+        minHeight: '$11',
+      }}
+    >
+      <InfoIcon
+        width="64px"
+        height="64px"
+        style={{
+          paddingRight: '16px',
+        }}
+      />
+      <Text variant="caption">
+        On the next screen, ensure you select “This Tab” and click on share. Only the PDF viewer will be seen by other
+        participants
+      </Text>
+    </DialogRow>
+  );
+};

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

@@ -0,0 +1,233 @@
+import React, { Fragment, useState } from 'react';
+import { useScreenShare } from '@100mslive/react-sdk';
+import { PdfShare, ScreenShare, StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { Box, Button, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
+import { ShareMenuIcon } from '../ShareMenuIcon';
+import { PDFFileOptions } from './pdfFileOptions';
+
+const MODALS = {
+  SHARE: 'share',
+  SCREEN_SHARE: 'screenShare',
+  PDF_SHARE: 'pdfShare',
+};
+
+export function ShareScreenOptions() {
+  const [openModals, setOpenModals] = useState(new Set());
+  const { amIScreenSharing } = useScreenShare();
+  const updateState = (modalName, value) => {
+    setOpenModals(modals => {
+      const copy = new Set(modals);
+      if (value) {
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+  const { toggleScreenShare } = useScreenShare();
+  return (
+    <Fragment>
+      <Dropdown.Root open={openModals.has(MODALS.SHARE)} onOpenChange={value => updateState(MODALS.SHARE, value)}>
+        <Dropdown.Trigger asChild data-testid="sharing_btn" disabled={amIScreenSharing}>
+          <ShareMenuIcon disabled={amIScreenSharing}>
+            <Tooltip title="Share">
+              <Box>
+                <VerticalMenuIcon />
+              </Box>
+            </Tooltip>
+          </ShareMenuIcon>
+        </Dropdown.Trigger>
+        <Dropdown.Content
+          sideOffset={5}
+          css={{
+            w: '$96',
+            maxHeight: '$96',
+            p: 0,
+          }}
+        >
+          <Dropdown.Item
+            css={{
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              px: '$10',
+              pt: '$10',
+              pb: '$6',
+              '&:hover': {
+                bg: '$transparent',
+                cursor: 'default',
+              },
+            }}
+          >
+            <Text variant="h6">Start Sharing</Text>
+            <Text variant="sm">Choose what you want to share</Text>
+          </Dropdown.Item>
+          <Dropdown.Item
+            css={{
+              flexDirection: 'row',
+              alignItems: 'flex-start',
+              gap: '$8',
+              px: '$10',
+              py: '$6',
+              '&:hover': {
+                bg: '$transparent',
+                cursor: 'default',
+              },
+            }}
+          >
+            <Flex
+              direction="column"
+              align="center"
+              css={{
+                gap: '$6',
+              }}
+            >
+              <IconButton
+                as="div"
+                onClick={() => toggleScreenShare()}
+                css={{
+                  p: '$6',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  border: '1px solid $grayDefault',
+                  r: '$2',
+                  bg: '$surfaceLighter',
+                  pb: '0',
+                }}
+              >
+                <ScreenShare
+                  width="100%"
+                  height="100%"
+                  style={{
+                    borderTopLeftRadius: '$0',
+                    borderTopRightRadius: '$0',
+                  }}
+                />
+              </IconButton>
+              <Flex direction="column" align="center">
+                <Text variant="body2">Share Screen</Text>
+                <Text
+                  variant="caption"
+                  css={{
+                    c: '$textDisabled',
+                    textAlign: 'center',
+                  }}
+                >
+                  Share your tab, window or your entire screen
+                </Text>
+              </Flex>
+            </Flex>
+            <Flex
+              direction="column"
+              align="center"
+              css={{
+                gap: '$6',
+              }}
+            >
+              <IconButton
+                onClick={() => {
+                  updateState(MODALS.PDF_SHARE, true);
+                }}
+                disabled={amIScreenSharing}
+                css={{
+                  p: '$6',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  border: '$grayDefault 1px solid',
+                  r: '$2',
+                  bg: '$surfaceLight',
+                  pb: '0',
+                }}
+              >
+                <PdfShare
+                  width="100%"
+                  height="100%"
+                  style={{
+                    borderTopLeftRadius: '$0',
+                    borderTopRightRadius: '$0',
+                  }}
+                />
+                <Flex
+                  direction="row"
+                  css={{
+                    position: 'absolute',
+                    top: '29%',
+                    left: '54%',
+                    padding: '$2 $4',
+                    r: '$2',
+                    bg: '$primaryLight',
+                    zIndex: '2',
+                  }}
+                >
+                  <IconButton
+                    css={{
+                      w: '$10',
+                      h: '$8',
+                      '&:hover': {
+                        bg: '$transparent !important',
+                        border: 'none',
+                      },
+                    }}
+                  >
+                    <StarIcon />
+                  </IconButton>
+                  <Text
+                    variant="xs"
+                    css={{
+                      fontWeight: '$semiBold',
+                      c: '$white',
+                      pr: '$4',
+                    }}
+                  >
+                    New
+                  </Text>
+                </Flex>
+              </IconButton>
+              <Flex direction="column" align="center">
+                <Text variant="body2">Share PDF</Text>
+                <Text
+                  variant="caption"
+                  css={{
+                    c: '$textDisabled',
+                    textAlign: 'center',
+                  }}
+                >
+                  Annotate, draw shapes, and more over PDFs
+                </Text>
+              </Flex>
+            </Flex>
+          </Dropdown.Item>
+          <Dropdown.Item
+            css={{
+              px: '$10',
+              pb: '$10',
+              pt: '$6',
+              '&:hover': {
+                bg: '$transparent',
+                cursor: 'default',
+              },
+            }}
+          >
+            <Button
+              variant="standard"
+              outlined
+              type="submit"
+              onClick={() => {
+                updateState(MODALS.SHARE, false);
+              }}
+              data-testid="share_btn"
+              css={{
+                w: '100%',
+              }}
+            >
+              Cancel
+            </Button>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+      {openModals.has(MODALS.PDF_SHARE) && (
+        <PDFFileOptions onOpenChange={value => updateState(MODALS.PDF_SHARE, value)} />
+      )}
+    </Fragment>
+  );
+}