From cf0378d412ea50fe29fa826eef89181abdfd4c8e Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 4 Sep 2023 12:12:54 +0530 Subject: [PATCH 01/13] fix: participant list alignment --- .../src/Prebuilt/components/Footer/ParticipantList.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx index b91d6ac266..0624340053 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx @@ -214,7 +214,6 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) => css={{ flexShrink: 0, gap: '$8', - mt: '$2', }} > From 75e4123929e03babd15b63fd6607adb99acded74 Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Mon, 4 Sep 2023 12:54:34 +0530 Subject: [PATCH 02/13] fix: removed progress bar from player --- .../Prebuilt/components/HMSVideo/HLSQualitySelector.jsx | 7 +++++-- packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx | 9 --------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx index a1fc149d1d..edc18059ee 100644 --- a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HLSQualitySelector.jsx @@ -68,7 +68,10 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto onClick={() => onQualityChange(layer)} key={layer.width} css={{ - bg: '$surface_bright', + bg: + !isAuto && layer.width === selection?.width && layer.height === selection?.height + ? '$surface_default' + : '$surface_bright', '&:hover': { bg: '$surface_default', }, @@ -86,7 +89,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto onClick={() => onQualityChange({ height: 'auto' })} key="auto" css={{ - bg: '$surface_bright', + bg: !isAuto ? '$surface_bright' : '$surface_default', '&:hover': { bg: '$surface_default', }, diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx index 53461d27ca..33c1023f80 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx @@ -212,15 +212,6 @@ const HLSView = () => { background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%)', }} > - {hlsPlayer && ( - { - hlsPlayer.seekTo(currentTime); - }} - hlsPlayer={hlsPlayer} - /> - )} - Date: Mon, 4 Sep 2023 14:53:43 +0530 Subject: [PATCH 03/13] fix: screenshare track showing video track --- .../src/media/tracks/HMSLocalVideoTrack.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/hms-video-web/src/media/tracks/HMSLocalVideoTrack.ts b/packages/hms-video-web/src/media/tracks/HMSLocalVideoTrack.ts index fd5740d70f..476b90c201 100644 --- a/packages/hms-video-web/src/media/tracks/HMSLocalVideoTrack.ts +++ b/packages/hms-video-web/src/media/tracks/HMSLocalVideoTrack.ts @@ -344,6 +344,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { return newSettings; }; + // eslint-disable-next-line complexity private handleSettingsChange = async (settings: HMSVideoTrackSettings) => { const stream = this.stream as HMSLocalStream; const hasPropertyChanged = generateHasPropertyChanged(settings, this.settings); @@ -352,10 +353,14 @@ export class HMSLocalVideoTrack extends HMSVideoTrack { } if (hasPropertyChanged('width') || hasPropertyChanged('height') || hasPropertyChanged('advanced')) { - const track = await this.replaceTrackWith(settings); - await this.replaceSender(track, this.enabled); - this.nativeTrack = track; - this.videoHandler.updateSinks(); + if (this.source === 'video') { + const track = await this.replaceTrackWith(settings); + await this.replaceSender(track, this.enabled); + this.nativeTrack = track; + this.videoHandler.updateSinks(); + } else { + await this.nativeTrack.applyConstraints(settings.toConstraints()); + } } }; From 910383f026b60a1780da1f2b0e8f76e691ceb325 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 4 Sep 2023 15:02:25 +0530 Subject: [PATCH 04/13] feat: setup environment for dev (#1795) Co-authored-by: Ravi theja Co-authored-by: Saikat Mitra --- .github/workflows/auto-pr-dev-to-main.yml | 22 ++++++++++++++++++ ...ilt-branch.yml => auto-pr-main-to-dev.yml} | 10 ++++---- .../workflows/auto-pr-main-to-production.yml | 22 ++++++++++++++++++ .../workflows/auto-pr-production-to-main.yml | 22 ++++++++++++++++++ .github/workflows/deploy-dev.yml | 23 +++++++++---------- 5 files changed, 82 insertions(+), 17 deletions(-) create mode 100644 .github/workflows/auto-pr-dev-to-main.yml rename .github/workflows/{auto-pr-prebuilt-branch.yml => auto-pr-main-to-dev.yml} (66%) create mode 100644 .github/workflows/auto-pr-main-to-production.yml create mode 100644 .github/workflows/auto-pr-production-to-main.yml diff --git a/.github/workflows/auto-pr-dev-to-main.yml b/.github/workflows/auto-pr-dev-to-main.yml new file mode 100644 index 0000000000..cb3be1d24b --- /dev/null +++ b/.github/workflows/auto-pr-dev-to-main.yml @@ -0,0 +1,22 @@ +name: Create PR from dev to main +on: + pull_request: + types: [closed] + branches: + - dev + +jobs: + pull-request: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - name: pull-request + uses: repo-sync/pull-request@v2 + if: github.event.pull_request.merged == true + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + source_branch: '' + destination_branch: 'main' + pr_title: 'QA Handover PR' + pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main**' + pr_label: 'release' diff --git a/.github/workflows/auto-pr-prebuilt-branch.yml b/.github/workflows/auto-pr-main-to-dev.yml similarity index 66% rename from .github/workflows/auto-pr-prebuilt-branch.yml rename to .github/workflows/auto-pr-main-to-dev.yml index fa6b42d019..482d5df6ea 100644 --- a/.github/workflows/auto-pr-prebuilt-branch.yml +++ b/.github/workflows/auto-pr-main-to-dev.yml @@ -1,4 +1,4 @@ -name: Create PR from main to main-prebuilt +name: Create PR from main to dev on: pull_request: types: [closed] @@ -16,7 +16,7 @@ jobs: with: github_token: ${{ secrets.GITHUB_TOKEN }} source_branch: '' - destination_branch: 'main-prebuilt' - pr_title: 'PR for Prebuilt Link QA deployment' - pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main-prebuilt**' - pr_label: 'Prebuilt Link QA deployment' + destination_branch: 'dev' + pr_title: 'PR for main to dev backmerge' + pr_body: ':robot: Automated PR from **${{ github.ref }}** to **dev**' + pr_label: 'backmerge' diff --git a/.github/workflows/auto-pr-main-to-production.yml b/.github/workflows/auto-pr-main-to-production.yml new file mode 100644 index 0000000000..3beffc66e0 --- /dev/null +++ b/.github/workflows/auto-pr-main-to-production.yml @@ -0,0 +1,22 @@ +name: Create PR from main to production +on: + pull_request: + types: [closed] + branches: + - main + +jobs: + pull-request: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - name: pull-request + uses: repo-sync/pull-request@v2 + if: github.event.pull_request.merged == true + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + source_branch: '' + destination_branch: 'production' + pr_title: 'Production release PR' + pr_body: ':robot: Automated PR from **${{ github.ref }}** to **production**' + pr_label: 'release' diff --git a/.github/workflows/auto-pr-production-to-main.yml b/.github/workflows/auto-pr-production-to-main.yml new file mode 100644 index 0000000000..010122df82 --- /dev/null +++ b/.github/workflows/auto-pr-production-to-main.yml @@ -0,0 +1,22 @@ +name: Create PR from production to main +on: + pull_request: + types: [closed] + branches: + - production + +jobs: + pull-request: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v1 + - name: pull-request + uses: repo-sync/pull-request@v2 + if: github.event.pull_request.merged == true + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + source_branch: '' + destination_branch: 'main' + pr_title: 'Hotfix backmerge to main' + pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main**' + pr_label: 'backmerge' diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml index 703bc8e13d..ee61e44764 100644 --- a/.github/workflows/deploy-dev.yml +++ b/.github/workflows/deploy-dev.yml @@ -1,15 +1,14 @@ name: Deploy Dev on: workflow_dispatch: - inputs: - buildEnvForDev: - description: 'which env to build - qa/prod for dev-app, applies only if env is dev' - type: 'choice' - required: false - default: prod - options: - - prod - - qa + push: + branches: + - dev + paths-ignore: + - 'cypress/**' + - 'playwright/**' + - 'internal-docs/**' + - '.github/**' jobs: build: @@ -38,9 +37,9 @@ jobs: REACT_APP_ENV: ${{ github.event.inputs.buildEnvForDev }} REACT_APP_ZIPY_KEY: ${{ secrets.ZIPY_KEY }} REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING: 'true' - REACT_APP_INIT_ENDPOINT: https://qa-init.100ms.live/init - REACT_APP_ROOM_LAYOUT_ENDPOINT: https://api-nonprod.100ms.live/v2/layouts/ui - REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT: https://auth-nonprod.100ms.live/v2/token + REACT_APP_INIT_ENDPOINT: https://prod-in3.100ms.live/init + REACT_APP_ROOM_LAYOUT_ENDPOINT: https://api.100ms.live/v2/layouts/ui + REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT: https://auth.100ms.live/v2/token steps: - name: log inputs run: | From dc55f04cca75fb713140bd25633bfa374dd0bf2d Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 4 Sep 2023 16:19:21 +0530 Subject: [PATCH 05/13] fix: update leave css --- .../components/Leave/DesktopLeaveRoom.tsx | 21 +++++++++++++++---- .../Prebuilt/components/Leave/LeaveCard.tsx | 4 +--- .../components/Leave/MwebLeaveRoom.tsx | 5 ++--- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx index a74f390fe4..267ea9f631 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx @@ -75,7 +75,15 @@ export const DesktopLeaveRoom = ({ - + } onClick={leaveRoom} css={{ p: 0 }} /> {isStreamingOn && permissions?.hlsStreaming ? ( - + } onClick={() => { setOpen(false); diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx index bc6882170d..d65404a7f0 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveCard.tsx @@ -10,7 +10,6 @@ export const LeaveCard = ({ onClick, bg, titleColor, - subtitleColor, css = {}, }: { icon: React.JSX.Element; @@ -18,7 +17,6 @@ export const LeaveCard = ({ subtitle: string; onClick: () => void; titleColor: string; - subtitleColor: string; bg: string; css?: CSS; }) => { @@ -29,7 +27,7 @@ export const LeaveCard = ({ {title} - + {subtitle} diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx index 76ff412e69..558fb52bdb 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx @@ -63,10 +63,9 @@ export const MwebLeaveRoom = ({ } again.`} bg="$surface_default" titleColor="$on_surface_high" - subtitleColor="$on_surface_low" icon={} onClick={leaveRoom} - css={{ pt: 0, mt: '$10' }} + css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }} /> {isStreamingOn && permissions?.hlsStreaming ? ( } onClick={() => { setOpen(false); From c4bd9900dd973bc36466eae19f5e0513f22cca93 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 4 Sep 2023 16:35:55 +0530 Subject: [PATCH 06/13] fix: default enable av in preview --- .../src/Prebuilt/components/Preview/PreviewJoin.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx index 8b4d17081d..8e135485e4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.jsx @@ -73,8 +73,6 @@ const PreviewJoin = ({ onJoin, skipPreview, initialName, asRole }) => { const savePreferenceAndJoin = useCallback(() => { setPreviewPreference({ name, - isAudioMuted: !isLocalAudioEnabled, - isVideoMuted: !isLocalVideoEnabled, }); join(); onJoin && onJoin(); From 9fcbb04b9cf4e3126ed8a4bf62968c43262a959b Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 4 Sep 2023 17:00:06 +0530 Subject: [PATCH 07/13] fix: page becoming unresponsive after starting stream (#1797) * fix: add test logs * refactor: extract our hls start * fix: test log * refactor: auto start streaming --- packages/roomkit-react/src/Prebuilt/App.tsx | 2 + .../Prebuilt/components/AppData/AppData.jsx | 2 + .../src/Prebuilt/components/conference.jsx | 2 + .../hooks/useAutoStartStreaming.tsx | 58 +++++++++++++++++++ .../layouts/VideoStreamingSection.tsx | 49 +--------------- 5 files changed, 67 insertions(+), 46 deletions(-) create mode 100644 packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx index 416136df7e..caa734c7dc 100644 --- a/packages/roomkit-react/src/Prebuilt/App.tsx +++ b/packages/roomkit-react/src/Prebuilt/App.tsx @@ -40,6 +40,7 @@ import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext'; import { FlyingEmoji } from './plugins/FlyingEmoji'; // @ts-ignore: No implicit Any import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare'; +import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming'; import { useRoomLayoutLeaveScreen, useRoomLayoutPreviewScreen, @@ -261,6 +262,7 @@ const Redirector = ({ showPreview }: { showPreview: boolean }) => { const RouteList = () => { const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen(); const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen(); + useAutoStartStreaming(); return ( {isPreviewScreenEnabled ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx index 14d96ee75a..687d24f5fe 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx @@ -152,6 +152,7 @@ const ResetStreamingStart = () => { */ useEffect(() => { if (roomState === HMSRoomState.Disconnected) { + console.log('hls streaming reset on disconnected'); setHLSStarted(false); setRecordingStarted(false); setRTMPStarted(false); @@ -160,6 +161,7 @@ const ResetStreamingStart = () => { useEffect(() => { if (isHLSRunning || hlsError) { if (hlsStarted) { + console.log('hls streaming reset'); setHLSStarted(false); if (isStreamingOpen) { toggleStreaming(); diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx index 63a635d26b..840be2104f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/conference.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/conference.jsx @@ -124,6 +124,8 @@ const Conference = () => { return ; } + console.log('conference rendering'); + return ( {!screenProps.hideSections.includes('header') && ( diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx new file mode 100644 index 0000000000..ba911ec49e --- /dev/null +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx @@ -0,0 +1,58 @@ +import { useCallback, useEffect, useRef } from 'react'; +import { + HMSException, + selectIsConnectedToRoom, + selectPermissions, + useHMSActions, + useHMSStore, + useRecordingStreaming, +} from '@100mslive/react-sdk'; +// @ts-ignore: No implicit Any +import { useSetAppDataByKey } from '../AppData/useUISettings'; +// @ts-ignore: No implicit Any +import { useShowStreamingUI } from '../../common/hooks'; +// @ts-ignore: No implicit Any +import { APP_DATA } from '../../common/constants'; + +export const useAutoStartStreaming = () => { + const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted); + const permissions = useHMSStore(selectPermissions); + const showStreamingUI = useShowStreamingUI(); + const hmsActions = useHMSActions(); + const isConnected = useHMSStore(selectIsConnectedToRoom); + const { isHLSRunning } = useRecordingStreaming(); + const streamStartedRef = useRef(false); + + const startHLS = useCallback(async () => { + try { + if (isHLSStarted || !showStreamingUI || isHLSRunning) { + return; + } + console.log('starting hls called'); + setHLSStarted(true); + streamStartedRef.current = true; + await hmsActions.startHLSStreaming(); + } catch (error) { + if ((error as HMSException).message?.includes('beam already started')) { + return; + } + streamStartedRef.current = false; + setHLSStarted(false); + } + }, [hmsActions, isHLSRunning, isHLSStarted, setHLSStarted, showStreamingUI]); + + useEffect(() => { + if (!isHLSStarted && !isHLSRunning) { + streamStartedRef.current = false; + } + }, [isHLSStarted, isHLSRunning]); + + useEffect(() => { + if (!isConnected || streamStartedRef.current || !permissions?.hlsStreaming) { + return; + } + // Is a streaming kit and broadcaster joins + console.log('start hls called'); + startHLS(); + }, [isConnected, permissions?.hlsStreaming, startHLS]); +}; diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx index f79b2111db..24e647b8d5 100644 --- a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx +++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx @@ -1,43 +1,30 @@ -import React, { Suspense, useCallback, useEffect } from 'react'; -import { HMSException } from '@100mslive/hms-video'; +import React, { Suspense, useEffect } from 'react'; import { ConferencingScreen, DefaultConferencingScreen_Elements, HLSLiveStreamingScreen_Elements, } from '@100mslive/types-prebuilt'; -import { - selectIsConnectedToRoom, - selectLocalPeerRoleName, - selectPermissions, - useHMSActions, - useHMSStore, - useRecordingStreaming, -} from '@100mslive/react-sdk'; +import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk'; // @ts-ignore: No implicit Any import FullPageProgress from '../components/FullPageProgress'; -// @ts-ignore: No implicit Any import { GridLayout } from '../components/VideoLayouts/GridLayout'; import { Flex } from '../../Layout'; // @ts-ignore: No implicit Any import { EmbedView } from './EmbedView'; // @ts-ignore: No implicit Any import { PDFView } from './PDFView'; -// @ts-ignore: No implicit Any import SidePane from './SidePane'; // @ts-ignore: No implicit Any import { WaitingView } from './WaitingView'; // import { useWhiteboardMetadata } from '../plugins/whiteboard'; import { usePDFAnnotator, - useSetAppDataByKey, useUrlToEmbed, useWaitingViewerRole, // @ts-ignore: No implicit Any } from '../components/AppData/useUISettings'; // @ts-ignore: No implicit Any -import { useShowStreamingUI } from '../common/hooks'; -// @ts-ignore: No implicit Any -import { APP_DATA, SESSION_STORE_KEY } from '../common/constants'; +import { SESSION_STORE_KEY } from '../common/constants'; // const WhiteboardView = React.lazy(() => import("./WhiteboardView")); // @ts-ignore: No implicit Any @@ -57,36 +44,6 @@ export const VideoStreamingSection = ({ const waitingViewerRole = useWaitingViewerRole(); const urlToIframe = useUrlToEmbed(); const pdfAnnotatorActive = usePDFAnnotator(); - const { isHLSRunning } = useRecordingStreaming(); - const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted); - const permissions = useHMSStore(selectPermissions); - const showStreamingUI = useShowStreamingUI(); - - const startHLS = useCallback(async () => { - try { - if (isHLSStarted) { - return; - } - setHLSStarted(true); - await hmsActions.startHLSStreaming(); - } catch (error) { - if ((error as HMSException).message?.includes('beam already started')) { - return; - } - setHLSStarted(false); - } - }, [hmsActions, isHLSStarted, setHLSStarted]); - - useEffect(() => { - if (!isConnected) { - return; - } - // Is a streaming kit and broadcaster joins - if (permissions?.hlsStreaming && !isHLSRunning && showStreamingUI) { - startHLS(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isConnected]); useEffect(() => { if (!isConnected) { From 510cb8e207ba648c4484bc979281d7be9d802f39 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 4 Sep 2023 17:51:12 +0530 Subject: [PATCH 08/13] fix: hls restarts after stopping --- .../src/Prebuilt/components/hooks/useAutoStartStreaming.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx b/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx index ba911ec49e..571c799f81 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/hooks/useAutoStartStreaming.tsx @@ -28,7 +28,6 @@ export const useAutoStartStreaming = () => { if (isHLSStarted || !showStreamingUI || isHLSRunning) { return; } - console.log('starting hls called'); setHLSStarted(true); streamStartedRef.current = true; await hmsActions.startHLSStreaming(); @@ -52,7 +51,7 @@ export const useAutoStartStreaming = () => { return; } // Is a streaming kit and broadcaster joins - console.log('start hls called'); startHLS(); - }, [isConnected, permissions?.hlsStreaming, startHLS]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isConnected]); }; From a21efeb26ed91439b9eef1b7552f238a50711db6 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Mon, 4 Sep 2023 18:05:45 +0530 Subject: [PATCH 09/13] fix: infinite loop --- packages/roomkit-react/src/Prebuilt/common/PeersSorter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/common/PeersSorter.ts b/packages/roomkit-react/src/Prebuilt/common/PeersSorter.ts index 6e78364ca8..00c24de82b 100644 --- a/packages/roomkit-react/src/Prebuilt/common/PeersSorter.ts +++ b/packages/roomkit-react/src/Prebuilt/common/PeersSorter.ts @@ -60,7 +60,7 @@ class PeersSorter { // delete to insert at beginning this.lruPeers.delete(speaker.id); const lruPeerArray = Array.from(this.lruPeers); - while (lruPeerArray.length >= this.tilesPerPage) { + while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) { lruPeerArray.pop(); } this.lruPeers = new Set([speaker.id, ...lruPeerArray]); From cd01d5e7342ea42a0fa0dbb1125ea41ef709bc4a Mon Sep 17 00:00:00 2001 From: Ravi theja Date: Mon, 4 Sep 2023 18:17:12 +0530 Subject: [PATCH 10/13] fix: remove test logs --- .../roomkit-react/src/Prebuilt/components/AppData/AppData.jsx | 2 -- packages/roomkit-react/src/Prebuilt/components/conference.jsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx index 687d24f5fe..14d96ee75a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.jsx @@ -152,7 +152,6 @@ const ResetStreamingStart = () => { */ useEffect(() => { if (roomState === HMSRoomState.Disconnected) { - console.log('hls streaming reset on disconnected'); setHLSStarted(false); setRecordingStarted(false); setRTMPStarted(false); @@ -161,7 +160,6 @@ const ResetStreamingStart = () => { useEffect(() => { if (isHLSRunning || hlsError) { if (hlsStarted) { - console.log('hls streaming reset'); setHLSStarted(false); if (isStreamingOpen) { toggleStreaming(); diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx index 840be2104f..63a635d26b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/conference.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/conference.jsx @@ -124,8 +124,6 @@ const Conference = () => { return ; } - console.log('conference rendering'); - return ( {!screenProps.hideSections.includes('header') && ( From 504b44d6d1cf9601d0dd8b9f9121c0e6fb9b2e3d Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 4 Sep 2023 19:14:43 +0530 Subject: [PATCH 11/13] fix: role accordion options --- packages/roomkit-react/package.json | 3 +- .../src/Prebuilt/common/constants.js | 2 - .../src/Prebuilt/common/utils.js | 2 +- .../components/Footer/ParticipantList.jsx | 56 ++----- .../{RoleAccordion.jsx => RoleAccordion.tsx} | 44 +++-- .../components/Footer/RoleOptions.tsx | 152 ++++++++++++++++++ .../components/RoleChangeRequestModal.jsx | 25 ++- yarn.lock | 15 +- 8 files changed, 226 insertions(+), 73 deletions(-) rename packages/roomkit-react/src/Prebuilt/components/Footer/{RoleAccordion.jsx => RoleAccordion.tsx} (59%) create mode 100644 packages/roomkit-react/src/Prebuilt/components/Footer/RoleOptions.tsx diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json index be17910c6e..944309e351 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -62,6 +62,7 @@ "@types/lodash.merge": "^4.6.6", "@types/mdx": "2.0.2", "@types/react": "^18.1.0", + "@types/react-window": "^1.8.5", "babel-loader": "^8.2.5", "babel-plugin-react-require": "3.1.3", "react": "^18.1.0", @@ -79,7 +80,7 @@ "@100mslive/hms-virtual-background": "1.11.15-alpha.0", "@100mslive/react-icons": "0.8.15-alpha.0", "@100mslive/react-sdk": "0.8.15-alpha.0", - "@100mslive/types-prebuilt": "0.11.0", + "@100mslive/types-prebuilt": "0.12.0", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", "@radix-ui/react-accordion": "1.0.0", diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.js b/packages/roomkit-react/src/Prebuilt/common/constants.js index 13840befed..c61bba8d7e 100644 --- a/packages/roomkit-react/src/Prebuilt/common/constants.js +++ b/packages/roomkit-react/src/Prebuilt/common/constants.js @@ -93,5 +93,3 @@ export const SESSION_STORE_KEY = { PINNED_MESSAGE: 'pinnedMessage', SPOTLIGHT: 'spotlight', }; - -export const ROLE_CHANGE_DECLINED = 'role_change_declined'; diff --git a/packages/roomkit-react/src/Prebuilt/common/utils.js b/packages/roomkit-react/src/Prebuilt/common/utils.js index af285abfae..d6bb8357cf 100644 --- a/packages/roomkit-react/src/Prebuilt/common/utils.js +++ b/packages/roomkit-react/src/Prebuilt/common/utils.js @@ -40,7 +40,7 @@ export const arrayIntersection = (a, b) => { export const getMetadata = metadataString => { try { - return metadataString === '' ? {} : JSON.parse(metadataString); + return !metadataString ? {} : JSON.parse(metadataString); } catch (error) { return {}; } diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx index 0624340053..ded0351d9c 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx @@ -21,12 +21,11 @@ import { } from '@100mslive/react-icons'; import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..'; import IconButton from '../../IconButton'; -import { useRoomLayout } from '../../provider/roomLayoutProvider'; import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader'; import { ConnectionIndicator } from '../Connection/ConnectionIndicator'; -import { RoleChangeModal } from '../RoleChangeModal'; import { ToastManager } from '../Toast/ToastManager'; import { RoleAccordion } from './RoleAccordion'; +import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen'; import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane'; import { useParticipants } from '../../common/hooks'; import { isInternalRole } from '../../common/utils'; @@ -46,7 +45,6 @@ export const ParticipantList = () => { peersOrderedByRoles[participant.roleName].push(participant); }); - const [selectedPeerId, setSelectedPeerId] = useState(null); const onSearch = useCallback(value => { setFilter(filterValue => { if (!filterValue) { @@ -75,16 +73,7 @@ export const ParticipantList = () => { handRaisedList={handRaisedPeers} isConnected={isConnected} filter={filter} - setSelectedPeerId={setSelectedPeerId} /> - {selectedPeerId && ( - { - !value && setSelectedPeerId(null); - }} - /> - )} ); @@ -126,13 +115,7 @@ export const ParticipantCount = () => { ); }; -const VirtualizedParticipants = ({ - peersOrderedByRoles = {}, - isConnected, - setSelectedPeerId, - filter, - handRaisedList = [], -}) => { +const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => { return ( {Object.keys(peersOrderedByRoles).map(role => ( @@ -158,7 +140,6 @@ const VirtualizedParticipants = ({ peerList={peersOrderedByRoles[role]} roleName={role} isConnected={isConnected} - setSelectedPeerId={setSelectedPeerId} filter={filter} /> ))} @@ -166,7 +147,7 @@ const VirtualizedParticipants = ({ ); }; -export const Participant = ({ peer, isConnected, setSelectedPeerId }) => { +export const Participant = ({ peer, isConnected }) => { const localPeerId = useHMSStore(selectLocalPeerID); return ( { {peer.name} {localPeerId === peer.id ? '(You)' : ''} {isConnected ? ( - { - setSelectedPeerId(peer.id); - }} - /> + ) : null} ); @@ -202,7 +176,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => { /** * shows settings to change for a participant like changing their role */ -const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) => { +const ParticipantActions = React.memo(({ peerId, role, isLocal }) => { const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised; const canChangeRole = useHMSStore(selectPermissions)?.changeRole; const shouldShowMoreActions = canChangeRole; @@ -237,23 +211,22 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) => ) : null} {shouldShowMoreActions && !isInternalRole(role) && !isLocal ? ( - + ) : null} ); }); -const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => { +const ParticipantMoreActions = ({ peerId, role }) => { const hmsActions = useHMSActions(); const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions); - const layout = useRoomLayout(); + const { elements } = useRoomLayoutConferencingScreen(); const { bring_to_stage_label, remove_from_stage_label, on_stage_role, off_stage_roles = [], - } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {}; - const canBringToStage = off_stage_roles.includes(role); + } = elements.on_stage_exp || {}; const isInStage = role === on_stage_role; const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole; const localPeerId = useHMSStore(selectLocalPeerID); @@ -295,21 +268,14 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => { - {canChangeRole && canBringToStage ? ( + {canChangeRole ? ( handleStageAction()}> {isInStage ? remove_from_stage_label : bring_to_stage_label} - ) : ( - onRoleChange(peerId)}> - - - Change Role - - - )} + ) : null} {!isLocal && canRemoveOthers && ( { - return ( - - ); +const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => { + return ; }); export const RoleAccordion = ({ peerList = [], roleName, - setSelectedPeerId, isConnected, filter, isHandRaisedAccordion = false, +}: ItemData & { + roleName: string; + isHandRaisedAccordion?: boolean; + filter?: { search: string }; }) => { - const [ref, { width }] = useMeasure(); - const height = ROW_HEIGHT * peerList.length; + const [ref, { width }] = useMeasure(); const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true; + if (!showAcordion || (isHandRaisedAccordion && filter?.search) || peerList.length === 0) { return null; } + const height = ROW_HEIGHT * peerList.length; return ( - + - {roleName} {`(${getFormattedCount(peerList.length)})`} + + + {roleName} {`(${getFormattedCount(peerList.length)})`} + + + { + const [openOptions, setOpenOptions] = useState(false); + const permissions = useHMSStore(selectPermissions); + const hmsActions = useHMSActions(); + const { elements } = useRoomLayoutConferencingScreen(); + const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {}; + + const vanillaStore = useHMSVanillaStore(); + const store = vanillaStore.getState(); + + let allPeersHaveVideoOn = true; + let allPeersHaveAudioOn = true; + + peerList.forEach(peer => { + const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled; + const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled; + allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn; + allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn; + }); + + const canMuteRole = permissions?.mute && roleName === on_stage_role; + const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role; + // on stage and off stage roles + const canRemoveRoleFromRoom = + permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName)); + + if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) { + return null; + } + + const removeAllFromStage = () => { + peerList.forEach(peer => { + hmsActions.changeRoleOfPeer(peer.id, getMetadata(peer.metadata).prevRole || off_stage_roles?.[0]); + }); + }; + + const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => { + try { + await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled }); + } catch (e) { + console.error(e); + } + }; + + const removePeersFromRoom = async () => { + try { + peerList.forEach(async peer => { + await hmsActions.removePeer(peer.id, ''); + }); + } catch (e) { + console.error(e); + } + }; + + return ( + + e.stopPropagation()} + className="role_actions" + asChild + css={{ + p: '$1', + r: '$0', + c: '$on_surface_high', + visibility: openOptions ? 'visible' : 'hidden', + '&:hover': { + c: '$on_surface_medium', + }, + '@md': { + visibility: 'visible', + }, + }} + > + + + + + e.stopPropagation()} + css={{ w: 'max-content', maxWidth: '$64', bg: '$surface_default', py: 0 }} + align="end" + > + {canRemoveRoleFromStage && ( + + + + Remove all from Stage + + + )} + + {canMuteRole && ( + <> + setTrackEnabled('audio', !allPeersHaveAudioOn)}> + {allPeersHaveAudioOn ? : } + + {allPeersHaveAudioOn ? 'Mute' : 'Unmute'} Audio + + + + setTrackEnabled('video', !allPeersHaveVideoOn)} + > + {allPeersHaveVideoOn ? : } + + {allPeersHaveVideoOn ? 'Mute' : 'Unmute'} Video + + + + )} + + {canRemoveRoleFromRoom && ( + + + + Remove all from Room + + + )} + + + ); +}; diff --git a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.jsx b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.jsx index 699847fdd5..7e8c4b9a3a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequestModal.jsx @@ -1,25 +1,40 @@ -import React, { useEffect } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { selectLocalPeerName, selectLocalPeerRoleName, selectRoleChangeRequest, + useCustomEvent, useHMSActions, useHMSStore, } from '@100mslive/react-sdk'; import { PreviewControls, PreviewTile } from './Preview/PreviewJoin'; +import { ToastManager } from './Toast/ToastManager'; import { Box, Button, Dialog, Flex, Text } from '../../'; import { useIsHeadless } from './AppData/useUISettings'; import { useMyMetadata } from './hooks/useMetadata'; -import { ROLE_CHANGE_DECLINED } from '../common/constants'; + +const ROLE_CHANGE_DECLINED = 'role_change_declined'; export const RoleChangeRequestModal = () => { const hmsActions = useHMSActions(); const isHeadless = useIsHeadless(); - const { setPrevRole } = useMyMetadata(); + const { setPrevRole, toggleHandRaise } = useMyMetadata(); const currentRole = useHMSStore(selectLocalPeerRoleName); const roleChangeRequest = useHMSStore(selectRoleChangeRequest); const name = useHMSStore(selectLocalPeerName); + const handleRoleChangeDenied = useCallback(request => { + ToastManager.addToast({ + title: `${request.peerName} denied your request to join the ${request.role.name} role`, + variant: 'error', + }); + }, []); + + const { sendEvent } = useCustomEvent({ + type: ROLE_CHANGE_DECLINED, + onEvent: handleRoleChangeDenied, + }); + useEffect(() => { if (!roleChangeRequest?.role || isHeadless) { return; @@ -58,14 +73,16 @@ export const RoleChangeRequestModal = () => { onOpenChange={async value => { if (!value) { await hmsActions.rejectChangeRole(roleChangeRequest); - await hmsActions.sendDirectMessage('', roleChangeRequest.requestedBy?.id, ROLE_CHANGE_DECLINED); + sendEvent({ ...roleChangeRequest, peerName: name }, { peerId: roleChangeRequest.requestedBy?.id }); await hmsActions.cancelMidCallPreview(); + await toggleHandRaise(); } }} body={body} onAction={() => { hmsActions.acceptChangeRole(roleChangeRequest); setPrevRole(currentRole); + toggleHandRaise(); }} actionText="Accept" /> diff --git a/yarn.lock b/yarn.lock index 472fcc8eb6..0a4e9f9be9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,10 +2,10 @@ # yarn lockfile v1 -"@100mslive/types-prebuilt@0.11.0": - version "0.11.0" - resolved "https://registry.yarnpkg.com/@100mslive/types-prebuilt/-/types-prebuilt-0.11.0.tgz#911755da1ae448b6ec7ec76cf12fbd1b66826b72" - integrity sha512-62FtDO1s1jcxMOq6VWMgRM7as2qfTxdeTGI8b2LlNUMVVprK2yXST9P1N7fx/8zZMTFwRj8twYb+LThRHVFfrw== +"@100mslive/types-prebuilt@0.12.0": + version "0.12.0" + resolved "https://registry.yarnpkg.com/@100mslive/types-prebuilt/-/types-prebuilt-0.12.0.tgz#7057a01251606a03d4c6ac2c10f0e18ba189e3e9" + integrity sha512-vhmvWzfZhpyaYFew8UNRBzK38S4YgqjwbYV+KGhWwxb9Ny69bD8pMoHGQG2or1Eog3KVeepg1qG31pH2HWo90A== "@aashutoshrathi/word-wrap@^1.2.3": version "1.2.6" @@ -5719,6 +5719,13 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== +"@types/react-window@^1.8.5": + version "1.8.5" + resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1" + integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@16 || 17 || 18", "@types/react@>=16", "@types/react@^18.1.0": version "18.2.20" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2" From b8c38144caddc2786c083a265791e8635dd72961 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Mon, 4 Sep 2023 22:55:12 +0530 Subject: [PATCH 12/13] fix: chat text colors --- .../roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx | 2 +- .../roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx index 861f91f3cf..542e75076a 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx @@ -271,7 +271,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi variant="xs" css={{ ml: '$4', - color: '$on_primary_medium', + color: '$on_surface_medium', flexShrink: 0, }} > diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx index 6a39b50ce4..f147841ade 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx @@ -130,6 +130,7 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti > {children}