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-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, + }; + } } 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", 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/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/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; } 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 ? ( 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 ? : } ) : ( - + )} 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]);