From 7702269af8b8b7a39b5d7d22815ecc125f9b6f77 Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Tue, 12 Sep 2023 14:34:21 +0530 Subject: [PATCH 1/6] fix: overlay chat repostion on tapping --- .../roomkit-react/src/Prebuilt/components/Chat/Chat.jsx | 4 +--- .../src/Prebuilt/components/SidePaneTabs.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx index 2db74186d0..4b4427ee1b 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/Chat.jsx @@ -66,7 +66,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => { ) : null; }; -export const Chat = ({ screenType, hideControls = false }) => { +export const Chat = ({ screenType }) => { const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT); const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID); const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE); @@ -122,8 +122,6 @@ export const Chat = ({ screenType, hideControls = false }) => { css={{ size: '100%', gap: '$4', - marginTop: hideControls && elements?.chat?.is_overlay ? '$17' : '0', - transition: 'margin 0.3s ease-in-out', }} > {isMobile && elements?.chat?.is_overlay ? null : ( diff --git a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx index bd28384167..58acb3bb16 100644 --- a/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/SidePaneTabs.tsx @@ -62,10 +62,12 @@ export const SidePaneTabs = React.memo<{ css={{ color: '$on_primary_high', h: '100%', + marginTop: hideControls && isOverlayChat ? '$17' : '0', + transition: 'margin 0.3s ease-in-out', }} > {isOverlayChat && isChatOpen && showChat ? ( - + ) : ( <> {hideTabs ? ( @@ -74,7 +76,7 @@ export const SidePaneTabs = React.memo<{ {showChat ? 'Chat' : `Participants (${peerCount})`} - {showChat ? : } + {showChat ? : } ) : ( - + )} From ca7550db3a40a8b3c8ce903bb032b67e7a30e982 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Tue, 12 Sep 2023 18:45:18 +0530 Subject: [PATCH 2/6] fix: show end session if endRoom permission exists --- .../components/Leave/DesktopLeaveRoom.tsx | 16 +++++++--------- .../src/Prebuilt/components/Leave/LeaveRoom.tsx | 8 ++++++-- .../Prebuilt/components/Leave/MwebLeaveRoom.tsx | 11 +++++++---- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx index 20c52da8dc..32199ba117 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx @@ -16,9 +16,11 @@ import { useDropdownList } from '../hooks/useDropdownList'; export const DesktopLeaveRoom = ({ leaveRoom, screenType, + endRoom, }: { leaveRoom: (args: { endstream: boolean }) => void; screenType: keyof ConferencingScreen; + endRoom: () => void; }) => { const [open, setOpen] = useState(false); const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false); @@ -26,7 +28,7 @@ export const DesktopLeaveRoom = ({ const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const { isStreamingOn } = useRecordingStreaming(); - const showStream = permissions?.hlsStreaming && isStreamingOn; + const showStream = screenType !== 'hls_live_streaming' && isStreamingOn; useDropdownList({ open: open || showEndStreamAlert || showLeaveRoomAlert, name: 'LeaveRoom' }); @@ -36,7 +38,7 @@ export const DesktopLeaveRoom = ({ return ( - {permissions.hlsStreaming ? ( + {screenType !== 'hls_live_streaming' && (permissions?.hlsStreaming || permissions?.endRoom) ? ( { - if (screenType === 'hls_live_streaming') { - setShowLeaveRoomAlert(true); - } else { - leaveRoom({ endstream: false }); - } + leaveRoom({ endstream: false }); }} > @@ -94,7 +92,7 @@ export const DesktopLeaveRoom = ({ css={{ p: 0 }} /> - {isStreamingOn && permissions?.hlsStreaming ? ( + {permissions?.endRoom || permissions?.hlsStreaming ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx index 8fcc658dae..8fcfcae662 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx @@ -46,6 +46,10 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' }); } }; + const endRoom = () => { + hmsActions.endRoom(false, 'End Room'); + redirectToLeave(); + }; const leaveRoom = async ({ endstream = false }) => { if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) { @@ -59,8 +63,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen return null; } return isMobile ? ( - + ) : ( - + ); }; diff --git a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx index 84dbe756db..fabd3d70b4 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx @@ -17,9 +17,11 @@ import { useDropdownList } from '../hooks/useDropdownList'; export const MwebLeaveRoom = ({ leaveRoom, screenType, + endRoom, }: { leaveRoom: (args: { endstream: boolean }) => void; screenType: keyof ConferencingScreen; + endRoom: () => void; }) => { const [open, setOpen] = useState(false); const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false); @@ -27,8 +29,8 @@ export const MwebLeaveRoom = ({ const isConnected = useHMSStore(selectIsConnectedToRoom); const permissions = useHMSStore(selectPermissions); const { isStreamingOn } = useRecordingStreaming(); + const showStream = screenType !== 'hls_live_streaming' && isStreamingOn; - const showStream = permissions?.hlsStreaming && isStreamingOn; useDropdownList({ open, name: 'LeaveRoom' }); if (!permissions || !isConnected) { @@ -37,7 +39,7 @@ export const MwebLeaveRoom = ({ return ( - {permissions?.hlsStreaming ? ( + {screenType !== 'hls_live_streaming' ? ( leaveRoom({ endstream: false })} css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }} /> - {isStreamingOn && permissions?.hlsStreaming ? ( + + {permissions?.endRoom || permissions?.hlsStreaming ? ( From 71f7e1f2871c3fdff7425a1d5ad6afbfaae3c8dd Mon Sep 17 00:00:00 2001 From: amar-1995 <110378139+amar-1995@users.noreply.github.com> Date: Tue, 12 Sep 2023 21:58:43 +0530 Subject: [PATCH 3/6] fix: 9:16 aspect ratio is not working in mweb (#1909) * fix: 9:16 aspect ratio is not working in mweb * fix: cleanup of code * fix: name typo * Update packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts --------- Co-authored-by: Saikat Mitra --- .../media/settings/HMSVideoTrackSettings.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts b/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts index 10656eccb3..1e1a0aa81c 100644 --- a/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts +++ b/packages/hms-video-web/src/media/settings/HMSVideoTrackSettings.ts @@ -1,5 +1,6 @@ import { IAnalyticsPropertiesProvider } from '../../analytics/IAnalyticsPropertiesProvider'; import { HMSFacingMode, HMSVideoCodec, HMSVideoTrackSettings as IHMSVideoTrackSettings } from '../../interfaces'; +import { isMobile } from '../../utils/support'; export class HMSVideoTrackSettingsBuilder { private _width?: number = 320; @@ -115,9 +116,10 @@ export class HMSVideoTrackSettings implements IHMSVideoTrackSettings, IAnalytics if (isScreenShare) { dimensionConstraintKey = 'max'; } + const aspectRatio = this.improviseConstraintsAspect(); return { - width: { [dimensionConstraintKey]: this.width }, - height: { [dimensionConstraintKey]: this.height }, + width: { [dimensionConstraintKey]: aspectRatio.width }, + height: { [dimensionConstraintKey]: aspectRatio.height }, frameRate: this.maxFramerate, deviceId: this.deviceId, facingMode: this.facingMode, @@ -134,4 +136,18 @@ export class HMSVideoTrackSettings implements IHMSVideoTrackSettings, IAnalytics facingMode: this.facingMode, }; } + + // reverse the height and width if mobile as mobile web browsers override the height and width basis orientation + private improviseConstraintsAspect(): Partial { + if (isMobile() && this.height && this.width && this.height > this.width) { + return { + width: this.height, + height: this.width, + }; + } + return { + width: this.width, + height: this.height, + }; + } } From 1b53dc986be5fdca9e73d5d797d227dc7ee6e0d3 Mon Sep 17 00:00:00 2001 From: Saikat Mitra Date: Wed, 13 Sep 2023 11:04:01 +0530 Subject: [PATCH 4/6] fix: getting error on leaving room on prebuilt page --- .../src/Prebuilt/components/conference.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx index c2a13e3711..93c609dea8 100644 --- a/packages/roomkit-react/src/Prebuilt/components/conference.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/conference.jsx @@ -49,6 +49,7 @@ const Conference = () => { setHideControls(value => !value); } }; + const autoRoomJoined = useRef(isPreviewScreenEnabled); useEffect(() => { let timeout = null; @@ -84,7 +85,13 @@ const Conference = () => { }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]); useEffect(() => { - if (authTokenInAppData && !isConnectedToRoom && !isPreviewScreenEnabled && roomState !== HMSRoomState.Connecting) { + if ( + authTokenInAppData && + !isConnectedToRoom && + !isPreviewScreenEnabled && + roomState !== HMSRoomState.Connecting && + !autoRoomJoined.current + ) { hmsActions .join({ userName, @@ -97,6 +104,7 @@ const Conference = () => { }, }) .catch(console.error); + autoRoomJoined.current = true; } }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]); From 81594f4f7cfb483f3a7b004aec4aed5b37689b82 Mon Sep 17 00:00:00 2001 From: Kaustubh Kumar Date: Wed, 13 Sep 2023 11:25:52 +0530 Subject: [PATCH 5/6] fix: sticky top, standard button tokens --- packages/roomkit-react/src/Button/Button.tsx | 12 ++++++------ .../Prebuilt/components/Chat/useEmojiPickerStyles.js | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/roomkit-react/src/Button/Button.tsx b/packages/roomkit-react/src/Button/Button.tsx index 5bec1fc157..9763a454e8 100644 --- a/packages/roomkit-react/src/Button/Button.tsx +++ b/packages/roomkit-react/src/Button/Button.tsx @@ -139,12 +139,12 @@ const StyledButton = styled('button', { variants: { variant: { standard: getButtonVariants( - '$secondary_default', - '$secondary_bright', - '$secondary_dim', - '$secondary_disabled', - '$on_secondary_high', - '$on_secondary_low', + '$surface_brighter', + '$surface_bright', + '$surface_default', + '$surface_dim', + '$on_surface_high', + '$on_surface_low', ), danger: getButtonVariants( '$alert_error_default', diff --git a/packages/roomkit-react/src/Prebuilt/components/Chat/useEmojiPickerStyles.js b/packages/roomkit-react/src/Prebuilt/components/Chat/useEmojiPickerStyles.js index aa2cc22889..efa9f0f982 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Chat/useEmojiPickerStyles.js +++ b/packages/roomkit-react/src/Prebuilt/components/Chat/useEmojiPickerStyles.js @@ -18,6 +18,7 @@ export const useEmojiPickerStyles = showing => { font-family: var(--hms-ui-fonts-sans); } .sticky { + top: 0.25rem; background-color: var(--hms-ui-colors-surface_bright); margin-top: 0.5rem; } From 1724f0ddfffa3cd09487ab41c065c426c70c2bc3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 13 Sep 2023 11:26:32 +0530 Subject: [PATCH 6/6] build: update versions for alpha release --- apps/100ms-custom-app/package.json | 4 ++-- apps/100ms-web/package.json | 10 +++++----- packages/hls-player/package.json | 4 ++-- packages/hls-stats/package.json | 2 +- packages/hms-noise-suppression/package.json | 4 ++-- packages/hms-video-store/package.json | 4 ++-- packages/hms-video-web/package.json | 2 +- packages/hms-virtual-background/package.json | 4 ++-- packages/react-icons/package.json | 2 +- packages/react-sdk/package.json | 4 ++-- packages/roomkit-react/package.json | 10 +++++----- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/apps/100ms-custom-app/package.json b/apps/100ms-custom-app/package.json index 837d8d91f7..f97e6411ed 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.15-alpha.2", - "@100mslive/roomkit-react": "0.1.6-alpha.2", + "@100mslive/react-icons": "0.8.15-alpha.3", + "@100mslive/roomkit-react": "0.1.6-alpha.3", "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 b7f5718953..9c92665482 100644 --- a/apps/100ms-web/package.json +++ b/apps/100ms-web/package.json @@ -9,11 +9,11 @@ "src" ], "dependencies": { - "@100mslive/hls-player": "0.1.15-alpha.2", - "@100mslive/hms-virtual-background": "1.11.15-alpha.2", - "@100mslive/react-icons": "0.8.15-alpha.2", - "@100mslive/react-sdk": "0.8.15-alpha.2", - "@100mslive/roomkit-react": "0.1.6-alpha.2", + "@100mslive/hls-player": "0.1.15-alpha.3", + "@100mslive/hms-virtual-background": "1.11.15-alpha.3", + "@100mslive/react-icons": "0.8.15-alpha.3", + "@100mslive/react-sdk": "0.8.15-alpha.3", + "@100mslive/roomkit-react": "0.1.6-alpha.3", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", "@tldraw/tldraw": "^1.18.4", diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json index 7e3069f621..5904bfc5cd 100644 --- a/packages/hls-player/package.json +++ b/packages/hls-player/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-player", - "version": "0.1.15-alpha.2", + "version": "0.1.15-alpha.3", "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.15-alpha.2", + "@100mslive/hls-stats": "0.2.15-alpha.3", "eventemitter2": "^6.4.7", "hls.js": "1.4.3" } diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json index 6876479ee0..afbdabd11d 100644 --- a/packages/hls-stats/package.json +++ b/packages/hls-stats/package.json @@ -1,6 +1,6 @@ { "name": "@100mslive/hls-stats", - "version": "0.2.15-alpha.2", + "version": "0.2.15-alpha.3", "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 b53ed786e2..6ea9be4a6c 100644 --- a/packages/hms-noise-suppression/package.json +++ b/packages/hms-noise-suppression/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.15-alpha.2", + "version": "0.9.15-alpha.3", "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.15-alpha.2" + "@100mslive/hms-video": "0.9.15-alpha.3" } } diff --git a/packages/hms-video-store/package.json b/packages/hms-video-store/package.json index 34d88ca6a3..c4d0dbf7f0 100644 --- a/packages/hms-video-store/package.json +++ b/packages/hms-video-store/package.json @@ -1,5 +1,5 @@ { - "version": "0.10.15-alpha.2", + "version": "0.10.15-alpha.3", "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.15-alpha.2", + "@100mslive/hms-video": "0.9.15-alpha.3", "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 7016b432a0..cf84195234 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.15-alpha.2", + "version": "0.9.15-alpha.3", "license": "MIT", "main": "dist/index.cjs.js", "typings": "dist/index.d.ts", diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json index a2b2461b0e..972207b6e8 100755 --- a/packages/hms-virtual-background/package.json +++ b/packages/hms-virtual-background/package.json @@ -1,5 +1,5 @@ { - "version": "1.11.15-alpha.2", + "version": "1.11.15-alpha.3", "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.15-alpha.2" + "@100mslive/hms-video": "0.9.15-alpha.3" }, "dependencies": { "@mediapipe/selfie_segmentation": "^0.1.1632777926", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index d530889f3a..3273497bc8 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.15-alpha.2", + "version": "0.8.15-alpha.3", "author": "100ms", "license": "MIT", "files": [ diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json index 5de5b480a4..6ef814c75e 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.15-alpha.2", + "version": "0.8.15-alpha.3", "author": "100ms", "license": "MIT", "files": [ @@ -43,7 +43,7 @@ "react": ">=16.8 <19.0.0" }, "dependencies": { - "@100mslive/hms-video-store": "0.10.15-alpha.2", + "@100mslive/hms-video-store": "0.10.15-alpha.3", "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 0d0c0ed824..4aa9523579 100644 --- a/packages/roomkit-react/package.json +++ b/packages/roomkit-react/package.json @@ -10,7 +10,7 @@ "prebuilt", "roomkit" ], - "version": "0.1.6-alpha.2", + "version": "0.1.6-alpha.3", "author": "100ms", "license": "MIT", "files": [ @@ -76,10 +76,10 @@ "react": ">=17.0.2 <19.0.0" }, "dependencies": { - "@100mslive/hls-player": "0.1.15-alpha.2", - "@100mslive/hms-virtual-background": "1.11.15-alpha.2", - "@100mslive/react-icons": "0.8.15-alpha.2", - "@100mslive/react-sdk": "0.8.15-alpha.2", + "@100mslive/hls-player": "0.1.15-alpha.3", + "@100mslive/hms-virtual-background": "1.11.15-alpha.3", + "@100mslive/react-icons": "0.8.15-alpha.3", + "@100mslive/react-sdk": "0.8.15-alpha.3", "@100mslive/types-prebuilt": "0.12.0", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1",