From d78038d583500ca80b9e44e44ac73de759ec7833 Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Wed, 29 Jun 2022 16:45:40 +0530 Subject: [PATCH 01/57] fix: color in participant list in light theme --- src/components/Header/ParticipantList.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Header/ParticipantList.jsx b/src/components/Header/ParticipantList.jsx index 096bc0f1b..b1cb76d55 100644 --- a/src/components/Header/ParticipantList.jsx +++ b/src/components/Header/ParticipantList.jsx @@ -164,9 +164,7 @@ const Participant = ({ > {peer.name} - - {peer.roleName} - + {peer.roleName} {showActions && ( Date: Mon, 1 Aug 2022 13:18:06 +0530 Subject: [PATCH 02/57] fix: screenshare stats on tiles --- src/components/ScreenshareTile.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/ScreenshareTile.jsx b/src/components/ScreenshareTile.jsx index d0838fa37..edf185b38 100644 --- a/src/components/ScreenshareTile.jsx +++ b/src/components/ScreenshareTile.jsx @@ -23,17 +23,13 @@ const labelStyles = { flexShrink: 0, }; -const Tile = ({ - peerId, - showStatsOnTiles, - width = "100%", - height = "100%", -}) => { +const Tile = ({ peerId, width = "100%", height = "100%" }) => { const track = useHMSStore(selectScreenShareByPeerID(peerId)); const peer = useHMSStore(selectPeerByID(peerId)); const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly); const isHeadless = useIsHeadless(); const [isMouseHovered, setIsMouseHovered] = useState(false); + const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles); const label = getVideoTileLabel({ peerName: peer.name, isLocal: false, From 33a112c9c2aa49c4b4cb381a30791e8e40bd635f Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 1 Aug 2022 17:22:43 +0530 Subject: [PATCH 03/57] fix: hls not starting --- src/components/Streaming/HLSStreaming.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/Streaming/HLSStreaming.jsx b/src/components/Streaming/HLSStreaming.jsx index 8dee2d140..c14294d7b 100644 --- a/src/components/Streaming/HLSStreaming.jsx +++ b/src/components/Streaming/HLSStreaming.jsx @@ -47,19 +47,14 @@ const StartHLS = () => { setHLSStarted(true); setError(""); await hmsActions.startHLSStreaming({ - variants, + variants: [{ meetingURL: recordingUrl || getDefaultMeetingUrl() }], recording: record ? { hlsVod: true, singleFilePerLayer: true } : undefined, }); } catch (error) { - // retry once if urls are missing - if (error.message.includes("urls missing")) { - startHLS([{ meetingURL: recordingUrl || getDefaultMeetingUrl() }]); - } else { - setHLSStarted(false); - setError(error.message); - } + setHLSStarted(false); + setError(error.message); } }, [hmsActions, record, isHLSStarted, setHLSStarted, recordingUrl] From dd972d96fb8b1f25a8f7c43ce1e26c6ad0576659 Mon Sep 17 00:00:00 2001 From: Tushar Tripathi Date: Wed, 17 Aug 2022 21:34:27 +0530 Subject: [PATCH 04/57] feat: main to prod (#851) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Tushar Tripathi Co-authored-by: Ravi theja Co-authored-by: Deepankar Co-authored-by: eswarclynn Co-authored-by: Eswar Prasad Clinton. A <64120992+eswarclynn@users.noreply.github.com> Co-authored-by: amar-1995 <110378139+amar-1995@users.noreply.github.com> Co-authored-by: hardik1003 <93115614+hardik1003@users.noreply.github.com> --- Dockerfile | 4 +- package.json | 12 +- src/components/Chat/ChatSelector.jsx | 118 +++++++++---- src/components/GoLiveButton.jsx | 2 +- src/components/LeaveRoom.jsx | 160 ++++++++++-------- src/components/MoreSettings/MoreSettings.jsx | 2 +- src/components/PIP/PIPComponent.jsx | 2 +- src/components/RoleChangeModal.jsx | 5 +- src/components/ScreenShare.jsx | 2 +- src/components/Settings/DeviceSettings.jsx | 28 ++- src/components/StatsForNerds.jsx | 5 +- src/components/Streaming/HLSStreaming.jsx | 2 +- src/components/TileMenu.jsx | 2 +- src/components/VideoTile.jsx | 2 +- src/components/hooks/useDropdownSelection.jsx | 6 + src/layouts/mainView.jsx | 9 +- .../VirtualBackground/VirtualBackground.jsx | 8 +- src/plugins/VirtualBackground/vbutils.js | 8 +- yarn.lock | 8 +- 19 files changed, 251 insertions(+), 134 deletions(-) create mode 100644 src/components/hooks/useDropdownSelection.jsx diff --git a/Dockerfile b/Dockerfile index 75715cf29..cb92e74ae 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:17 +FROM node:18 WORKDIR /app @@ -14,4 +14,4 @@ ENV PORT=8080 EXPOSE 8080 -CMD ["yarn", "start"] \ No newline at end of file +CMD ["npx", "http-server", "build"] \ No newline at end of file diff --git a/package.json b/package.json index 5acd02236..3efb23a7e 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,15 @@ "src" ], "dependencies": { - "@100mslive/hms-noise-suppression": "0.4.0", - "@100mslive/hms-virtual-background": "1.6.0", - "@100mslive/react-icons": "0.3.0", - "@100mslive/react-sdk": "0.3.0", - "@100mslive/react-ui": "0.3.0", + "@100mslive/hms-noise-suppression": "0.4.1", + "@100mslive/hms-virtual-background": "1.6.1-alpha.0", + "@100mslive/react-icons": "0.3.1-alpha.0", + "@100mslive/react-sdk": "0.3.1-alpha.0", + "@100mslive/react-ui": "0.3.1-alpha.0", "@emoji-mart/data": "^1.0.3", "@tldraw/tldraw": "^1.5.0", "emoji-mart": "^5.1.0", + "eventemitter2": "^6.4.7", "hls.js": "^1.1.1", "js-confetti": "^0.10.2", "logrocket": "^2.2.0", @@ -69,7 +70,6 @@ "eslint-plugin-import": "^2.25.4", "eslint-plugin-prettier": "^4.0.0", "eslint-webpack-plugin": "^3.1.1", - "eventemitter2": "^6.4.6", "html-webpack-plugin": "^5.5.0", "mini-css-extract-plugin": "^2.5.2", "postcss": "^8.4.5", diff --git a/src/components/Chat/ChatSelector.jsx b/src/components/Chat/ChatSelector.jsx index cd75ade5b..c3e62ba26 100644 --- a/src/components/Chat/ChatSelector.jsx +++ b/src/components/Chat/ChatSelector.jsx @@ -1,4 +1,6 @@ -import React, { Fragment, useState } from "react"; +import React, { Fragment, useState, useMemo } from "react"; +import { useMeasure } from "react-use"; +import { FixedSizeList } from "react-window"; import { selectAvailableRoleNames, selectRemotePeers, @@ -94,10 +96,83 @@ const PeerItem = ({ onSelect, peerId, name, active }) => { ); }; -export const ChatSelector = ({ role, peerId, onSelect }) => { +const VirtualizedSelectItemList = ({ + peers, + selectedRole, + selectedPeerId, + searchValue, + onSelect, +}) => { + const [ref, { width, height }] = useMeasure(); const roles = useHMSStore(selectAvailableRoleNames); + const filteredPeers = useMemo( + () => + peers.filter( + // search should be empty or search phrase should be included in name + peer => + !searchValue || + peer.name.toLowerCase().includes(searchValue.toLowerCase()) + ), + [peers, searchValue] + ); + + const listItems = useMemo(() => { + const selectItems = [ + , + ]; + + roles.length > 0 && + selectItems.push(Roles); + roles.forEach(userRole => + selectItems.push( + + ) + ); + + filteredPeers.length > 0 && + selectItems.push(Participants); + filteredPeers.forEach(peer => + selectItems.push( + + ) + ); + + return selectItems; + }, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]); + + return ( + + + {({ index, style }) => ( +
+ {listItems[index]} +
+ )} + + + ); +}; + +export const ChatSelector = ({ role, peerId, onSelect }) => { const peers = useHMSStore(selectRemotePeers); const [search, setSearch] = useState(""); + return ( {peers.length > 0 && ( @@ -108,38 +183,13 @@ export const ChatSelector = ({ role, peerId, onSelect }) => { /> )} - - - {roles.length > 0 && Roles} - {roles.map(userRole => { - return ( - - ); - })} - {peers.length > 0 && Participants} - {peers.map(peer => { - if ( - search && - !peer.name.toLowerCase().includes(search.toLowerCase()) - ) { - return null; - } - return ( - - ); - })} - + ); }; diff --git a/src/components/GoLiveButton.jsx b/src/components/GoLiveButton.jsx index 36140faff..880c9c97c 100644 --- a/src/components/GoLiveButton.jsx +++ b/src/components/GoLiveButton.jsx @@ -19,7 +19,7 @@ const GoLiveButton = () => { const { isStreamingOn, isBrowserRecordingOn } = useRecordingStreaming(); const isHLSStartedFromUI = useIsHLSStartedFromUI(); const isRTMPStartedFromUI = useIsRTMPStartedFromUI(); - let tooltipText = "Start Streaming"; + let tooltipText = "Start streaming"; if (isHLSStartedFromUI || isRTMPStartedFromUI) { if (isHLSStartedFromUI) { tooltipText = "HLS start in progress"; diff --git a/src/components/LeaveRoom.jsx b/src/components/LeaveRoom.jsx index c2c774c57..77c93d4c6 100644 --- a/src/components/LeaveRoom.jsx +++ b/src/components/LeaveRoom.jsx @@ -10,6 +10,7 @@ import { HangUpIcon, ExitIcon, AlertTriangleIcon, + VerticalMenuIcon, } from "@100mslive/react-icons"; import { Button, @@ -65,79 +66,94 @@ export const LeaveRoom = () => { return ( {permissions.endRoom ? ( - - - - - {!isStreamKit ? ( - - - - ) : ( - - - - - - Leave Studio - - - )} - - - - - { - setShowEndRoomModal(true); - }} - data-testid="end_room_btn" - > - + + + + {!isStreamKit ? ( - + - - - End Session - - - The session will end for everyone. You can’t undo this - action. + ) : ( + + + + + + Leave Studio - - - + + + - - - - - - - Leave {isStreamKit ? "Studio" : "Room"} - - - Others will continue after you leave. You can join the - {isStreamKit ? " studio" : " room"} again. - + + + + + + { + setShowEndRoomModal(true); + }} + data-testid="end_room_btn" + > + + + + + + + End Room for All + + + Warning: You can’t undo this action + + + + + + + + + + + + Leave {isStreamKit ? "Studio" : "Room"} + + + You can always rejoin later + + - - - - + + + + ) : ( @@ -202,3 +218,13 @@ const LeaveIconButton = styled(IconButton, { mx: 0, }, }); + +const MenuTriggerButton = styled(LeaveIconButton, { + borderLeft: "1px solid $errorDark", + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + px: "$3", + "@md": { + px: "$2", + }, +}); diff --git a/src/components/MoreSettings/MoreSettings.jsx b/src/components/MoreSettings/MoreSettings.jsx index 9e6bcc5ac..2d1ddabca 100644 --- a/src/components/MoreSettings/MoreSettings.jsx +++ b/src/components/MoreSettings/MoreSettings.jsx @@ -37,7 +37,7 @@ export const MoreSettings = () => { - + diff --git a/src/components/PIP/PIPComponent.jsx b/src/components/PIP/PIPComponent.jsx index 7b60a0e60..86c868af5 100644 --- a/src/components/PIP/PIPComponent.jsx +++ b/src/components/PIP/PIPComponent.jsx @@ -55,7 +55,7 @@ const PIPComponent = () => { return ( <> { const peer = useHMSStore(selectPeerByID(peerId)); @@ -28,6 +29,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => { const [requestPermission, setRequestPermission] = useState(true); const hmsActions = useHMSActions(); const [open, setOpen] = useState(false); + const selectionBg = useDropdownSelection(); if (!peer) { return null; } @@ -100,8 +102,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => { onSelect={() => setRole(role)} css={{ px: "$9", - bg: - role === selectedRole ? "$primaryDark" : undefined, + bg: role === selectedRole ? selectionBg : undefined, }} > {role} diff --git a/src/components/ScreenShare.jsx b/src/components/ScreenShare.jsx index 1295de071..ec265c8ea 100644 --- a/src/components/ScreenShare.jsx +++ b/src/components/ScreenShare.jsx @@ -23,7 +23,7 @@ export const ScreenshareToggle = ({ css }) => { return null; } return ( - + { height: "$48", bg: "transparent", m: "$10 auto", + "@md": { + display: "none", + }, }} >