@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

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

@@ -1,28 +0,0 @@
-import { useCallback } from 'react';
-import {
-  selectPeerSharingAudio,
-  selectScreenShareAudioByPeerID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-
-export const useScreenshareAudio = () => {
-  const hmsActions = useHMSActions();
-  const peer = useHMSStore(selectPeerSharingAudio);
-  const track = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
-
-  const handleMute = useCallback(() => {
-    if (!peer.isLocal) {
-      hmsActions.setVolume(!track.volume ? 100 : 0, track.id);
-    } else {
-      hmsActions.setEnabledTrack(track.id, !track.enabled).catch(console.error);
-    }
-  }, [peer, hmsActions, track]);
-
-  let muted = undefined;
-  if (peer && track) {
-    muted = peer.isLocal ? !track.enabled : track.volume === 0;
-  }
-
-  return { peer, track, muted, onToggle: handleMute };
-};

package/src/Prebuilt/components/hooks/useTileLayout.tsx

@@ -1,128 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useMeasure, useMedia } from 'react-use';
-import {
-  getPeersWithTiles,
-  HMSPeer,
-  selectTracksMap,
-  TrackWithPeerAndDimensions,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { config as cssConfig } from '../../../Theme';
-
-const aspectRatioConfig = { default: [1 / 1, 4 / 3, 16 / 9], mobile: [1 / 1, 3 / 4, 9 / 16] };
-
-export const usePagesWithTiles = ({ peers, maxTileCount }: { peers: HMSPeer[]; maxTileCount: number }) => {
-  const vanillaStore = useHMSVanillaStore();
-  const tracksMap = vanillaStore.getState(selectTracksMap);
-  const peersWithTiles = useMemo(
-    () => getPeersWithTiles(peers, tracksMap, () => false) as TrackWithPeerAndDimensions[],
-    [peers, tracksMap],
-  );
-  const noOfPages = Math.ceil(peersWithTiles.length / maxTileCount);
-  const pagesList = useMemo(() => {
-    let sliceStart = 0;
-    let remaining = peersWithTiles.length;
-    const list = [];
-    // split into pages
-    for (let i = 0; i < noOfPages; i++) {
-      const count = Math.min(remaining, maxTileCount);
-      list.push(peersWithTiles.slice(sliceStart, sliceStart + count));
-      remaining = remaining - count;
-      sliceStart += count;
-    }
-    return list;
-  }, [peersWithTiles, noOfPages, maxTileCount]);
-  return pagesList;
-};
-
-export const useTileLayout = ({
-  pageList,
-  maxTileCount,
-  edgeToEdge = false,
-}: {
-  pageList: TrackWithPeerAndDimensions[][];
-  maxTileCount: number;
-  edgeToEdge?: boolean;
-}) => {
-  const vanillaStore = useHMSVanillaStore();
-  const [ref, { width, height }] = useMeasure<HTMLDivElement>();
-  const isMobile = useMedia(cssConfig.media.lg);
-  const [pagesWithTiles, setPagesWithTiles] = useState<TrackWithPeerAndDimensions[][]>([]);
-
-  useEffect(() => {
-    if (width === 0 || height === 0) {
-      return;
-    }
-    // calculate dimesions for each page
-    for (const page of pageList) {
-      const noOfTilesInPage = page.length;
-      let maxCols =
-        noOfTilesInPage > 2 && noOfTilesInPage < 9
-          ? Math.ceil(noOfTilesInPage / 2)
-          : Math.ceil(Math.sqrt(noOfTilesInPage));
-      if (isMobile) {
-        maxCols = noOfTilesInPage < 4 ? 1 : Math.min(maxCols, 2);
-      }
-      const maxRows = Math.ceil(noOfTilesInPage / maxCols);
-      let index = 0;
-      // convert the current page to a matrix(grid)
-      const matrix = new Array(maxRows).fill(null).map((_, i) => {
-        const numCols = Math.min(maxCols, noOfTilesInPage - i * maxCols);
-        const rowElements = [];
-        for (let j = 0; j < numCols; j++) {
-          if (index < page.length) {
-            rowElements.push(page[index++]);
-          }
-        }
-        return rowElements;
-      });
-
-      const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items
-      const maxHeight = height - (maxRows - 1) * gap;
-      const maxRowHeight = maxHeight / matrix.length;
-      const aspectRatios =
-        isMobile && (noOfTilesInPage === 1 || noOfTilesInPage > 3)
-          ? aspectRatioConfig.mobile
-          : aspectRatioConfig.default;
-      // calculate height and width of each tile in a row
-      for (const row of matrix) {
-        let tileWidth = (width - (row.length - 1) * gap) / row.length;
-        let tileHeight = 0;
-        if (edgeToEdge) {
-          tileHeight = maxRowHeight;
-        } else {
-          const calcHeights = aspectRatios.map(aR => tileWidth / aR);
-          for (const h of calcHeights) {
-            if (h < maxRowHeight) {
-              if (tileHeight < h) {
-                tileHeight = h;
-              }
-            }
-          }
-
-          // tileHeight is not calculated as it could be exceeding the max possible height
-          // find the max possible width instead
-          if (tileHeight === 0) {
-            tileHeight = maxRowHeight;
-            const calcWidths = aspectRatios.map(aR => tileHeight * aR);
-            tileWidth = 0;
-            for (const w of calcWidths) {
-              if (w < width) {
-                if (tileWidth < w) {
-                  tileWidth = w;
-                }
-              }
-            }
-          }
-        }
-
-        for (let i = 0; i < row.length; i++) {
-          row[i].width = tileWidth;
-          row[i].height = tileHeight;
-        }
-      }
-    }
-    setPagesWithTiles([...pageList]);
-  }, [width, height, maxTileCount, pageList, vanillaStore, isMobile, edgeToEdge]);
-  return { pagesWithTiles, ref };
-};

package/src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-import { selectLocalPeerID } from '@100mslive/hms-video-store';
-import { HMSNotificationTypes, useHMSNotifications, useHMSStore } from '@100mslive/react-sdk';
-
-export const useUnreadPollQuizPresent = () => {
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const notification = useHMSNotifications(HMSNotificationTypes.POLL_STARTED);
-  const [unreadPollQuiz, setUnreadPollQuiz] = useState(false);
-
-  useEffect(() => {
-    if (!notification) {
-      return;
-    }
-    setUnreadPollQuiz(notification.data.startedBy !== localPeerID);
-  }, [localPeerID, notification]);
-  return { unreadPollQuiz, setUnreadPollQuiz };
-};

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

@@ -1,26 +0,0 @@
-import { useState } from 'react';
-import { useLocalStorage } from 'react-use';
-
-export const UserPreferencesKeys = {
-  PREVIEW: 'preview',
-  NOTIFICATIONS: 'notifications',
-  UI_SETTINGS: 'uiSettings',
-  RTMP_URLS: 'rtmpUrls',
-  USER_ID: 'userId',
-};
-
-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/hooks/useVideoTileLayout.ts

@@ -1,26 +0,0 @@
-import React, { useContext } from 'react';
-
-type TileContextType = {
-  enableSpotlightingPeer: boolean;
-  hideParticipantNameOnTile?: boolean;
-  roundedVideoTile?: boolean;
-  hideAudioMuteOnTile?: boolean;
-  hideAudioLevelOnTile?: boolean;
-  objectFit?: 'cover' | 'contain';
-  hideMetadataOnTile?: boolean;
-};
-
-export const VideoTileContext = React.createContext<TileContextType>({
-  enableSpotlightingPeer: true,
-  hideParticipantNameOnTile: false,
-  roundedVideoTile: true,
-  hideAudioMuteOnTile: false,
-  hideAudioLevelOnTile: false,
-  objectFit: 'contain',
-  hideMetadataOnTile: false,
-});
-
-export const useVideoTileContext = () => {
-  const context = useContext(VideoTileContext);
-  return context;
-};

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

@@ -1,31 +0,0 @@
-import React, { useEffect } from 'react';
-import { useTheme } from '../../../';
-import { FeatureFlagsInit } from '../../services/FeatureFlags';
-
-const Init = () => {
-  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);
-    };
-  }, []);
-
-  return <FeatureFlagsInit />;
-};
-
-export { Init };

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

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-import { Dialog, Flex } from '../../../';
-import { DialogInputFile } from '../../primitives/DialogContent';
-import { PDFHeader } from './pdfHeader';
-import { SubmitPDF } from './submitPdf';
-import { UploadedFile } from './uploadedFile';
-
-export function PDFFileOptions({ onOpenChange }) {
-  const [pdfFile, setPDFFile] = useState(null);
-
-  return !pdfFile ? (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            w: 'min(420px,80%)',
-            overflow: 'auto',
-            p: '$10',
-            bg: '$surface_dim',
-          }}
-        >
-          <Flex direction="column">
-            <PDFHeader />
-            <DialogInputFile
-              onChange={target => {
-                setPDFFile(target.files[0]);
-              }}
-              placeholder="Click to upload"
-              type="file"
-              accept=".pdf"
-            />
-
-            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  ) : (
-    <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />
-  );
-}

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

