@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.0

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

@@ -1,19 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { getRoutePrefix } from '../../common/utils';
-
-export const useNavigation = () => {
-  const navigate = useNavigate();
-  const navigation = useCallback(
-    path => {
-      const prefix = getRoutePrefix();
-      let route = path;
-      if (prefix && !path.startsWith(prefix)) {
-        route = `${prefix}${path}`;
-      }
-      navigate(route);
-    },
-    [navigate],
-  );
-  return navigation;
-};

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

@@ -1,20 +0,0 @@
-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/pdfAnnotator/pdfErrorView.jsx

@@ -1,29 +0,0 @@
-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: '$alert_error_default',
-          justifyContent: 'start',
-        }}
-      >
-        <InfoIcon width="12px" height="12px" />
-        <Text
-          variant="caption"
-          css={{
-            pl: '$1',
-            color: '$alert_error_default',
-          }}
-        >
-          Please enter a valid PDF URL
-        </Text>
-      </DialogRow>
-    )
-  );
-};

package/src/Prebuilt/images/Logo.svg

@@ -1,8 +0,0 @@
-<svg width="32" height="42" viewBox="0 0 32 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="14.528" y="5.91187" width="2.944" height="30.176" fill="#538DFF"/>
-<rect x="22.2692" y="7.19727" width="2.944" height="30.176" transform="rotate(30 22.2692 7.19727)" fill="#538DFF"/>
-<rect x="31.088" y="19.5278" width="2.944" height="30.176" transform="rotate(90 31.088 19.5278)" fill="#538DFF"/>
-<rect x="29.8026" y="27.269" width="2.944" height="30.176" transform="rotate(120 29.8026 27.269)" fill="#538DFF"/>
-<rect x="24.8188" y="33.3304" width="2.944" height="30.176" transform="rotate(150 24.8188 33.3304)" fill="#538DFF"/>
-<rect x="28.3306" y="12.181" width="2.944" height="30.176" transform="rotate(60 28.3306 12.181)" fill="#538DFF"/>
-</svg>

package/src/Prebuilt/layouts/ActiveSpeakerView.jsx

@@ -1,34 +0,0 @@
-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/InsetView.jsx

