diff --git a/apps/100ms-custom-app/package.json b/apps/100ms-custom-app/package.json index 4b7c92b05a..e2c6d78b70 100644 --- a/apps/100ms-custom-app/package.json +++ b/apps/100ms-custom-app/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@100mslive/react-icons": "0.8.17", - "@100mslive/roomkit-react": "0.1.8", + "@100mslive/react-icons": "0.8.18", + "@100mslive/roomkit-react": "0.1.9", "axios": "^0.21.1", "js-cookies": "^1.0.4", "lodash.merge": "^4.6.2", diff --git a/apps/100ms-web/package.json b/apps/100ms-web/package.json index 3d0cdd64f7..4e138557b1 100644 --- a/apps/100ms-web/package.json +++ b/apps/100ms-web/package.json @@ -9,11 +9,11 @@ "src" ], "dependencies": { - "@100mslive/hls-player": "0.1.17", - "@100mslive/hms-virtual-background": "1.11.17", - "@100mslive/react-icons": "0.8.17", - "@100mslive/react-sdk": "0.8.17", - "@100mslive/roomkit-react": "0.1.8", + "@100mslive/hls-player": "0.1.18", + "@100mslive/hms-virtual-background": "1.11.18", + "@100mslive/react-icons": "0.8.18", + "@100mslive/react-sdk": "0.8.18", + "@100mslive/roomkit-react": "0.1.9", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", "@tldraw/tldraw": "^1.18.4", diff --git a/apps/100ms-web/yarn.lock b/apps/100ms-web/yarn.lock index acb285d016..79c486b32e 100644 --- a/apps/100ms-web/yarn.lock +++ b/apps/100ms-web/yarn.lock @@ -1136,22 +1136,6 @@ "@babel/parser" "^7.18.10" "@babel/types" "^7.18.10" -"@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.19.3": - version "7.19.3" - resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.3.tgz" - integrity sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ== - dependencies: - "@babel/code-frame" "^7.18.6" - "@babel/generator" "^7.19.3" - "@babel/helper-environment-visitor" "^7.18.9" - "@babel/helper-function-name" "^7.19.0" - "@babel/helper-hoist-variables" "^7.18.6" - "@babel/helper-split-export-declaration" "^7.18.6" - "@babel/parser" "^7.19.3" - "@babel/types" "^7.19.3" - debug "^4.1.0" - globals "^11.1.0" - "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.19.3", "@babel/types@^7.4.4": version "7.19.3" resolved "https://registry.npmjs.org/@babel/types/-/types-7.19.3.tgz" diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json index 1bd8bc6a9e..a044353e4b 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-player", - "version": "0.1.17", + "version": "0.1.18", "description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -31,7 +31,7 @@ "author": "100ms", "license": "MIT", "dependencies": { - "@100mslive/hls-stats": "0.2.17", + "@100mslive/hls-stats": "0.2.18", "eventemitter2": "^6.4.7", "hls.js": "1.4.12" } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index 3ac88efebb..c4fa78e910 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-stats", - "version": "0.2.17", + "version": "0.2.18", "description": "A simple library that provides stats for your hls stream", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/hms-noise-suppression/package.json b/packages/hms-noise-suppression/package.json index ed922782b0..e8ce8d2d3a 100644 --- a/packages/hms-noise-suppression/package.json +++ b/packages/hms-noise-suppression/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.17", + "version": "0.9.18", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", @@ -37,6 +37,6 @@ "author": "vishaldhull09", "module": "dist/index.js", "devDependencies": { - "@100mslive/hms-video": "0.9.17" + "@100mslive/hms-video": "0.9.18" } } diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json index d8797619f9..341d28aacf 100644 --- a/packages/hms-video-store/package.json +++ b/packages/hms-video-store/package.json @@ -1,5 +1,5 @@ { - "version": "0.10.17", + "version": "0.10.18", "license": "MIT", "main": "dist/index.cjs.js", "module": "dist/index.js", @@ -41,7 +41,7 @@ "author": "100ms", "sideEffects": false, "dependencies": { - "@100mslive/hms-video": "0.9.17", + "@100mslive/hms-video": "0.9.18", "eventemitter2": "^6.4.7", "immer": "^9.0.6", "reselect": "4.0.0", diff --git a/packages/hms-video-web/package.json b/packages/hms-video-web/package.json index a32a90b766..239dbf6ba3 100644 --- a/packages/hms-video-web/package.json +++ b/packages/hms-video-web/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hms-video", - "version": "0.9.17", + "version": "0.9.18", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", diff --git a/packages/hms-video-web/src/notification-manager/managers/RoomUpdateManager.ts b/packages/hms-video-web/src/notification-manager/managers/RoomUpdateManager.ts index 8523d51d18..ecb4673789 100644 --- a/packages/hms-video-web/src/notification-manager/managers/RoomUpdateManager.ts +++ b/packages/hms-video-web/src/notification-manager/managers/RoomUpdateManager.ts @@ -139,6 +139,7 @@ export class RoomUpdateManager { if (!notification?.variants) { return; } + room.hls.running = true; room.hls.variants = []; notification.variants.forEach((_: HLSVariant, index: number) => { room.hls.variants.push({ diff --git a/packages/hms-video-web/src/sdk/HMSPeerListIterator.ts b/packages/hms-video-web/src/sdk/HMSPeerListIterator.ts index c0e37c6cd3..601de44e59 100644 --- a/packages/hms-video-web/src/sdk/HMSPeerListIterator.ts +++ b/packages/hms-video-web/src/sdk/HMSPeerListIterator.ts @@ -13,6 +13,12 @@ export class HMSPeerListIterator { private defaultPaginationLimit = 10; constructor(private transport: ITransport, private store: IStore, private options?: HMSPeerListIteratorOptions) {} + private validateConnection() { + if (!this.transport || !this.store) { + throw Error(`Use usePaginatedParticipants or hmsActions.getPeerListIterator after preview or join has happened`); + } + } + hasNext(): boolean { return !this.isEnd; } @@ -22,6 +28,7 @@ export class HMSPeerListIterator { } async findPeers() { + this.validateConnection(); const response = await this.transport.findPeers({ ...(this.options || {}), limit: this.options?.limit || this.defaultPaginationLimit, @@ -31,6 +38,7 @@ export class HMSPeerListIterator { } async next() { + this.validateConnection(); let response: PeersIterationResponse; if (!this.iterator && !this.isEnd) { return await this.findPeers(); diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json index a178617e0b..ec10ef8cff 100755 --- a/packages/hms-virtual-background/package.json +++ b/packages/hms-virtual-background/package.json @@ -1,5 +1,5 @@ { - "version": "1.11.17", + "version": "1.11.18", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", @@ -30,7 +30,7 @@ "author": "ashish17", "module": "dist/index.js", "devDependencies": { - "@100mslive/hms-video": "0.9.17" + "@100mslive/hms-video": "0.9.18" }, "dependencies": { "@mediapipe/selfie_segmentation": "^0.1.1632777926", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index a213105ad1..e8a3b2b272 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "module": "dist/index.js", "typings": "dist/index.d.ts", - "version": "0.8.17", + "version": "0.8.18", "author": "100ms", "license": "MIT", "files": [ diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 7cdc6147fc..37a6025393 100644 --- a/packages/react-sdk/package.json +++ b/packages/react-sdk/package.json @@ -4,7 +4,7 @@ "main": "dist/index.cjs.js", "module": "dist/index.js", "typings": "dist/index.d.ts", - "version": "0.8.17", + "version": "0.8.18", "author": "100ms", "license": "MIT", "files": [ @@ -43,7 +43,7 @@ "react": ">=16.8 <19.0.0" }, "dependencies": { - "@100mslive/hms-video-store": "0.10.17", + "@100mslive/hms-video-store": "0.10.18", "react-resize-detector": "^7.0.0", "zustand": "^3.6.2" } diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json index 1977390889..c314d8cc69 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -10,7 +10,7 @@ "prebuilt", "roomkit" ], - "version": "0.1.8", + "version": "0.1.9", "author": "100ms", "license": "MIT", "files": [ @@ -76,10 +76,10 @@ "react": ">=17.0.2 <19.0.0" }, "dependencies": { - "@100mslive/hls-player": "0.1.17", - "@100mslive/hms-virtual-background": "1.11.17", - "@100mslive/react-icons": "0.8.17", - "@100mslive/react-sdk": "0.8.17", + "@100mslive/hls-player": "0.1.18", + "@100mslive/hms-virtual-background": "1.11.18", + "@100mslive/react-icons": "0.8.18", + "@100mslive/react-sdk": "0.8.18", "@100mslive/types-prebuilt": "0.12.0", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", diff --git a/packages/roomkit-react/src/Modal/Dialog.tsx b/packages/roomkit-react/src/Modal/Dialog.tsx index 72af7696e5..fe9c7cb2e0 100644 --- a/packages/roomkit-react/src/Modal/Dialog.tsx +++ b/packages/roomkit-react/src/Modal/Dialog.tsx @@ -34,7 +34,11 @@ const CustomDialogPortal = ({ children, container }: { children: ReactNode; cont } else if (!containerRef.current) { containerRef.current = document.body; } - return {children}; + return ( + + <>{children} + + ); }; export const Dialog = { diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx index 7e0a805ef3..4e6c5d5b42 100644 --- a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx +++ b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx @@ -58,10 +58,9 @@ export const useAppStateManager = () => { [HMSRoomState.Reconnecting, HMSRoomState.Connected].includes(prevRoomState) && [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState) ) { - redirectToLeave().then(() => { - const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING; - setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo); - }); + const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING; + setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo); + redirectToLeave(1000); // to clear toasts after 1 second } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) { setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING); } diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/useSidepane.js b/packages/roomkit-react/src/Prebuilt/components/AppData/useSidepane.js index b2cafb43ec..05a386a47b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AppData/useSidepane.js +++ b/packages/roomkit-react/src/Prebuilt/components/AppData/useSidepane.js @@ -39,20 +39,21 @@ export const useSidepaneToggle = sidepaneType => { }; export const usePollViewToggle = () => { + const hmsActions = useHMSActions(); const { view, setPollState } = usePollViewState(); const isOpen = useSidepaneState() === SIDE_PANE_OPTIONS.POLLS; - const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.POLLS); const togglePollView = useCallback( id => { id = typeof id === 'string' ? id : undefined; + const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ; setPollState({ [POLL_STATE.pollInView]: id, - [POLL_STATE.view]: id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ, + [POLL_STATE.view]: newView, }); - toggleSidepane(); + hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : ''); }, - [view, setPollState, isOpen, toggleSidepane], + [hmsActions, view, setPollState, isOpen], ); return togglePollView; diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx index 0a5a0fe9bf..b6991166ec 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx @@ -36,9 +36,11 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen const stopStream = async () => { try { - console.log('Stopping HLS stream'); - await hmsActions.stopHLSStreaming(); - ToastManager.addToast({ title: 'Stopping the stream' }); + if (permissions?.hlsStreaming) { + console.log('Stopping HLS stream'); + await hmsActions.stopHLSStreaming(); + ToastManager.addToast({ title: 'Stopping the stream' }); + } } catch (e) { console.error('Error stopping stream', e); ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' }); diff --git a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx index c95663e071..15b7a6cadc 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx @@ -1,27 +1,33 @@ import React, { useEffect, useState } from 'react'; +import { useMedia } from 'react-use'; import { RefreshIcon } from '@100mslive/react-icons'; import { Button } from '../../Button'; import { Box, Flex } from '../../Layout'; import { Dialog } from '../../Modal'; import { Text } from '../../Text'; +import { config as cssConfig } from '../../Theme'; export const MwebLandscapePrompt = () => { const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false); + const isLandscape = useMedia(cssConfig.media.ls); useEffect(() => { + if (!window.screen?.orientation) { + setShowMwebLandscapePrompt(isLandscape); + return; + } const handleRotation = () => { const angle = window.screen.orientation.angle; - const type = window.screen.orientation.type; + const type = window.screen.orientation.type || ''; // Angle check needed to diff bw mobile and desktop - setShowMwebLandscapePrompt(angle >= 90 && type.includes('landscape')); + setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape); }; handleRotation(); window.screen.orientation.addEventListener('change', handleRotation); - return () => { window.screen.orientation.removeEventListener('change', handleRotation); }; - }, []); + }, [isLandscape]); return ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx index 009232a84b..c23d5b2688 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx @@ -146,7 +146,7 @@ export function Notifications() { case HMSNotificationTypes.POLL_STARTED: if (notification.data.startedBy !== localPeerID) { - const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)); + const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant'; ToastManager.addToast({ title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`, action: ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx index 725bc47fda..af27264a39 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx @@ -172,7 +172,11 @@ const AddMenu = () => { }; const PrevMenu = () => { - const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped'); + // filter polls that have been started or stopped sorted by when they were created and their live state + const polls = useHMSStore(selectPolls) + ?.filter(poll => poll.state === 'started' || poll.state === 'stopped') + .sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0)) + .sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0)); return polls?.length ? (