@whereby.com/browser-sdk 3.12.24 → 3.13.0

package/dist/react/index.cjs

@@ -1,9 +1,7 @@
 'use strict';
 
 var React = require('react');
-var reactRedux = require('react-redux');
 var core = require('@whereby.com/core');
-var toolkit = require('@reduxjs/toolkit');
 var runes = require('runes');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 
@@ -28,13 +26,14 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 
 const WherebyContext = React__namespace.createContext(null);
-reactRedux.createStoreHook(WherebyContext);
-const useDispatch = reactRedux.createDispatchHook(WherebyContext);
-const useSelector = reactRedux.createSelectorHook(WherebyContext);
 function Provider({ children }) {
-    const services = core.createServices();
-    const store = core.createStore({ injectServices: services });
-    return (React__namespace.createElement(reactRedux.Provider, { context: WherebyContext, store: store }, children));
+    const client = React__namespace.useMemo(() => new core.WherebyClient(), []);
+    React__namespace.useEffect(() => {
+        return () => {
+            client.destroy();
+        };
+    }, [client]);
+    return React__namespace.createElement(WherebyContext.Provider, { value: client }, children);
 }
 
 /******************************************************************************
@@ -71,13 +70,21 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const useAppDispatch = useDispatch.withTypes();
-const useAppSelector = useSelector.withTypes();
-
 const useAudioElement = ({ stream, muted }) => {
-    const audioEl = React.useRef(null);
-    const currentSpeakerId = useAppSelector(core.selectCurrentSpeakerDeviceId);
-    React.useEffect(() => {
+    var _a;
+    const audioEl = React__namespace.useRef(null);
+    const client = (_a = React__namespace.useContext(WherebyContext)) === null || _a === void 0 ? void 0 : _a.getLocalMedia();
+    const [currentSpeakerId, setCurrentSpeakerId] = React__namespace.useState();
+    const listener = React__namespace.useCallback((speakerId) => {
+        setCurrentSpeakerId(speakerId);
+    }, []);
+    React__namespace.useEffect(() => {
+        client === null || client === void 0 ? void 0 : client.addListener(core.CURRENT_SPEAKER_CHANGED, listener);
+        return () => {
+            client === null || client === void 0 ? void 0 : client.removeListener(core.CURRENT_SPEAKER_CHANGED, listener);
+        };
+    }, [client]);
+    React__namespace.useEffect(() => {
         if (!audioEl.current || muted || !stream || !currentSpeakerId) {
             return;
         }
@@ -92,8 +99,9 @@ const useAudioElement = ({ stream, muted }) => {
 };
 
 const VideoView = React__namespace.forwardRef((_a, ref) => {
+    var _b;
     var { muted, mirror = false, stream, onVideoResize } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onVideoResize"]);
-    const dispatch = useAppDispatch();
+    const client = (_b = React__namespace.useContext(WherebyContext)) === null || _b === void 0 ? void 0 : _b.getRoomConnection();
     const videoEl = React__namespace.useRef(null);
     const audioEl = useAudioElement({ muted, stream });
     React__namespace.useImperativeHandle(ref, () => {
@@ -119,11 +127,7 @@ const VideoView = React__namespace.forwardRef((_a, ref) => {
             if (videoEl.current && (stream === null || stream === void 0 ? void 0 : stream.id)) {
                 const width = videoEl.current.clientWidth;
                 const height = videoEl.current.clientHeight;
-                dispatch(core.doRtcReportStreamResolution({
-                    streamId: stream.id,
-                    width,
-                    height,
-                }));
+                client === null || client === void 0 ? void 0 : client.reportStreamResolution(stream.id, width, height);
                 if (onVideoResize) {
                     onVideoResize({
                         width,
@@ -155,35 +159,24 @@ const VideoView = React__namespace.forwardRef((_a, ref) => {
 });
 VideoView.displayName = "VideoView";
 
-const selectRoomConnectionState = toolkit.createSelector(core.selectChatMessages, core.selectCloudRecordingRaw, core.selectBreakoutCurrentGroup, core.selectBreakoutActive, core.selectBreakoutGroupedParticipants, core.selectAllClientViewsInCurrentGroup, core.selectLocalParticipantRaw, core.selectLocalMediaStream, core.selectRemoteParticipants, core.selectScreenshares, core.selectRoomConnectionStatus, core.selectStreamingRaw, core.selectWaitingParticipants, core.selectNotificationsEmitter, core.selectSpotlightedClientViews, (chatMessages, cloudRecording, breakoutCurrentGroup, breakoutActive, breakoutGroupedParticipants, clientViewsInCurrentGroup, localParticipant, localMediaStream, remoteParticipants, screenshares, connectionStatus, streaming, waitingParticipants, notificationsEmitter, spotlightedClientViews) => {
-    const state = {
-        chatMessages,
-        cloudRecording: cloudRecording.isRecording ? { status: "recording" } : undefined,
-        breakout: {
-            isActive: breakoutActive,
-            currentGroup: breakoutCurrentGroup,
-            groupedParticipants: breakoutGroupedParticipants,
-            participantsInCurrentGroup: clientViewsInCurrentGroup,
-        },
-        connectionStatus,
-        events: notificationsEmitter,
-        liveStream: streaming.isStreaming
-            ? {
-                status: "streaming",
-                startedAt: streaming.startedAt,
-            }
-            : undefined,
-        localScreenshareStatus: localParticipant.isScreenSharing ? "active" : undefined,
-        localParticipant: Object.assign(Object.assign({}, localParticipant), { stream: localMediaStream }),
-        remoteParticipants,
-        screenshares,
-        waitingParticipants,
-        spotlightedParticipants: spotlightedClientViews,
-    };
-    return state;
-});
+const browserSdkVersion = "3.13.0";
 
-const browserSdkVersion = "3.12.24";
+const initialState$1 = {
+    chatMessages: [],
+    cloudRecording: undefined,
+    breakout: {
+        isActive: false,
+        currentGroup: null,
+        groupedParticipants: [],
+        participantsInCurrentGroup: [],
+    },
+    localParticipant: undefined,
+    remoteParticipants: [],
+    screenshares: [],
+    connectionStatus: "ready",
+    waitingParticipants: [],
+    spotlightedParticipants: [],
+};
 
 const defaultRoomConnectionOptions = {
     localMediaOptions: {
@@ -192,8 +185,12 @@ const defaultRoomConnectionOptions = {
     },
 };
 function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectionOptions) {
-    const dispatch = useAppDispatch();
-    const roomConnectionState = useAppSelector(selectRoomConnectionState);
+    var _a;
+    const client = (_a = React__namespace.useContext(WherebyContext)) === null || _a === void 0 ? void 0 : _a.getRoomConnection();
+    const [roomConnectionState, setRoomConnectionState] = React__namespace.useState(() => initialState$1);
+    if (!client) {
+        throw new Error("WherebyClient is not initialized. Please wrap your component with WherebyProvider.");
+    }
     const roomConfig = React__namespace.useMemo(() => {
         const url = new URL(roomUrl);
         const searchParams = new URLSearchParams(url.search);
@@ -208,36 +205,45 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
         };
     }, [roomUrl, roomConnectionOptions]);
     React__namespace.useEffect(() => {
+        const unsubscribe = client.subscribe((state) => {
+            setRoomConnectionState((prev) => (Object.assign(Object.assign({}, prev), state)));
+        });
+        const eventEmitter = client.getNotificationsEventEmitter();
+        setRoomConnectionState((prev) => (Object.assign(Object.assign({}, prev), { events: eventEmitter })));
         return () => {
-            dispatch(core.doAppStop());
+            unsubscribe();
+            client.leaveRoom();
         };
     }, []);
-    const sendChatMessage = React__namespace.useCallback((text) => dispatch(core.doSendChatMessage({ text })), [dispatch]);
-    const knock = React__namespace.useCallback(() => dispatch(core.doKnockRoom()), [dispatch]);
-    const setDisplayName = React__namespace.useCallback((displayName) => dispatch(core.doSetDisplayName({ displayName })), [dispatch]);
-    const toggleCamera = React__namespace.useCallback((enabled) => dispatch(core.toggleCameraEnabled({ enabled })), [dispatch]);
-    const toggleMicrophone = React__namespace.useCallback((enabled) => dispatch(core.toggleMicrophoneEnabled({ enabled })), [dispatch]);
-    const toggleLowDataMode = React__namespace.useCallback((enabled) => dispatch(core.toggleLowDataModeEnabled({ enabled })), [dispatch]);
-    const toggleRaiseHand = React__namespace.useCallback((enabled) => dispatch(core.doSetLocalStickyReaction({ enabled })), [dispatch]);
-    const askToSpeak = React__namespace.useCallback((participantId) => dispatch(core.doRequestAudioEnable({ clientIds: [participantId], enable: true })), [dispatch]);
-    const askToTurnOnCamera = React__namespace.useCallback((participantId) => dispatch(core.doRequestVideoEnable({ clientIds: [participantId], enable: true })), [dispatch]);
-    const acceptWaitingParticipant = React__namespace.useCallback((participantId) => dispatch(core.doAcceptWaitingParticipant({ participantId })), [dispatch]);
-    const rejectWaitingParticipant = React__namespace.useCallback((participantId) => dispatch(core.doRejectWaitingParticipant({ participantId })), [dispatch]);
-    const startCloudRecording = React__namespace.useCallback(() => dispatch(core.doStartCloudRecording()), [dispatch]);
-    const startScreenshare = React__namespace.useCallback(() => dispatch(core.doStartScreenshare()), [dispatch]);
-    const stopCloudRecording = React__namespace.useCallback(() => dispatch(core.doStopCloudRecording()), [dispatch]);
-    const stopScreenshare = React__namespace.useCallback(() => dispatch(core.doStopScreenshare()), [dispatch]);
-    const joinRoom = React__namespace.useCallback(() => dispatch(core.doAppStart(roomConfig)), [dispatch]);
-    const leaveRoom = React__namespace.useCallback(() => dispatch(core.doAppStop()), [dispatch]);
-    const lockRoom = React__namespace.useCallback((locked) => dispatch(core.doLockRoom({ locked })), [dispatch]);
-    const muteParticipants = React__namespace.useCallback((participantIds) => dispatch(core.doRequestAudioEnable({ clientIds: participantIds, enable: false })), [dispatch]);
-    const turnOffParticipantCameras = React__namespace.useCallback((participantIds) => dispatch(core.doRequestVideoEnable({ clientIds: participantIds, enable: false })), [dispatch]);
-    const spotlightParticipant = React__namespace.useCallback((participantId) => dispatch(core.doSpotlightParticipant({ id: participantId })), [dispatch]);
-    const removeSpotlight = React__namespace.useCallback((participantId) => dispatch(core.doRemoveSpotlight({ id: participantId })), [dispatch]);
-    const kickParticipant = React__namespace.useCallback((participantId) => dispatch(core.doKickParticipant({ clientId: participantId })), [dispatch]);
-    const endMeeting = React__namespace.useCallback((stayBehind) => dispatch(core.doEndMeeting({ stayBehind })), [dispatch]);
-    const joinBreakoutGroup = React__namespace.useCallback((group) => dispatch(core.doBreakoutJoin({ group })), [dispatch]);
-    const joinBreakoutMainRoom = React__namespace.useCallback(() => dispatch(core.doBreakoutJoin({ group: "" })), [dispatch]);
+    const joinRoom = React__namespace.useCallback(() => {
+        client.initialize(roomConfig);
+        client.joinRoom();
+    }, [client]);
+    const sendChatMessage = React__namespace.useCallback((text) => client.sendChatMessage(text), [client]);
+    const knock = React__namespace.useCallback(() => client.knock(), [client]);
+    const setDisplayName = React__namespace.useCallback((displayName) => client.setDisplayName(displayName), [client]);
+    const toggleCamera = React__namespace.useCallback((enabled) => client.toggleCamera(enabled), [client]);
+    const toggleMicrophone = React__namespace.useCallback((enabled) => client.toggleMicrophone(enabled), [client]);
+    const toggleLowDataMode = React__namespace.useCallback((enabled) => client.toggleLowDataMode(enabled), [client]);
+    const toggleRaiseHand = React__namespace.useCallback((enabled) => client.toggleRaiseHand(enabled), [client]);
+    const askToSpeak = React__namespace.useCallback((participantId) => client.askToSpeak(participantId), [client]);
+    const askToTurnOnCamera = React__namespace.useCallback((participantId) => client.askToTurnOnCamera(participantId), [client]);
+    const acceptWaitingParticipant = React__namespace.useCallback((participantId) => client.acceptWaitingParticipant(participantId), [client]);
+    const rejectWaitingParticipant = React__namespace.useCallback((participantId) => client.rejectWaitingParticipant(participantId), [client]);
+    const startCloudRecording = React__namespace.useCallback(() => client.startCloudRecording(), [client]);
+    const startScreenshare = React__namespace.useCallback(() => client.startScreenshare(), [client]);
+    const stopCloudRecording = React__namespace.useCallback(() => client.stopCloudRecording(), [client]);
+    const stopScreenshare = React__namespace.useCallback(() => client.stopScreenshare(), [client]);
+    const leaveRoom = React__namespace.useCallback(() => client.leaveRoom(), [client]);
+    const lockRoom = React__namespace.useCallback((locked) => client.lockRoom(locked), [client]);
+    const muteParticipants = React__namespace.useCallback((participantIds) => client.muteParticipants(participantIds), [client]);
+    const turnOffParticipantCameras = React__namespace.useCallback((participantIds) => client.turnOffParticipantCameras(participantIds), [client]);
+    const spotlightParticipant = React__namespace.useCallback((participantId) => client.spotlightParticipant(participantId), [client]);
+    const removeSpotlight = React__namespace.useCallback((participantId) => client.removeSpotlight(participantId), [client]);
+    const kickParticipant = React__namespace.useCallback((participantId) => client.kickParticipant(participantId), [client]);
+    const endMeeting = React__namespace.useCallback((stayBehind) => client.endMeeting(stayBehind), [client]);
+    const joinBreakoutGroup = React__namespace.useCallback((group) => client.joinBreakoutGroup(group), [client]);
+    const joinBreakoutMainRoom = React__namespace.useCallback(() => client.joinBreakoutMainRoom(), [client]);
     const { events } = roomConnectionState, state = __rest(roomConnectionState, ["events"]);
     return {
         state,
@@ -273,40 +279,41 @@ function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectio
     };
 }
 
-const selectLocalMediaState = toolkit.createSelector(core.selectCameraDeviceError, core.selectCameraDevices, core.selectCurrentCameraDeviceId, core.selectCurrentMicrophoneDeviceId, core.selectCurrentSpeakerDeviceId, core.selectIsSettingCameraDevice, core.selectIsSettingMicrophoneDevice, core.selectIsLocalMediaStarting, core.selectLocalMediaStream, core.selectMicrophoneDeviceError, core.selectMicrophoneDevices, core.selectSpeakerDevices, core.selectLocalMediaStartError, (cameraDeviceError, cameraDevices, currentCameraDeviceId, currentMicrophoneDeviceId, currentSpeakerDeviceId, isSettingCameraDevice, isSettingMicrophoneDevice, isStarting, localStream, microphoneDeviceError, microphoneDevices, speakerDevices, startError) => {
-    const state = {
-        cameraDeviceError,
-        cameraDevices,
-        currentCameraDeviceId,
-        currentMicrophoneDeviceId,
-        currentSpeakerDeviceId,
-        isSettingCameraDevice,
-        isSettingMicrophoneDevice,
-        isStarting,
-        localStream,
-        microphoneDeviceError,
-        microphoneDevices,
-        speakerDevices,
-        startError,
-    };
-    return state;
-});
+const initialState = {
+    cameraDeviceError: null,
+    isStarting: false,
+    isSettingCameraDevice: false,
+    isSettingMicrophoneDevice: false,
+    microphoneDeviceError: null,
+    startError: null,
+    cameraDevices: [],
+    microphoneDevices: [],
+    speakerDevices: [],
+};
 
 function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
-    const dispatch = useAppDispatch();
-    const localMediaState = useAppSelector(selectLocalMediaState);
+    var _a;
+    const client = (_a = React__namespace.useContext(WherebyContext)) === null || _a === void 0 ? void 0 : _a.getLocalMedia();
+    const [localMediaState, setLocalMediaState] = React__namespace.useState(() => initialState);
+    if (!client) {
+        throw new Error("WherebyClient is not initialized. Please wrap your component with WherebyProvider.");
+    }
     React__namespace.useEffect(() => {
-        dispatch(core.doStartLocalMedia(optionsOrStream));
+        client.startMedia(optionsOrStream);
+        const unsubscribe = client.subscribe((state) => {
+            setLocalMediaState((prevState) => (Object.assign(Object.assign({}, prevState), state)));
+        });
         return () => {
-            dispatch(core.doStopLocalMedia());
+            unsubscribe();
+            client.stopMedia();
         };
     }, []);
-    const setCameraDevice = React__namespace.useCallback((deviceId) => dispatch(core.setCurrentCameraDeviceId({ deviceId })), [dispatch]);
-    const setMicrophoneDevice = React__namespace.useCallback((deviceId) => dispatch(core.setCurrentMicrophoneDeviceId({ deviceId })), [dispatch]);
-    const setSpeakerDevice = React__namespace.useCallback((deviceId) => dispatch(core.setCurrentSpeakerDeviceId({ deviceId })), [dispatch]);
-    const toggleCamera = React__namespace.useCallback((enabled) => dispatch(core.toggleCameraEnabled({ enabled })), [dispatch]);
-    const toggleMicrophone = React__namespace.useCallback((enabled) => dispatch(core.toggleMicrophoneEnabled({ enabled })), [dispatch]);
-    const toggleLowDataMode = React__namespace.useCallback((enabled) => dispatch(core.toggleLowDataModeEnabled({ enabled })), [dispatch]);
+    const setCameraDevice = React__namespace.useCallback((deviceId) => client.setCameraDevice(deviceId), [client]);
+    const setMicrophoneDevice = React__namespace.useCallback((deviceId) => client.setMicrophoneDevice(deviceId), [client]);
+    const setSpeakerDevice = React__namespace.useCallback((deviceId) => client.setSpeakerDevice(deviceId), [client]);
+    const toggleCamera = React__namespace.useCallback((enabled) => client.toggleCamera(enabled), [client]);
+    const toggleMicrophone = React__namespace.useCallback((enabled) => client.toggleMicrophone(enabled), [client]);
+    const toggleLowDataMode = React__namespace.useCallback((enabled) => client.toggleLowDataMode(enabled), [client]);
     return {
         state: localMediaState,
         actions: {
@@ -1745,9 +1752,38 @@ function calculateSubgridViews({ clientViews, activeVideosSubgridTrigger, should
     return noVideoViews;
 }
 function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID_TRIGGER, stageParticipantLimit = STAGE_PARTICIPANT_LIMIT, forceSubgrid = true, enableSubgrid = true, maximizedParticipant, floatingParticipant, isConstrained = false, } = {}) {
-    const allClientViews = useAppSelector(core.selectAllClientViews);
-    const spotlightedParticipants = useAppSelector(core.selectSpotlightedClientViews);
-    const numParticipants = useAppSelector(core.selectNumParticipants);
+    var _a;
+    const [state, setState] = React__namespace.useState({
+        allClientViews: [],
+        spotlightedParticipants: [],
+        numParticipants: 0,
+    });
+    const client = (_a = React__namespace.useContext(WherebyContext)) === null || _a === void 0 ? void 0 : _a.getGrid();
+    if (!client) {
+        throw new Error("useGridParticipants must be used within a WherebyProvider");
+    }
+    const handleClientViewChanged = React__namespace.useCallback((clientViews) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { allClientViews: clientViews })));
+    }, [setState]);
+    const handleSpotlightedParticipantsChanged = React__namespace.useCallback((spotlighted) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { spotlightedParticipants: spotlighted })));
+    }, [setState]);
+    const handleNumParticipantsChanged = React__namespace.useCallback((num) => {
+        setState((prevState) => (Object.assign(Object.assign({}, prevState), { numParticipants: num })));
+    }, [setState]);
+    React__namespace.useEffect(() => {
+        const unsubscribeClientViews = client.subscribeClientViews(handleClientViewChanged);
+        const unsubscribeSpotlighted = client.subscribeSpotlightedParticipants(handleSpotlightedParticipantsChanged);
+        const unsubscribeNumParticipants = client.subscribeNumberOfClientViews(handleNumParticipantsChanged);
+        return () => {
+            unsubscribeClientViews();
+            unsubscribeSpotlighted();
+            unsubscribeNumParticipants();
+        };
+    }, [client]);
+    const allClientViews = React__namespace.useMemo(() => state.allClientViews, [state.allClientViews]);
+    const spotlightedParticipants = React__namespace.useMemo(() => state.spotlightedParticipants, [state.spotlightedParticipants]);
+    const numParticipants = React__namespace.useMemo(() => state.numParticipants, [state.numParticipants]);
     const floatingClientView = React__namespace.useMemo(() => {
         return floatingParticipant;
     }, [floatingParticipant]);
@@ -1790,6 +1826,7 @@ function useGridParticipants({ activeVideosSubgridTrigger = ACTIVE_VIDEO_SUBGRID
         clientViewsInGrid,
         clientViewsInPresentationGrid,
         clientViewsInSubgrid,
+        spotlightedParticipants,
     };
 }
 
@@ -2006,10 +2043,11 @@ const ParticipantMenuTrigger = React__namespace.forwardRef((_a, ref) => {
 });
 ParticipantMenuTrigger.displayName = PopoverTrigger.displayName;
 const ParticipantMenuItem = React__namespace.forwardRef((_a, ref) => {
+    var _b;
     var { children, style, participantAction } = _a, props = __rest(_a, ["children", "style", "participantAction"]);
     const { participant, setOpen, maximizedParticipant, setMaximizedParticipant, setFloatingParticipant, floatingParticipant, } = useParticipantMenu();
-    const dispatch = useAppDispatch();
-    const spotlightedParticipants = useAppSelector(core.selectSpotlightedClientViews);
+    const client = (_b = React__namespace.useContext(WherebyContext)) === null || _b === void 0 ? void 0 : _b.getGrid();
+    const { spotlightedParticipants } = useGridParticipants();
     const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
     const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;
     const isFloating = (floatingParticipant === null || floatingParticipant === void 0 ? void 0 : floatingParticipant.id) === participant.id;
@@ -2029,10 +2067,10 @@ const ParticipantMenuItem = React__namespace.forwardRef((_a, ref) => {
         case "spotlight":
             onClick = () => {
                 if (isSpotlighted) {
-                    dispatch(core.doRemoveSpotlight({ id: participant.id }));
+                    client === null || client === void 0 ? void 0 : client.removeSpotlight(participant.id);
                 }
                 else {
-                    dispatch(core.doSpotlightParticipant({ id: participant.id }));
+                    client === null || client === void 0 ? void 0 : client.spotlightParticipant(participant.id);
                 }
                 setOpen(false);
             };
@@ -2082,7 +2120,7 @@ function PopInIcon(props) {
 }
 
 function DefaultParticipantMenu({ participant }) {
-    const spotlightedParticipants = useAppSelector(core.selectSpotlightedClientViews);
+    const { spotlightedParticipants } = useGridParticipants();
     const isSpotlighted = spotlightedParticipants.find((p) => p.id === participant.id);
     const { isHovered, maximizedParticipant, floatingParticipant } = useGridCell();
     const isMaximized = (maximizedParticipant === null || maximizedParticipant === void 0 ? void 0 : maximizedParticipant.id) === participant.id;

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LocalMediaOptions, ConnectionStatus, ChatMessage as ChatMessage$1, ClientView, NotificationsEventEmitter, LocalParticipant, RemoteParticipant, Screenshare } from '@whereby.com/core';
-import { RoleName } from '@whereby.com/media';
+import { LocalMediaState, LocalMediaOptions, RoomConnectionState, NotificationsEventEmitter, ClientView } from '@whereby.com/core';
+export { BreakoutState as Breakout, ChatMessageState as ChatMessage, CloudRecordingState as CloudRecording, LiveStreamState as LiveStreaming, LocalParticipantState as LocalParticipant, RemoteParticipantState as RemoteParticipant, RoomConnectionState as RoomConnection, ScreenshareState as Screenshare, WaitingParticipantState as WaitingParticipant } from '@whereby.com/core';
 import * as _radix_ui_react_popover from '@radix-ui/react-popover';
 import { PopoverProps } from '@radix-ui/react-popover';
 
@@ -31,21 +31,6 @@ type WherebyVideoElement = HTMLVideoElement & {
 type VideoViewProps = VideoViewSelfProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<WherebyVideoElement>, WherebyVideoElement>;
 declare const VideoView: React.ForwardRefExoticComponent<Omit<VideoViewProps, "ref"> & React.RefAttributes<WherebyVideoElement>>;
 
-interface LocalMediaState {
-    currentCameraDeviceId?: string;
-    currentMicrophoneDeviceId?: string;
-    currentSpeakerDeviceId?: string;
-    cameraDeviceError: unknown;
-    cameraDevices: MediaDeviceInfo[];
-    isSettingCameraDevice: boolean;
-    isSettingMicrophoneDevice: boolean;
-    isStarting: boolean;
-    localStream?: MediaStream;
-    microphoneDeviceError: unknown;
-    microphoneDevices: MediaDeviceInfo[];
-    speakerDevices: MediaDeviceInfo[];
-    startError: unknown;
-}
 interface LocalMediaActions {
     setCameraDevice: (deviceId: string) => void;
     setMicrophoneDevice: (deviceId: string) => void;
@@ -60,62 +45,6 @@ type UseLocalMediaResult = {
 };
 type UseLocalMediaOptions = LocalMediaOptions;
 
-type RemoteParticipantState = Omit<RemoteParticipant, "newJoiner" | "streams">;
-interface LocalParticipantState extends LocalParticipant {
-    isScreenSharing: boolean;
-    roleName: RoleName;
-    clientClaim?: string;
-}
-interface WaitingParticipantState {
-    id: string;
-    displayName: string | null;
-}
-interface ChatMessageState {
-    senderId: string;
-    timestamp: string;
-    text: string;
-}
-type ScreenshareState = Screenshare;
-type LocalScreenshareStatus = "starting" | "active";
-type ChatMessage = Pick<ChatMessage$1, "senderId" | "timestamp" | "text">;
-type CloudRecordingState = {
-    error?: string;
-    status: "recording" | "requested" | "error";
-    startedAt?: number;
-};
-type LiveStreamState = {
-    status: "streaming";
-    startedAt?: number;
-};
-type BreakoutState = {
-    isActive: boolean;
-    currentGroup: {
-        id: string | null;
-        name: string;
-    } | null;
-    groupedParticipants: {
-        clients: ClientView[];
-        group: {
-            id: string;
-            name: string;
-        } | null;
-    }[];
-    participantsInCurrentGroup: ClientView[];
-};
-interface RoomConnectionState {
-    connectionStatus: ConnectionStatus;
-    chatMessages: ChatMessage[];
-    cloudRecording?: CloudRecordingState;
-    breakout: BreakoutState;
-    events?: NotificationsEventEmitter;
-    liveStream?: LiveStreamState;
-    localScreenshareStatus?: LocalScreenshareStatus;
-    localParticipant?: LocalParticipantState;
-    remoteParticipants: RemoteParticipantState[];
-    screenshares: Screenshare[];
-    waitingParticipants: WaitingParticipantState[];
-    spotlightedParticipants: ClientView[];
-}
 interface RoomConnectionOptions {
     displayName?: string;
     localMediaOptions?: LocalMediaOptions;
@@ -196,4 +125,4 @@ declare const ParticipantMenuItem: React.ForwardRefExoticComponent<Omit<React.De
 } & React.RefAttributes<HTMLButtonElement>>;
 
 export { GridCell, GridVideoView, ParticipantMenu, ParticipantMenuContent, ParticipantMenuItem, ParticipantMenuTrigger, Grid as VideoGrid, VideoView, Provider as WherebyProvider, useLocalMedia, useRoomConnection };
-export type { BreakoutState as Breakout, ChatMessageState as ChatMessage, CloudRecordingState as CloudRecording, LiveStreamState as LiveStreaming, LocalParticipantState as LocalParticipant, RemoteParticipantState as RemoteParticipant, RoomConnectionState as RoomConnection, RoomConnectionActions, RoomConnectionOptions, ScreenshareState as Screenshare, UseLocalMediaResult, WaitingParticipantState as WaitingParticipant };
+export type { RoomConnectionActions, RoomConnectionOptions, UseLocalMediaResult };