@@ -1,260 +0,0 @@
-import React, { Fragment, useEffect, useRef } from 'react';
-import Draggable from 'react-draggable';
-import { useMedia } from 'react-use';
-import {
-  selectIsAllowedToPublish,
-  selectLocalPeer,
-  selectRemotePeers,
-  selectRolesMap,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { ExpandIcon } from '@100mslive/react-icons';
-import { AudioVideoToggle } from '../components/AudioVideoToggle';
-import { FirstPersonDisplay } from '../components/FirstPersonDisplay';
-import VideoTile from '../components/VideoTile';
-import { Box, Flex } from '../../Layout';
-import { Text } from '../../Text';
-import { config as cssConfig } from '../../Theme';
-import IconButton from '../IconButton';
-import { useSetAppDataByKey } from '../components/AppData/useUISettings';
-import { useRolePreference } from '../components/hooks/useFeatures';
-import { APP_DATA } from '../common/constants';
-
-const getAspectRatio = ({ roleMap, roleName, isMobile }) => {
-  const role = roleMap[roleName];
-  const { width, height } = role.publishParams.video;
-  return isMobile ? height / width : width / height;
-};
-
-export function InsetView() {
-  const remotePeers = useHMSStore(selectRemotePeers);
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const roleMap = useHMSStore(selectRolesMap);
-  const rolePreference = useRolePreference();
-  let centerPeers = [];
-  let sidepanePeers = [];
-  if (rolePreference) {
-    const center = rolePreference[localPeer.roleName]?.split(',') || [];
-    for (const peer of remotePeers) {
-      if (center.includes(peer.roleName)) {
-        centerPeers.push(peer);
-      } else {
-        sidepanePeers.push(peer);
-      }
-    }
-    if (centerPeers.length === 0 && sidepanePeers.length > 0) {
-      centerPeers = sidepanePeers;
-      sidepanePeers = [];
-    }
-  } else {
-    centerPeers = remotePeers;
-  }
-  const hideInset = sidepanePeers.length > 0 && (isMobile || isLandscape);
-
-  return (
-    <Fragment>
-      <Box
-        css={{
-          display: 'grid',
-          gridTemplateColumns: sidepanePeers.length > 0 ? '3fr 1fr' : '100%',
-          gridTemplateRows: '1fr',
-          gap: '$8',
-          px: '$10',
-          size: '100%',
-          '@md': {
-            gridTemplateColumns: '1fr',
-            gridTemplateRows: sidepanePeers.length > 0 ? `3fr 1fr` : '100%',
-          },
-        }}
-      >
-        <Flex
-          align="center"
-          justify="center"
-          css={{
-            size: '100%',
-            gap: '$8',
-            flexWrap: 'wrap',
-            placeContent: 'center',
-            minHeight: 0,
-            minWidth: 0,
-            '@lg': { flexFlow: 'column' },
-            '@ls': { flexFlow: 'row' },
-          }}
-        >
-          {centerPeers.length > 0 ? (
-            centerPeers.map(peer => (
-              <VideoTile
-                key={peer.videoTrack || peer.id}
-                peerId={peer.id}
-                trackId={peer.videoTrack}
-                rootCSS={{
-                  aspectRatio: getAspectRatio({
-                    roleMap,
-                    roleName: peer.roleName,
-                    isMobile,
-                  }),
-                  padding: 0,
-                  height: '100%',
-                  maxWidth: '100%',
-                  minWidth: 0,
-                  minHeight: 0,
-                  flex: remotePeers.length === 1 ? undefined : '1 1 0',
-                  display: 'flex',
-                  alignItems: 'center',
-                  '@lg': {
-                    display: 'block',
-                    padding: '0 !important',
-                    width: '100%',
-                  },
-                }}
-                objectFit="contain"
-              />
-            ))
-          ) : (
-            <FirstPersonDisplay />
-          )}
-        </Flex>
-        {sidepanePeers.length > 0 && (
-          <Flex
-            align="center"
-            justify="center"
-            css={{
-              size: '100%',
-              gap: '$4',
-              flexFlow: 'row wrap',
-              placeContent: 'center',
-            }}
-          >
-            {(hideInset ? [...sidepanePeers, localPeer] : sidepanePeers).map((peer, _, arr) => (
-              <VideoTile
-                key={peer.videoTrack || peer.id}
-                peerId={peer.id}
-                trackId={peer.videoTrack}
-                rootCSS={{
-                  aspectRatio: getAspectRatio({
-                    roleMap,
-                    roleName: peer.roleName,
-                    isMobile: false,
-                  }),
-                  flexBasis: '100%',
-                  '@ls': {
-                    aspectRatio: 1,
-                    flexBasis: 'calc(50% - $4)',
-                  },
-                  '@md': {
-                    aspectRatio: 1,
-                    flexBasis: arr.length < 4 ? 'calc(50% - $4)' : 'calc(33% - $4)',
-                  },
-                  '@sm': {
-                    flexBasis: arr.length <= 4 ? 'calc(50% - $4)' : 'calc(33% - $4)',
-                  },
-                  padding: 0,
-                }}
-                objectFit="contain"
-              />
-            ))}
-          </Flex>
-        )}
-      </Box>
-      {!hideInset && <InsetTile roleMap={roleMap} isMobile={isMobile} isLandscape={isLandscape} />}
-    </Fragment>
-  );
-}
-
-const MinimisedTile = ({ setMinimised }) => {
-  return (
-    <Flex align="center" css={{ gap: '$6', r: '$1', bg: '$surface_default', p: '$4', color: '$on_surface_high' }}>
-      <AudioVideoToggle hideOptions={true} />
-      <Text>You</Text>
-      <IconButton
-        onClick={() => setMinimised(false)}
-        css={{ bg: 'transparent', border: 'transparent' }}
-        className="__cancel-drag-event"
-      >
-        <ExpandIcon />
-      </IconButton>
-    </Flex>
-  );
-};
-
-export const InsetTile = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscape = useMedia(cssConfig.media.ls);
-  const localPeer = useHMSStore(selectLocalPeer);
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  const [minimised, setMinimised] = useSetAppDataByKey(APP_DATA.minimiseInset);
-  const aspectRatio = isMobile ? 9 / 16 : 16 / 9;
-  let height = 180;
-  let width = height * aspectRatio;
-  if (isLandscape && width > 240) {
-    width = 240;
-    height = width / aspectRatio;
-  }
-
-  const nodeRef = useRef(null);
-
-  useEffect(() => {
-    if (!nodeRef.current || !window.ResizeObserver) {
-      return;
-    }
-    const node = nodeRef.current;
-    const resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.target === node.parentElement) {
-          // reset to original position on resize
-          node.style.transform = `translate(0,0)`;
-        }
-      });
-    });
-    resizeObserver.observe(node.parentElement);
-    return () => {
-      node?.parentElement && resizeObserver?.unobserve(node.parentElement);
-      resizeObserver?.disconnect();
-    };
-  }, []);
-
-  if (!isAllowedToPublish.audio && !isAllowedToPublish.video) {
-    return null;
-  }
-
-  return (
-    <Draggable bounds="parent" nodeRef={nodeRef} cancel=".__cancel-drag-event">
-      <Box
-        ref={nodeRef}
-        css={{
-          position: 'absolute',
-          bottom: 0,
-          right: 0,
-          zIndex: 10,
-          boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
-          r: '$2',
-          ...(!minimised
-            ? {
-                aspectRatio: aspectRatio,
-                h: height,
-              }
-            : {}),
-        }}
-      >
-        {minimised ? (
-          <MinimisedTile setMinimised={setMinimised} />
-        ) : (
-          <VideoTile
-            peerId={localPeer.id}
-            trackid={localPeer.videoTrack}
-            rootCSS={{
-              size: '100%',
-              padding: 0,
-            }}
-            width={width}
-            height={height}
-            isDragabble={isMobile}
-            canMinimise
-          />
-        )}
-      </Box>
-    </Draggable>
-  );
-};