@@ -1,31 +0,0 @@
-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: '$on_surface_medium',
-          }}
-        >
-          Choose PDF you want to annotate and share
-        </Text>
-      </Dialog.Description>
-    </DialogCol>
-  );
-};

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

@@ -1,32 +0,0 @@
-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: '$surface_default',
-        r: '$1',
-        outline: 'none',
-        border: '1px solid $border_bright',
-        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

@@ -1,211 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { useScreenShare } from '@100mslive/react-sdk';
-import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import PDFShareImg from './../../images/pdf-share.png';
-import ScreenShareImg from './../../images/screen-share.png';
-import { Box, 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)}
-        modal={false}
-      >
-        <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,
-            bg: '$surface_dim',
-          }}
-        >
-          <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',
-              pt: '$6',
-              pb: '$10',
-              '&: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 $border_bright',
-                  r: '$2',
-                  bg: '$surface_brighter',
-                  pb: '0',
-                }}
-              >
-                <img
-                  src={ScreenShareImg}
-                  alt="screen-share"
-                  width="100%"
-                  height="100%"
-                  style={{
-                    borderTopLeftRadius: '0.5rem', // TODO: create image component to solve for style hardcoding
-                    borderTopRightRadius: '0.5rem',
-                  }}
-                />
-              </IconButton>
-              <Flex direction="column" align="center">
-                <Text variant="body2">Share Screen</Text>
-                <Text
-                  variant="caption"
-                  css={{
-                    c: '$on_surface_low',
-                    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: '$border_bright 1px solid',
-                  r: '$2',
-                  bg: '$surface_bright',
-                  pb: '0',
-                }}
-              >
-                <img
-                  src={PDFShareImg}
-                  alt="pdf-share"
-                  width="100%"
-                  height="100%"
-                  style={{
-                    borderTopLeftRadius: '0.5rem', // TODO: create image component to solve for style hardcoding
-                    borderTopRightRadius: '0.5rem',
-                  }}
-                />
-                <Flex
-                  direction="row"
-                  align="center"
-                  css={{
-                    position: 'absolute',
-                    top: '35%',
-                    left: '54%',
-                    padding: '$2 $4',
-                    r: '$2',
-                    bg: '$primary_bright',
-                    zIndex: '2',
-                    gap: '$2',
-                  }}
-                >
-                  <StarIcon height={14} width={14} />
-
-                  <Text
-                    variant="xs"
-                    css={{
-                      fontWeight: '$semiBold',
-                      c: '$on_primary_high',
-                      pr: '$4',
-                    }}
-                  >
-                    New
-                  </Text>
-                </Flex>
-              </IconButton>
-              <Flex direction="column" align="center">
-                <Text variant="body2">Share PDF</Text>
-                <Text
-                  variant="caption"
-                  css={{
-                    c: '$on_surface_low',
-                    textAlign: 'center',
-                  }}
-                >
-                  Annotate, draw shapes, and more over PDFs
-                </Text>
-              </Flex>
-            </Flex>
-          </Dropdown.Item>
-        </Dropdown.Content>
-      </Dropdown.Root>
-      {openModals.has(MODALS.PDF_SHARE) && (
-        <PDFFileOptions onOpenChange={value => updateState(MODALS.PDF_SHARE, value)} />
-      )}
-    </Fragment>
-  );
-}

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Button, Flex } from '../../../';
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { APP_DATA } from '../../common/constants';
-
-export const SubmitPDF = ({ pdfFile, onOpenChange }) => {
-  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-
-  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(pdfFile);
-            onOpenChange(false);
-          }
-        }}
-        disabled={!pdfFile}
-        data-testid="share_pdf_btn"
-        css={{
-          w: '50%',
-        }}
-      >
-        Start Sharing
-      </Button>
-    </Flex>
-  );
-};