diff --git a/examples/prebuilt-react-integration/package.json b/examples/prebuilt-react-integration/package.json
index fc5b10ead4..484838a0d1 100644
--- a/examples/prebuilt-react-integration/package.json
+++ b/examples/prebuilt-react-integration/package.json
@@ -10,7 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
- "@100mslive/roomkit-react": "0.3.3",
+ "@100mslive/roomkit-react": "0.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
diff --git a/packages/hls-player/package.json b/packages/hls-player/package.json
index f26e100465..a9802f96a8 100644
--- a/packages/hls-player/package.json
+++ b/packages/hls-player/package.json
@@ -1,6 +1,6 @@
{
"name": "@100mslive/hls-player",
- "version": "0.3.3",
+ "version": "0.3.4",
"description": "HLS client library which uses HTML5 Video element and Media Source Extension for playback",
"main": "dist/index.cjs.js",
"module": "dist/index.js",
@@ -36,7 +36,7 @@
"author": "100ms",
"license": "MIT",
"dependencies": {
- "@100mslive/hls-stats": "0.4.3",
+ "@100mslive/hls-stats": "0.4.4",
"eventemitter2": "^6.4.9",
"hls.js": "1.4.12"
}
diff --git a/packages/hls-stats/package.json b/packages/hls-stats/package.json
index a7d782e43b..a4cd07224c 100644
--- a/packages/hls-stats/package.json
+++ b/packages/hls-stats/package.json
@@ -1,6 +1,6 @@
{
"name": "@100mslive/hls-stats",
- "version": "0.4.3",
+ "version": "0.4.4",
"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-video-store/package.json b/packages/hms-video-store/package.json
index 7fc3032ae6..a0f14b6316 100644
--- a/packages/hms-video-store/package.json
+++ b/packages/hms-video-store/package.json
@@ -1,5 +1,5 @@
{
- "version": "0.12.3",
+ "version": "0.12.4",
"license": "MIT",
"repository": {
"type": "git",
diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json
index 62b3478ae3..a4a48d8352 100755
--- a/packages/hms-virtual-background/package.json
+++ b/packages/hms-virtual-background/package.json
@@ -1,5 +1,5 @@
{
- "version": "1.13.3",
+ "version": "1.13.4",
"license": "MIT",
"name": "@100mslive/hms-virtual-background",
"author": "100ms",
@@ -32,10 +32,10 @@
"format": "prettier --write src/**/*.ts"
},
"peerDependencies": {
- "@100mslive/hms-video-store": "0.12.3"
+ "@100mslive/hms-video-store": "0.12.4"
},
"devDependencies": {
- "@100mslive/hms-video-store": "0.12.3"
+ "@100mslive/hms-video-store": "0.12.4"
},
"dependencies": {
"@mediapipe/selfie_segmentation": "^0.1.1632777926",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 696c5a3588..904dba1b9e 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.10.3",
+ "version": "0.10.4",
"author": "100ms",
"license": "MIT",
"repository": {
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
index 64ee00917b..d4e1b19e42 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.10.3",
+ "version": "0.10.4",
"author": "100ms",
"license": "MIT",
"repository": {
@@ -48,7 +48,7 @@
"react": ">=16.8 <19.0.0"
},
"dependencies": {
- "@100mslive/hms-video-store": "0.12.3",
+ "@100mslive/hms-video-store": "0.12.4",
"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 55a6b972c9..26ce0e3684 100644
--- a/packages/roomkit-react/package.json
+++ b/packages/roomkit-react/package.json
@@ -10,7 +10,7 @@
"prebuilt",
"roomkit"
],
- "version": "0.3.3",
+ "version": "0.3.4",
"author": "100ms",
"license": "MIT",
"repository": {
@@ -82,11 +82,11 @@
"react": ">=17.0.2 <19.0.0"
},
"dependencies": {
- "@100mslive/hls-player": "0.3.3",
+ "@100mslive/hls-player": "0.3.4",
"@100mslive/hms-noise-cancellation": "0.0.1",
- "@100mslive/hms-virtual-background": "1.13.3",
- "@100mslive/react-icons": "0.10.3",
- "@100mslive/react-sdk": "0.10.3",
+ "@100mslive/hms-virtual-background": "1.13.4",
+ "@100mslive/react-icons": "0.10.4",
+ "@100mslive/react-sdk": "0.10.4",
"@100mslive/types-prebuilt": "0.12.8",
"@emoji-mart/data": "^1.0.6",
"@emoji-mart/react": "^1.0.1",
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
index ddaaf9b58e..52988c7df1 100644
--- a/packages/roomkit-react/src/Prebuilt/App.tsx
+++ b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -1,6 +1,7 @@
import React, { MutableRefObject, useEffect, useRef } from 'react';
import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
+import { match } from 'ts-pattern';
import {
HMSActions,
HMSReactiveStore,
@@ -251,12 +252,10 @@ const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
useAutoStartStreaming();
- if (activeState === PrebuiltStates.PREVIEW && isPreviewScreenEnabled) {
- return ;
- } else if (activeState === PrebuiltStates.LEAVE && isLeaveScreenEnabled) {
- return ;
- }
- return ;
+ return match({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled })
+ .with({ activeState: PrebuiltStates.PREVIEW, isPreviewScreenEnabled: true }, () => )
+ .with({ activeState: PrebuiltStates.LEAVE, isLeaveScreenEnabled: true }, () => )
+ .otherwise(() => );
};
const BackSwipe = () => {
diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx
index 79f43bed4e..9ac776e607 100644
--- a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx
+++ b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx
@@ -1,5 +1,6 @@
import React, { useContext, useEffect } from 'react';
import { usePreviousDistinct } from 'react-use';
+import { match, P } from 'ts-pattern';
import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
import { VBHandler } from './components/VirtualBackground/VBHandler';
import { useRoomLayout } from './provider/roomLayoutProvider';
@@ -52,20 +53,32 @@ export const useAppStateManager = () => {
if (!roomLayout) {
return;
}
- if (roomState === HMSRoomState.Connected) {
- setActiveState(PrebuiltStates.MEETING);
- } else if (
- prevRoomState &&
- [HMSRoomState.Reconnecting, HMSRoomState.Connected, HMSRoomState.Connecting].includes(prevRoomState) &&
- [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState)
- ) {
- const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
- setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
- VBHandler.reset();
- redirectToLeave(1000); // to clear toasts after 1 second
- } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
- setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
- }
+ match([roomState, prevRoomState])
+ .with([HMSRoomState.Connected, P.any], () => setActiveState(PrebuiltStates.MEETING))
+ .with(
+ [HMSRoomState.Disconnecting, HMSRoomState.Connected],
+ [HMSRoomState.Disconnecting, HMSRoomState.Connecting],
+ [HMSRoomState.Disconnecting, HMSRoomState.Reconnecting],
+ [HMSRoomState.Disconnected, HMSRoomState.Connected],
+ [HMSRoomState.Disconnected, HMSRoomState.Connecting],
+ [HMSRoomState.Disconnected, HMSRoomState.Reconnecting],
+ () => {
+ setActiveState(
+ match({ isLeaveScreenEnabled, isPreviewScreenEnabled })
+ .with({ isLeaveScreenEnabled: true }, () => PrebuiltStates.LEAVE)
+ .with({ isPreviewScreenEnabled: true }, () => PrebuiltStates.PREVIEW)
+ .otherwise(() => PrebuiltStates.MEETING),
+ );
+ VBHandler.reset();
+ redirectToLeave(1000); // to clear toasts after 1 second
+ },
+ )
+ .with([HMSRoomState.Disconnected, P.nullish], () => {
+ setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
+ })
+ .otherwise(() => {
+ // do nothing
+ });
}, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
return { activeState, rejoin };
diff --git a/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx b/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx
index 2cd66782eb..80e1a47ce5 100644
--- a/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx
+++ b/packages/roomkit-react/src/Prebuilt/components/AuthToken.jsx
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useSessionStorage } from 'react-use';
+import { match } from 'ts-pattern';
import { v4 as uuid } from 'uuid';
import { useHMSActions } from '@100mslive/react-sdk';
import { Dialog } from '../../Modal';
@@ -88,38 +89,38 @@ const convertError = error => {
'If you think this is a mistake on our side, please reach out to us over Discord:',
'https://discord.com/invite/kGdmszyzq2',
);
- if (error.action === 'GET_TOKEN' && error.code === 403) {
- return {
+ return match([error.action, error.code])
+ .with(['GET_TOKEN', 403], () => ({
title: 'Psst! This room is currently inactive.',
body: 'Please feel free to join another open room for more conversations. Thanks for stopping by!',
- };
- } else if (error.action === 'GET_TOKEN' && error.code === 404) {
- return {
+ }))
+
+ .with(['GET_TOKEN', 404], () => ({
title: 'Room code does not exist',
body: 'We could not find a room code corresponding to this link.',
- };
- } else if (error.action === 'GET_TOKEN' && error.code === 2003) {
- return {
+ }))
+ .with(['GET_TOKEN', 2003], () => ({
title: 'Endpoint is not reachable',
body: `Endpoint is not reachable. ${error.description}.`,
- };
- } else if (error.response && error.response.status === 404) {
- return {
- title: 'Room does not exist',
- body: 'We could not find a room corresponding to this link.',
- };
- } else if (error.response && error.response.status === 403) {
- return {
- title: 'Accessing room using this link format is disabled',
- body: 'You can re-enable this from the developer section in Dashboard.',
- };
- } else {
- console.error('Token API Error', error);
- return {
- title: 'Error fetching token',
- body: 'An error occurred while fetching the app token. Please look into logs for more details.',
- };
- }
+ }))
+ .otherwise(() =>
+ match(error.response?.status)
+ .with(404, () => ({
+ title: 'Room does not exist',
+ body: 'We could not find a room corresponding to this link.',
+ }))
+ .with(403, () => ({
+ title: 'Accessing room using this link format is disabled',
+ body: 'You can re-enable this from the developer section in Dashboard.',
+ }))
+ .otherwise(() => {
+ console.error('Token API Error', error);
+ return {
+ title: 'Error fetching token',
+ body: 'An error occurred while fetching the app token. Please look into logs for more details.',
+ };
+ }),
+ );
};
export default AuthToken;
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
index 95bae82e0a..11588225c3 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx
@@ -70,20 +70,6 @@ export const VideoStreamingSection = ({
return null;
}
- let ViewComponent;
- if (screenType === 'hls_live_streaming') {
- ViewComponent = ;
- } else if (localPeerRole === waitingViewerRole) {
- ViewComponent = ;
- } else if (pdfAnnotatorActive) {
- ViewComponent = ;
- } else if (urlToIframe) {
- ViewComponent = ;
- } else {
- //@ts-ignore
- ViewComponent = ;
- }
-
return (
}>
'column')
.otherwise(() => 'row')}
>
- {ViewComponent}
+ {match({ screenType, localPeerRole, pdfAnnotatorActive, urlToIframe })
+ .with(
+ {
+ screenType: 'hls_live_streaming',
+ },
+ () => ,
+ )
+ .when(
+ ({ localPeerRole }) => localPeerRole === waitingViewerRole,
+ () => ,
+ )
+ .with({ pdfAnnotatorActive: true }, () => )
+ .when(
+ ({ urlToIframe }) => !!urlToIframe,
+ () => ,
+ )
+
+ .otherwise(() => {
+ // @ts-ignore
+ return ;
+ })}
+