package/src/Prebuilt/layouts/PinnedTrackView.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { useMeasure } from 'react-use';
-import { selectPeers, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
-import { GridSidePaneView } from '../components/gridView';
-import VideoTile from '../components/VideoTile';
-import { Flex } from '../../Layout';
-import { useTheme } from '../../Theme';
-import { usePinnedTrack } from '../components/AppData/useUISettings';
-
-const PinnedPeerView = () => {
-  const { aspectRatio } = useTheme();
-  // can be audio or video track, if tile with only audio track is pinned
-  const pinnedTrack = usePinnedTrack();
-  const peerVideoTrack = useHMSStore(selectVideoTrackByPeerID(pinnedTrack.peerId));
-  const pinnedVideoTrack = pinnedTrack && pinnedTrack.type === 'audio' ? peerVideoTrack : pinnedTrack;
-  const [ref, { height, width }] = useMeasure();
-  const peers = (useHMSStore(selectPeers) || []).filter(
-    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,
-  );
-  if (peers.length === 0) {
-    return null;
-  }
-  const showSidePane = pinnedTrack && peers.length > 1;
-
-  let finalWidth = (aspectRatio.width / aspectRatio.height) * height;
-  let finalHeight = height;
-
-  if (finalWidth > width) {
-    finalWidth = width;
-    finalHeight = (aspectRatio.height / aspectRatio.width) * width;
-  }
-
-  return (
-    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>
-      <Flex
-        css={{
-          flex: '1 1 0',
-          p: '$8',
-          minHeight: 0,
-          minWidth: 0,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        ref={ref}
-      >
-        <VideoTile
-          key={pinnedTrack.id}
-          trackId={pinnedVideoTrack?.id}
-          peerId={pinnedTrack.peerId}
-          height={finalHeight}
-          width={finalWidth}
-        />
-      </Flex>
-      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== pinnedTrack.peerId)} />}
-    </Flex>
-  );
-};
-
-export default PinnedPeerView;

package/src/Prebuilt/layouts/SidePane.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
-import { Chat } from '../components/Chat/Chat';
-import { ParticipantList } from '../components/Footer/ParticipantList';
-import { StreamingLanding } from '../components/Streaming/StreamingLanding';
-import { Box } from '../../Layout';
-import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
-
-const SidePane = ({ css = {} }) => {
-  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  let ViewComponent;
-  if (sidepane === SIDE_PANE_OPTIONS.PARTICIPANTS) {
-    ViewComponent = ParticipantList;
-  } else if (sidepane === SIDE_PANE_OPTIONS.CHAT) {
-    ViewComponent = Chat;
-  } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
-    ViewComponent = StreamingLanding;
-  }
-  if (!ViewComponent) {
-    return null;
-  }
-  return (
-    <Box
-      css={{
-        w: '$100',
-        h: '100%',
-        p: '$10',
-        bg: '$surface_default',
-        r: '$1',
-        ml: '$8',
-        flexShrink: 0,
-        position: 'relative',
-        ...css,
-        '@lg': {
-          w: '100%',
-          h: '100%',
-          ml: 0,
-          right: 0,
-          position: 'fixed',
-          bottom: 0,
-          r: 0,
-          zIndex: 10,
-          ...(css['@lg'] || {}),
-        },
-      }}
-    >
-      <ViewComponent />
-    </Box>
-  );
-};
-
-export default SidePane;

