fix: remove screen share and pdf share icons from react-icons

apps/100ms-web/src/components/pdfAnnotator/shareScreenOptions.jsx

@@ -1,11 +1,6 @@
 import React, { Fragment, useState } from "react";
 import { useScreenShare } from "@100mslive/react-sdk";
-import {
-  PdfShare,
-  ScreenShare,
-  StarIcon,
-  VerticalMenuIcon,
-} from "@100mslive/react-icons";
+import { StarIcon, VerticalMenuIcon } from "@100mslive/react-icons";
 import {
   Box,
   Button,
@@ -15,6 +10,8 @@ import {
   Text,
   Tooltip,
 } from "@100mslive/roomkit-react";
+import PDFShareImg from "./../../images/pdf-share.png";
+import ScreenShareImg from "./../../images/screen-share.png";
 import { ShareMenuIcon } from "../ScreenShare";
 import { PDFFileOptions } from "./pdfFileOptions";
 
@@ -116,12 +113,14 @@ export function ShareScreenOptions() {
                   pb: "0",
                 }}
               >
-                <ScreenShare
+                <img
+                  src={ScreenShareImg}
+                  alt="screen-share"
                   width="100%"
                   height="100%"
                   style={{
-                    borderTopLeftRadius: "$0",
-                    borderTopRightRadius: "$0",
+                    borderTopLeftRadius: "0.5rem", // TODO: create image component to solve for style hardcoding
+                    borderTopRightRadius: "0.5rem",
                   }}
                 />
               </IconButton>
@@ -160,12 +159,14 @@ export function ShareScreenOptions() {
                   pb: "0",
                 }}
               >
-                <PdfShare
+                <img
+                  src={PDFShareImg}
+                  alt="pdf-share"
                   width="100%"
                   height="100%"
                   style={{
-                    borderTopLeftRadius: "$0",
-                    borderTopRightRadius: "$0",
+                    borderTopLeftRadius: "0.5rem", // TODO: create image component to solve for style hardcoding
+                    borderTopRightRadius: "0.5rem",
                   }}
                 />
                 <Flex

packages/react-icons/src/index.ts

@@ -164,7 +164,6 @@ export { default as NoEntryIcon } from './NoEntryIcon';
 export { default as NotificationsIcon } from './NotificationsIcon';
 export { default as OfferIcon } from './OfferIcon';
 export { default as OpenBookIcon } from './OpenBookIcon';
-export { default as PdfShare } from './PdfShare';
 export { default as PipIcon } from './PipIcon';
 export { default as PadLockOnIcon } from './PadLockOnIcon';
 export { default as PaletteIcon } from './PaletteIcon';
@@ -206,7 +205,6 @@ export { default as ReportIcon } from './ReportIcon';
 export { default as RestApiIcon } from './RestApiIcon';
 export { default as RocketIcon } from './RocketIcon';
 export { default as SaveIcon } from './SaveIcon';
-export { default as ScreenShare } from './ScreenShare';
 export { default as SearchIcon } from './SearchIcon';
 export { default as SendIcon } from './SendIcon';
 export { default as ServerIcon } from './ServerIcon';

packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useMeasure, useMedia } from 'react-use';
 import {
   getPeersWithTiles,
@@ -30,6 +30,8 @@ export function EqualProminence() {
   const [pagesWithTiles, setPagesWithTiles] = useState([]);
   const [page, setPage] = useState(0);
   const [ref, { width, height }] = useMeasure();
+  const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
+  const pageSize = pagesWithTiles[0]?.length;
 
   useEffect(() => {
     // currentPageIndex should not exceed pages length
@@ -126,17 +128,12 @@ export function EqualProminence() {
     if (page !== 0) {
       return;
     }
-    const peersSorter = new PeersSorter(vanillaStore);
     peersSorter.setPeersAndTilesPerPage({
       peers,
-      tilesPerPage: pagesWithTiles[0]?.length || maxTileCount,
+      tilesPerPage: pageSize || maxTileCount,
     });
     peersSorter.onUpdate(setSortedPeers);
-
-    return () => {
-      peersSorter.stop();
-    };
-  }, [page, vanillaStore, peers, pagesWithTiles, maxTileCount]);
+  }, [page, peersSorter, peers, pageSize, maxTileCount]);
 
   return (
     <Flex direction="column" css={{ flex: '1 1 0', h: '100%', position: 'relative', minWidth: 0 }}>

packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useMedia } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Flex, VerticalDivider } from '../../../';
+import { config as cssConfig, Flex } from '../../../';
 import { Logo, SpeakerTag } from './HeaderComponents';
