diff --git a/apps/100ms-web/src/components/pdfAnnotator/shareScreenOptions.jsx b/apps/100ms-web/src/components/pdfAnnotator/shareScreenOptions.jsx
index ffcd629623..7c4260a4a9 100644
--- a/apps/100ms-web/src/components/pdfAnnotator/shareScreenOptions.jsx
+++ b/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",
}}
>
-
@@ -160,12 +159,14 @@ export function ShareScreenOptions() {
pb: "0",
}}
>
-
-
-
-
-
-
-
-
-
diff --git a/packages/react-icons/assets/ScreenShare.svg b/packages/react-icons/assets/ScreenShare.svg
deleted file mode 100644
index 6de71b02e7..0000000000
--- a/packages/react-icons/assets/ScreenShare.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/packages/react-icons/src/PdfShare.tsx b/packages/react-icons/src/PdfShare.tsx
deleted file mode 100644
index 361af5650a..0000000000
--- a/packages/react-icons/src/PdfShare.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { SVGProps } from 'react';
-const SvgPdfShare = (props: SVGProps) => (
-
-);
-export default SvgPdfShare;
diff --git a/packages/react-icons/src/ScreenShare.tsx b/packages/react-icons/src/ScreenShare.tsx
deleted file mode 100644
index 2b49479d03..0000000000
--- a/packages/react-icons/src/ScreenShare.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { SVGProps } from 'react';
-const SvgScreenShare = (props: SVGProps) => (
-
-);
-export default SvgScreenShare;
diff --git a/packages/react-icons/src/index.ts b/packages/react-icons/src/index.ts
index 888bd1c36d..b6229340ba 100644
--- a/packages/react-icons/src/index.ts
+++ b/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';
diff --git a/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx b/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx
index 8fc498c020..904e5124a3 100644
--- a/packages/roomkit-react/src/Prebuilt/components/EqualProminence.jsx
+++ b/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 (
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx
index a5cc671816..8daacffa30 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Header/ConferencingHeader.jsx
+++ b/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 (
-
+
-
+ {isMobile && (
+
+
+
+
+ )}
{
{isMobile && (
<>
- {' '}
+
)}
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx
index 0afed5fdd0..9bb255643d 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Header/HeaderComponents.jsx
+++ b/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 ? (
-
-
-
- {dominantSpeaker.name}
-
-
- ) : (
- <>
+ return (
+ dominantSpeaker &&
+ dominantSpeaker.name && (
+
+
+
+
+ {dominantSpeaker.name}
+
+
+ )
);
};
diff --git a/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx b/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx
index a062b0d6ec..ca6faeb784 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Header/StreamActions.jsx
+++ b/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 (
-
-
- {isMobile ? (
-
- Live
-
- ) : (
- LIVE
- )}
-
- {hlsState?.variants?.length > 0 ? formatTime(liveTime) : ''}
-
+
+
+
+ LIVE
+ {hlsState?.variants?.length > 0 ? formatTime(liveTime) : ''}
+
);
};
@@ -236,10 +231,12 @@ export const StreamActions = () => {
return (
-
-
- {roomState !== HMSRoomState.Preview ? : null}
-
+ {!isMobile && (
+
+
+ {roomState !== HMSRoomState.Preview ? : null}
+
+ )}
{isConnected && !isMobile ? : null}
);
diff --git a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
index f938e7df44..96400ca00e 100644
--- a/packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx
+++ b/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',
}}
>
-
@@ -140,12 +144,14 @@ export function ShareScreenOptions() {
pb: '0',
}}
>
-