package/src/Prebuilt/layouts/mainGridView.jsx

@@ -1,98 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  selectLocalPeerID,
-  selectLocalPeerRole,
-  selectPeers,
-  selectPeersByRoles,
-  selectRolesMap,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { GridCenterView, GridSidePaneView } from '../components/gridView';
-import { Flex } from '../../Layout';
-import { NonPublisherView } from './NonPublisherView';
-import { useAppLayout } from '../components/AppData/useAppLayout';
-import { useUISettings } from '../components/AppData/useUISettings';
-import { UI_SETTINGS } from '../common/constants';
-
-export const MainGridView = () => {
-  const centerRoles = useAppLayout('center') || [];
-  const sidepaneRoles = useAppLayout('sidepane') || [];
-  const maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
-  const peers = useHMSStore(selectPeers);
-  const roles = useHMSStore(selectRolesMap);
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const centerPeers = peers.filter(peer => centerRoles.includes(peer.roleName));
-  const sidebarPeers = peers.filter(peer => sidepaneRoles.includes(peer.roleName));
-  const localRole = useHMSStore(selectLocalPeerRole);
-  const peersByRoles = useHMSStore(selectPeersByRoles(localRole.subscribeParams.subscribeToRoles || []));
-  const [placeholder, setPlaceholder] = useState('');
-
-  useEffect(() => {
-    const hasPublishingPeers = peers.some(peer => {
-      // peer able to publish
-      if (peer.roleName && roles[peer.roleName]) {
-        return !!roles[peer.roleName].publishParams?.allowed.length;
-      }
-      return true;
-    });
-    const hasSubscribedRolePublishing = peersByRoles.some(peer => {
-      if (peer.roleName && roles[peer.roleName]) {
-        return !!roles[peer.roleName].publishParams?.allowed.length;
-      }
-      return true;
-    });
-    if (!hasPublishingPeers) {
-      setPlaceholder('None of the roles can publish video, audio or screen');
-    } else if (!localRole.subscribeParams.subscribeToRoles?.length) {
-      setPlaceholder("This role isn't subscribed to any role");
-    } else if (!hasSubscribedRolePublishing) {
-      setPlaceholder('This role subscribed to roles is not publishing');
-    } else {
-      setPlaceholder('');
-    }
-  }, [localRole.subscribeParams.subscribeToRoles?.length, peers, peersByRoles, roles]);
-  /**
-   * If there are peers from many publishing roles, then it's possible to divide
-   * them into two parts, those who show in center and those who show in sidepane.
-   * In case there is only one person in the room, then too sidepane will be shown
-   * and center would be taken up by a banner image.
-   * There is an issue currently, where the banner is still shown if there are
-   * multiple viewers in the room but no publisher. Depending on the use case
-   * this can be useful(for webinar) or look odd(for showing you're the only one).
-   * Note that both center peers and sidebar peers have only publishing peers in them.
-   */
-  let showSidePane = centerPeers.length > 0 && sidebarPeers.length > 0;
-  if (centerPeers.length === 0) {
-    // we'll show the sidepane for banner in this case too if 1). it's only me
-    // in the room. or 2). noone is publishing in the room
-    const itsOnlyMeInTheRoom = peers.length === 1 && peers[0].id === localPeerId;
-    const nooneIsPublishing = sidebarPeers.length === 0;
-    showSidePane = itsOnlyMeInTheRoom || nooneIsPublishing;
-  }
-  return (
-    <Flex
-      css={{
-        size: '100%',
-      }}
-      direction={{
-        '@initial': 'row',
-        '@md': 'column',
-      }}
-    >
-      {placeholder ? (
-        <NonPublisherView message={placeholder} />
-      ) : (
-        <>
-          <GridCenterView
-            peers={showSidePane ? centerPeers : peers}
-            maxTileCount={maxTileCount}
-            allowRemoteMute={false}
-            hideSidePane={!showSidePane}
-            totalPeers={peers.length}
-          />
-          {showSidePane && <GridSidePaneView peers={sidebarPeers} totalPeers={peers.length} />}
-        </>
-      )}
-    </Flex>
-  );
-};