-import { StreamActions } from './StreamActions';
+import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
 import { AudioOutputActions, CamaraFlipActions } from './common';
 
 export const ConferencingHeader = () => {
@@ -32,10 +32,15 @@ export const ConferencingHeader = () => {
   }
   return (
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
-      <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
+      <Flex align="center" gap="2" css={{ position: 'absolute', left: '$10' }}>
         <Logo />
-        <VerticalDivider css={{ ml: '$8' }} />
         <SpeakerTag />
+        {isMobile && (
+          <Flex align="center" css={{ gap: '$4' }}>
+            <LiveStatus />
+            <RecordingStatus />
+          </Flex>
+        )}
       </Flex>
       <Flex
         align="center"
@@ -49,7 +54,7 @@ export const ConferencingHeader = () => {
         {isMobile && (
           <>
             <CamaraFlipActions />
-            <AudioOutputActions />{' '}
+            <AudioOutputActions />
           </>
         )}
       </Flex>

packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -2,25 +2,27 @@ import React from 'react';
 import { useMedia } from 'react-use';
 import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
 import { VolumeOneIcon } from '@100mslive/react-icons';
-import { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';
+import { config as cssConfig, Flex, styled, Text, textEllipsis, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
-  return dominantSpeaker && dominantSpeaker.name ? (
-    <Flex
-      align="center"
-      justify="center"
-      css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
-    >
-      <VolumeOneIcon />
-      <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
-        {dominantSpeaker.name}
-      </Text>
-    </Flex>
-  ) : (
-    <></>
+  return (
+    dominantSpeaker &&
+    dominantSpeaker.name && (
+      <Flex
+        align="center"
+        justify="center"
+        css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
+      >
+        <VerticalDivider css={{ ml: '$8' }} />
+        <VolumeOneIcon />
+        <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
+          {dominantSpeaker.name}
+        </Text>
+      </Flex>
+    )
   );
 };
 

packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx

@@ -38,7 +38,7 @@ export const LiveStatus = () => {
   }, [hlsState?.running, hlsState?.variants]);
 
   useEffect(() => {
-    if (hlsState?.running && !isMobile) {
+    if (hlsState?.running) {
       startTimer();
     }
     if (!hlsState?.running && intervalRef.current) {
@@ -55,25 +55,20 @@ export const LiveStatus = () => {
     return null;
   }
   return (
-    <Flex align="center" gap="2">
-      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2', '@md': { display: 'none' } }} />
-      {isMobile ? (
-        <Text
-          css={{
-            bg: '$alert_error_default',
-            c: 'on_surface_high',
-            borderRadius: '$0',
-            padding: '$2 $4 $2 $4',
-          }}
-        >
-          Live
-        </Text>
-      ) : (
-        <Text>LIVE</Text>
-      )}
-      <Text variant="caption" css={{ '@md': { display: 'none' } }}>
-        {hlsState?.variants?.length > 0 ? formatTime(liveTime) : ''}
-      </Text>
+    <Flex
+      align="center"
+      gap="1"
+      css={{
+        border: '1px solid $border_default',
+        padding: '$4 $6 $4 $6',
+        borderRadius: '$1',
+      }}
+    >
+      <Box css={{ w: '$4', h: '$4', r: '$round', bg: '$alert_error_default', mr: '$2' }} />
+      <Flex align="center" gap="2">
+        <Text variant={!isMobile ? 'button' : 'body2'}>LIVE</Text>
+        <Text variant="caption">{hlsState?.variants?.length > 0 ? formatTime(liveTime) : ''}</Text>
+      </Flex>
     </Flex>
   );
 };
@@ -236,10 +231,12 @@ export const StreamActions = () => {
   return (
     <Flex align="center" css={{ gap: '$4' }}>
       <AdditionalRoomState />
-      <Flex align="center" css={{ gap: '$4' }}>
-        <RecordingStatus />
-        {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
-      </Flex>
+      {!isMobile && (
+        <Flex align="center" css={{ gap: '$4' }}>
+          <RecordingStatus />
+          {roomState !== HMSRoomState.Preview ? <LiveStatus /> : null}
+        </Flex>
+      )}
       {isConnected && !isMobile ? <StartRecording /> : null}
     </Flex>
   );

packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -1,6 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { useScreenShare } from '@100mslive/react-sdk';
-import { PdfShare, ScreenShare, StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { StarIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import PDFShareImg from './../../images/pdf-share.png';
+import ScreenShareImg from './../../images/screen-share.png';
 import { Box, Button, Dropdown, Flex, IconButton, Text, Tooltip } from '../../../';
 import { ShareMenuIcon } from '../ShareMenuIcon';
 import { PDFFileOptions } from './pdfFileOptions';
@@ -96,12 +98,14 @@ export function ShareScreenOptions() {
                   pb: '0',
                 }}
               >
-                <ScreenShare
+                <img
+                  src={ScreenShareImg}
+                  alt="screen-share"
                   width="100%"
                   height="100%"
                   style={{
-                    borderTopLeftRadius: '$0',
-                    borderTopRightRadius: '$0',
+                    borderTopLeftRadius: '0.5rem', // TODO: create image component to solve for style hardcoding
+                    borderTopRightRadius: '0.5rem',
                   }}
                 />
               </IconButton>
@@ -140,12 +144,14 @@ export function ShareScreenOptions() {
                   pb: '0',
                 }}
               >
-                <PdfShare
+                <img
+                  src={PDFShareImg}
+                  alt="pdf-share"
                   width="100%"
                   height="100%"
                   style={{
-                    borderTopLeftRadius: '$0',
-                    borderTopRightRadius: '$0',
+                    borderTopLeftRadius: '0.5rem', // TODO: create image component to solve for style hardcoding
+                    borderTopRightRadius: '0.5rem',
                   }}
                 />
                 <Flex