@naviedu/room-platform-react 0.0.8 → 0.0.11

package/README.md

@@ -85,13 +85,18 @@ layout that allows the room to occupy the viewport.
 | `extensions`             | No       | Host-provided top-bar, workspace, sidebar, monitor, and participant extensions.      |
 | `integrations`           | No       | Chat and whiteboard configuration.                                                   |
 | `isPracticeMode`         | No       | Enables practice-room presentation behavior.                                         |
-| `showLocalPreview`       | No       | Shows the local preview in the sidebar. Defaults to `true`.                          |
-| `primaryCameraSelector`  | No       | Selects the primary camera track when the default selection is not suitable.         |
 | `onError`                | No       | Receives connection, media, and action errors.                                       |
 | `onLifecycleEvent`       | No       | Receives exchange, renewal, and reconnect lifecycle events.                          |
 | `onExit`                 | No       | Called when the user chooses to leave the room.                                      |
 | `children`               | No       | Replaces the default workspace while keeping the provider and room runtime.          |
 
+The default teaching stage selects the available participant camera carrying
+the canonical `room:moderate` capability. Screen share remains primary and the
+moderator camera becomes its overlay. If no moderator camera is available, the
+stage keeps its waiting state and never promotes a student camera. The local
+sidebar preview is hidden only when that selected moderator camera is local;
+its existing desktop breakpoint remains unchanged.
+
 ### Error and lifecycle callbacks
 
 ```tsx

package/index.d.ts

@@ -393,7 +393,6 @@ export declare type RoomPlatformExtensions = {
     topBarTrailing?: ComponentType<RoomPlatformExtensionProps>;
     monitor?: {
         roster: readonly RoomParticipantRosterEntry[];
-        roomEligible: boolean;
     };
     mainWorkspace?: {
         placement: 'overlay' | 'alongside-stage';
@@ -617,7 +616,7 @@ export declare type RoomPlatformProviderProps = PropsWithChildren<{
     }>;
 }>;
 
-export declare function RoomPlatformRoom({ children, extensions, integrations, isPracticeMode, onExit, primaryCameraSelector, showLocalPreview, ...providerProps }: RoomPlatformRoomProps): JSX.Element;
+export declare function RoomPlatformRoom({ children, extensions, integrations, isPracticeMode, onExit, sizing, ...providerProps }: RoomPlatformRoomProps): JSX.Element;
 
 export declare type RoomPlatformRoomProps = {
     apiBaseUrl: string;
@@ -625,8 +624,7 @@ export declare type RoomPlatformRoomProps = {
     integrations?: RoomPlatformIntegrations;
     launchToken: string;
     isPracticeMode?: boolean;
-    primaryCameraSelector?: (cameraTracks: readonly TrackReference[], activeSpeakerParticipantIdentity?: string) => TrackReference | null;
-    showLocalPreview?: boolean;
+    sizing?: RoomPlatformSizing;
     onError?: (event: RoomPlatformErrorEvent) => void;
     onLifecycleEvent?: (event: RoomPlatformLifecycleEvent) => void;
     onExit?: () => void;
@@ -640,7 +638,7 @@ export declare const RoomPlatformRuntimeErrorCode: {
     readonly LIVEKIT_TOKEN_EXPIRED: "LIVEKIT_TOKEN_EXPIRED";
 };
 
-export declare function RoomPlatformShell({ mainPanel, sidebar, topBar }: RoomPlatformShellProps): JSX.Element;
+export declare function RoomPlatformShell({ mainPanel, sidebar, sizing, topBar }: RoomPlatformShellProps): JSX.Element;
 
 export declare type RoomPlatformShellControls = {
     isTheaterMode: boolean;
@@ -654,19 +652,21 @@ export declare type RoomPlatformShellControls = {
 };
 
 export declare type RoomPlatformShellProps = {
+    sizing?: RoomPlatformSizing;
     topBar: ReactNode;
     mainPanel: ReactNode | ((controls: RoomPlatformShellControls) => ReactNode);
     sidebar: ReactNode;
 };
 
-export declare function RoomPlatformSpeakQueue({ activeSpeakerParticipantIdentity, activeSpeakerSlot, canApproveSpeak, canClearActiveSpeaker, canRejectSpeak, isClearingActiveSpeaker, isPracticeMode, onApproveSpeakRequest, onClearActiveSpeaker, onRejectSpeakRequest, participants, raisedHandParticipantIdentities, }: {
+export declare type RoomPlatformSizing = 'viewport' | 'container';
+
+export declare function RoomPlatformSpeakQueue({ activeSpeakerParticipantIdentity, activeSpeakerSlot, canApproveSpeak, canClearActiveSpeaker, canRejectSpeak, isClearingActiveSpeaker, onApproveSpeakRequest, onClearActiveSpeaker, onRejectSpeakRequest, participants, raisedHandParticipantIdentities, }: {
     activeSpeakerParticipantIdentity?: string;
     activeSpeakerSlot?: ReactNode;
     canApproveSpeak?: boolean;
     canClearActiveSpeaker?: boolean;
     canRejectSpeak?: boolean;
     isClearingActiveSpeaker?: boolean;
-    isPracticeMode?: boolean;
     onApproveSpeakRequest?: (participantIdentity: string) => Promise<void> | void;
     onClearActiveSpeaker?: () => void;
     onRejectSpeakRequest?: (participantIdentity: string) => Promise<void> | void;

package/index.esm.js

@@ -173,7 +173,13 @@ var getParticipantTabTitle = function(participantTab) {
 };
 
 var RoomPlatformCapability = {
+    ROOM_JOIN: 'room:join',
+    CHAT_SEND: 'chat:send',
+    MEDIA_SUBSCRIBE: 'media:subscribe',
+    MEDIA_PUBLISH_AUDIO: 'media:publish_audio',
+    MEDIA_PUBLISH_VIDEO: 'media:publish_video',
     MEDIA_SHARE_SCREEN: 'media:share_screen',
+    DATA_PUBLISH: 'data:publish',
     ROOM_SPEAK_REQUEST: 'room:speak_request',
     ROOM_MODERATE: 'room:moderate',
     MONITOR_MANAGE: 'monitor:manage',
@@ -182,6 +188,10 @@ var RoomPlatformCapability = {
     PRIVATE_ROOM_CLOSE: 'private_room:close',
     WHITEBOARD_CLEAR: 'whiteboard:clear'
 };
+var roomPlatformCapabilities = Object.values(RoomPlatformCapability);
+var isRoomPlatformCapability = function(value) {
+    return roomPlatformCapabilities.includes(value);
+};
 
 function _define_property$y(obj, key, value) {
     if (key in obj) {
@@ -9680,7 +9690,7 @@ function RoomPlatformVideoTile(param) {
     return /*#__PURE__*/ jsxs("div", {
         "aria-label": resolvedLabel,
         className: [
-            'relative overflow-hidden rounded-lg bg-slate-900 text-white ring-1 ring-white/10',
+            'relative overflow-hidden rounded-lg bg-slate-900 text-white',
             className
         ].filter(Boolean).join(' '),
         "data-kind": kind,
@@ -19560,19 +19570,28 @@ function getNearestMarkerExpiry(objects) {
     return expiries.length ? (_Math = Math).min.apply(_Math, _to_consumable_array$5(expiries)) : undefined;
 }
 function getNormalizedPoint(event, frameRect) {
-    if (!Number.isFinite(frameRect.left) || !Number.isFinite(frameRect.top)) return undefined;
-    if (!Number.isFinite(frameRect.width) || !Number.isFinite(frameRect.height)) return undefined;
-    if (frameRect.width <= 0 || frameRect.height <= 0) return undefined;
+    var currentFrameRect = getPointerFrameRect(event, frameRect);
+    if (!currentFrameRect) return undefined;
     var clientX = getEventCoordinate(event, 'clientX');
     var clientY = getEventCoordinate(event, 'clientY');
     if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) return undefined;
-    var x = (clientX - frameRect.left) / frameRect.width;
-    var y = (clientY - frameRect.top) / frameRect.height;
+    var x = (clientX - currentFrameRect.left) / currentFrameRect.width;
+    var y = (clientY - currentFrameRect.top) / currentFrameRect.height;
     return {
         x: clamp01(x),
         y: clamp01(y)
     };
 }
+function getPointerFrameRect(event, fallback) {
+    var rect = event.currentTarget.getBoundingClientRect();
+    if (Number.isFinite(rect.left) && Number.isFinite(rect.top) && Number.isFinite(rect.width) && Number.isFinite(rect.height) && rect.width > 0 && rect.height > 0) {
+        return rect;
+    }
+    if (!Number.isFinite(fallback.left) || !Number.isFinite(fallback.top) || !Number.isFinite(fallback.width) || !Number.isFinite(fallback.height) || fallback.width <= 0 || fallback.height <= 0) {
+        return undefined;
+    }
+    return fallback;
+}
 function getEventCoordinate(event, key) {
     var _event_nativeEvent;
     if (Number.isFinite(event[key])) return event[key];
@@ -26368,7 +26387,7 @@ function _unsupported_iterable_to_array$3(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
 }
 function RoomPlatformShell(param) {
-    var mainPanel = param.mainPanel, sidebar = param.sidebar, topBar = param.topBar;
+    var mainPanel = param.mainPanel, sidebar = param.sidebar, _param_sizing = param.sizing, sizing = _param_sizing === void 0 ? 'viewport' : _param_sizing, topBar = param.topBar;
     var _useState = _sliced_to_array$3(useState(true), 2), isSidebarOpen = _useState[0], setIsSidebarOpen = _useState[1];
     var _useState1 = _sliced_to_array$3(useState(false), 2), isTheaterMode = _useState1[0], setIsTheaterMode = _useState1[1];
     var _useState2 = _sliced_to_array$3(useState(false), 2), isFullscreen = _useState2[0], setIsFullscreen = _useState2[1];
@@ -26410,6 +26429,7 @@ function RoomPlatformShell(param) {
         }
     };
     var resolvedMainPanel = typeof mainPanel === 'function' ? mainPanel(controls) : mainPanel;
+    var sizingClassName = sizing === 'container' ? 'h-full min-h-0 w-full' : 'h-dvh min-h-dvh w-dvw';
     useEffect(function() {
         var syncResponsiveState = function() {
             var isMobileViewport = typeof window.matchMedia === 'function' && window.matchMedia('(max-width: 767px)').matches;
@@ -26444,7 +26464,8 @@ function RoomPlatformShell(param) {
         "data-testid": "room-platform-shell",
         "data-theater-mode": effectiveTheaterMode,
         "data-mobile-fullscreen": isMobileFullscreen,
-        className: "flex h-dvh min-h-dvh w-dvw min-w-0 flex-col overflow-hidden bg-slate-950 text-white",
+        "data-sizing": sizing,
+        className: "flex ".concat(sizingClassName, " min-w-0 flex-col overflow-hidden bg-slate-950 text-white"),
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: isMobileFullscreen ? 'hidden md:block' : undefined,
@@ -26670,7 +26691,7 @@ function _ts_generator$1(thisArg, body) {
     }
 }
 function RoomPlatformSpeakQueue(param) {
-    var activeSpeakerParticipantIdentity = param.activeSpeakerParticipantIdentity, activeSpeakerSlot = param.activeSpeakerSlot, canApproveSpeak = param.canApproveSpeak, canClearActiveSpeaker = param.canClearActiveSpeaker, canRejectSpeak = param.canRejectSpeak, isClearingActiveSpeaker = param.isClearingActiveSpeaker, _param_isPracticeMode = param.isPracticeMode, isPracticeMode = _param_isPracticeMode === void 0 ? false : _param_isPracticeMode, onApproveSpeakRequest = param.onApproveSpeakRequest, onClearActiveSpeaker = param.onClearActiveSpeaker, onRejectSpeakRequest = param.onRejectSpeakRequest, participants = param.participants, raisedHandParticipantIdentities = param.raisedHandParticipantIdentities;
+    var activeSpeakerParticipantIdentity = param.activeSpeakerParticipantIdentity, activeSpeakerSlot = param.activeSpeakerSlot, canApproveSpeak = param.canApproveSpeak, canClearActiveSpeaker = param.canClearActiveSpeaker, canRejectSpeak = param.canRejectSpeak, isClearingActiveSpeaker = param.isClearingActiveSpeaker, onApproveSpeakRequest = param.onApproveSpeakRequest, onClearActiveSpeaker = param.onClearActiveSpeaker, onRejectSpeakRequest = param.onRejectSpeakRequest, participants = param.participants, raisedHandParticipantIdentities = param.raisedHandParticipantIdentities;
     var participantsByIdentity = new Map(participants.map(function(participant) {
         return [
             participant.participantIdentity,
@@ -26749,11 +26770,11 @@ function RoomPlatformSpeakQueue(param) {
                             "Bục giảng"
                         ]
                     }),
-                    !isPracticeMode ? /*#__PURE__*/ jsx(Badge, {
+                    /*#__PURE__*/ jsx(Badge, {
                         variant: "outline",
                         className: "border-liveclass-orange/30 text-liveclass-orange",
                         children: raisedHandParticipantIdentities.length
-                    }) : null
+                    })
                 ]
             }),
             hasActiveSpeaker ? /*#__PURE__*/ jsxs("div", {
@@ -26854,7 +26875,7 @@ function RoomPlatformSpeakQueue(param) {
                 }, participantIdentity);
             }) : /*#__PURE__*/ jsx("p", {
                 className: "text-sm text-muted-foreground",
-                children: isPracticeMode ? 'Danh sách chờ phát biểu sẽ được đồng bộ theo trạng thái phòng.' : 'Không có học sinh chờ phát biểu.'
+                children: "Kh\xf4ng c\xf3 học sinh chờ ph\xe1t biểu."
             })
         ]
     });
@@ -26935,6 +26956,24 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
+var cameraOverlayClassName = 'absolute left-4 top-4 z-30 aspect-video w-48 max-w-[40%]';
+function RoomPlatformCameraOverlay(param) {
+    var trackRef = param.trackRef, status = param.status, testId = param.testId;
+    return /*#__PURE__*/ jsx("div", {
+        "data-identity": trackRef === null || trackRef === void 0 ? void 0 : trackRef.participant.identity,
+        "data-status": status,
+        "data-testid": testId,
+        className: cameraOverlayClassName,
+        style: {
+            aspectRatio: getTrackAspectRatio(trackRef)
+        },
+        children: trackRef ? /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
+            kind: "overlay",
+            mediaClassName: "h-full w-full overflow-hidden",
+            trackRef: trackRef
+        }) : 'Đang chờ tín hiệu lớp học'
+    });
+}
 function getTrackAspectRatio(trackRef) {
     var _ref, _ref1;
     var _publication_track, _publication_track_mediaStreamTrack_getSettings, _publication_track_mediaStreamTrack, _publication_track1;
@@ -26972,17 +27011,10 @@ function RoomPlatformStage(param) {
     var resolvedOverlayTrack = overlayTrack !== null && overlayTrack !== void 0 ? overlayTrack : isScreenShare ? model.cameraOverlay : undefined;
     var frameClassName = model.primary ? 'relative flex h-full min-h-0 w-full items-center justify-center overflow-hidden rounded-lg text-white ring-1 ring-white/10' : 'relative flex h-full min-h-0 w-full items-center justify-center overflow-hidden rounded-lg bg-slate-950 p-4 text-sm text-slate-300 ring-1 ring-white/10';
     if (layout === 'camera-overlay') {
-        return /*#__PURE__*/ jsx("div", {
-            className: "absolute left-4 top-4 z-10 aspect-video w-48 max-w-[40%] overflow-hidden rounded-lg bg-slate-950 text-white ring-1 ring-white/20",
-            "data-status": status,
-            "data-testid": "room-platform-stage",
-            style: frameStyle,
-            children: cameraOverlayTrack ? /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
-                className: "h-full w-full",
-                kind: "overlay",
-                mediaClassName: "h-full w-full overflow-hidden",
-                trackRef: cameraOverlayTrack
-            }) : 'Đang chờ tín hiệu lớp học'
+        return /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
+            status: status,
+            testId: "room-platform-stage",
+            trackRef: cameraOverlayTrack
         });
     }
     return /*#__PURE__*/ jsxs("div", {
@@ -27019,15 +27051,9 @@ function RoomPlatformStage(param) {
                     }) : 'Đang chờ tín hiệu lớp học'
                 })
             }),
-            resolvedOverlayTrack ? /*#__PURE__*/ jsx("div", {
-                "data-identity": resolvedOverlayTrack.participant.identity,
-                "data-testid": "room-platform-camera-overlay",
-                className: "absolute left-4 top-4 z-30 aspect-video w-48 max-w-[40%] ring-1 ring-white/20",
-                children: /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
-                    kind: "overlay",
-                    mediaClassName: "h-full w-full overflow-hidden",
-                    trackRef: resolvedOverlayTrack
-                })
+            resolvedOverlayTrack ? /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
+                testId: "room-platform-camera-overlay",
+                trackRef: resolvedOverlayTrack
             }) : null
         ]
     });
@@ -27064,22 +27090,29 @@ function RoomPlatformTopBar(param) {
     });
 }
 
-var isSpeakingRemote = function(param) {
-    var participant = param.participant;
-    return !participant.isLocal && participant.isSpeaking;
-};
-var isRemote = function(param) {
-    var participant = param.participant;
-    return !participant.isLocal;
-};
 var hasAvailableTrackMedia = function(param) {
     var publication = param.publication;
     var state = publication;
     return !state.isMuted && state.isSubscribed !== false && state.track !== null;
 };
+var capabilitiesFromMetadata = function(metadata) {
+    if (!metadata) return [];
+    try {
+        var capabilities = JSON.parse(metadata).capabilities;
+        return Array.isArray(capabilities) && capabilities.every(function(value) {
+            return typeof value === 'string' && isRoomPlatformCapability(value);
+        }) ? capabilities : [];
+    } catch (unused) {
+        return [];
+    }
+};
+var isModeratorCamera = function(param, localCapabilities) {
+    var participant = param.participant;
+    return (participant.isLocal ? localCapabilities : capabilitiesFromMetadata(participant.metadata)).includes(RoomPlatformCapability.ROOM_MODERATE);
+};
 function selectRoomPlatformStage(tracks) {
-    var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, activeSpeakerParticipantIdentity = _ref.activeSpeakerParticipantIdentity, primaryCameraSelector = _ref.primaryCameraSelector;
-    var _ref1, _cameras_find, _cameras_find1, _ref2, _shares_;
+    var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, activeSpeakerParticipantIdentity = _ref.activeSpeakerParticipantIdentity, localCapabilities = _ref.localCapabilities;
+    var _ref1, _shares_;
     var availableTracks = tracks.filter(hasAvailableTrackMedia);
     var shares = availableTracks.filter(function(param) {
         var source = param.source;
@@ -27089,13 +27122,10 @@ function selectRoomPlatformStage(tracks) {
         var source = param.source;
         return source === Track.Source.Camera;
     });
-    var genericPrimaryCamera = (_ref1 = (_cameras_find = cameras.find(isSpeakingRemote)) !== null && _cameras_find !== void 0 ? _cameras_find : cameras.find(isRemote)) !== null && _ref1 !== void 0 ? _ref1 : cameras[0];
-    var selectedPrimaryCamera = primaryCameraSelector ? primaryCameraSelector(cameras, activeSpeakerParticipantIdentity) : shares[0] ? (_cameras_find1 = cameras.find(function(param) {
-        var participant = param.participant;
-        var _shares_;
-        return participant.identity === ((_shares_ = shares[0]) === null || _shares_ === void 0 ? void 0 : _shares_.participant.identity);
-    })) !== null && _cameras_find1 !== void 0 ? _cameras_find1 : genericPrimaryCamera : genericPrimaryCamera;
-    var primary = (_ref2 = (_shares_ = shares[0]) !== null && _shares_ !== void 0 ? _shares_ : selectedPrimaryCamera) !== null && _ref2 !== void 0 ? _ref2 : undefined;
+    var selectedPrimaryCamera = cameras.find(function(camera) {
+        return isModeratorCamera(camera, localCapabilities !== null && localCapabilities !== void 0 ? localCapabilities : []);
+    });
+    var primary = (_ref1 = (_shares_ = shares[0]) !== null && _shares_ !== void 0 ? _shares_ : selectedPrimaryCamera) !== null && _ref1 !== void 0 ? _ref1 : undefined;
     var cameraOverlay = shares[0] ? selectedPrimaryCamera !== null && selectedPrimaryCamera !== void 0 ? selectedPrimaryCamera : undefined : undefined;
     var localPreview = cameras.find(function(param) {
         var participant = param.participant;
@@ -27123,8 +27153,9 @@ function selectRoomPlatformStage(tracks) {
     };
 }
 
-function useRoomPlatformStage(primaryCameraSelector) {
-    var controlState = useRoomPlatform().controlState;
+function useRoomPlatformStage() {
+    var _ref;
+    var _useRoomPlatform = useRoomPlatform(), access = _useRoomPlatform.access, controlState = _useRoomPlatform.controlState;
     return selectRoomPlatformStage(useTracks([
         Track.Source.Camera,
         Track.Source.ScreenShare
@@ -27132,7 +27163,7 @@ function useRoomPlatformStage(primaryCameraSelector) {
         onlySubscribed: true
     }), {
         activeSpeakerParticipantIdentity: controlState === null || controlState === void 0 ? void 0 : controlState.activeSpeakerParticipantIdentity,
-        primaryCameraSelector: primaryCameraSelector
+        localCapabilities: (_ref = access === null || access === void 0 ? void 0 : access.capabilities) !== null && _ref !== void 0 ? _ref : []
     });
 }
 
@@ -27409,6 +27440,32 @@ var emptyStageModel = {
     },
     primary: undefined
 };
+function RoomPlatformPracticeModeMediaPolicy(param) {
+    var isPracticeMode = param.isPracticeMode;
+    var _useRoomPlatform = useRoomPlatform(), localMedia = _useRoomPlatform.localMedia, setLocalMediaEnabled = _useRoomPlatform.setLocalMediaEnabled;
+    var previousIsPracticeModeRef = useRef(isPracticeMode);
+    var shouldStopScreenShareRef = useRef(false);
+    useEffect(function() {
+        if (!previousIsPracticeModeRef.current && isPracticeMode) {
+            shouldStopScreenShareRef.current = true;
+        }
+        previousIsPracticeModeRef.current = isPracticeMode;
+        if (!isPracticeMode) {
+            shouldStopScreenShareRef.current = false;
+            return;
+        }
+        if (!shouldStopScreenShareRef.current || !localMedia.screenShare) return;
+        shouldStopScreenShareRef.current = false;
+        void setLocalMediaEnabled('screenShare', false).catch(function() {
+            return undefined;
+        });
+    }, [
+        isPracticeMode,
+        localMedia.screenShare,
+        setLocalMediaEnabled
+    ]);
+    return null;
+}
 function getShareSessionKey(trackSid) {
     return trackSid ? "livekit:".concat(trackSid) : undefined;
 }
@@ -27445,13 +27502,14 @@ function RoomPlatformWhiteboardShareLifecycle(param) {
     return null;
 }
 var RoomPlatformWorkspaceContent = function(param) {
-    var cameraBackground = param.cameraBackground, integrations = param.integrations, extensions = param.extensions, isPracticeMode = param.isPracticeMode, onExit = param.onExit; param.primaryCameraSelector; var showLocalPreview = param.showLocalPreview, stageModel = param.stageModel;
-    var _ref, _ref1;
-    var _resolvedStageModel_primary, _extensions_sidebarTabs;
+    var cameraBackground = param.cameraBackground, integrations = param.integrations, extensions = param.extensions; param.isPracticeMode; var onExit = param.onExit, sizing = param.sizing, stageModel = param.stageModel;
+    var _resolvedStageModel_cameraOverlay, _ref, _ref1;
+    var _resolvedStageModel_primary, _resolvedStageModel_primary1, _extensions_sidebarTabs;
     var _useRoomPlatform = useRoomPlatform(), access = _useRoomPlatform.access, controlState = _useRoomPlatform.controlState, error = _useRoomPlatform.error, hasCapability = _useRoomPlatform.hasCapability, isActionPending = _useRoomPlatform.isActionPending, localPreviewTrack = _useRoomPlatform.localPreviewTrack, performAction = _useRoomPlatform.performAction, status = _useRoomPlatform.status;
     var _useRoomPlatformPrivateRoom = useRoomPlatformPrivateRoom(), cancelPrivateRoom = _useRoomPlatformPrivateRoom.cancelPrivateRoom, currentPrivateRoomOperation = _useRoomPlatformPrivateRoom.currentPrivateRoomOperation;
     var resolvedStageModel = stageModel !== null && stageModel !== void 0 ? stageModel : emptyStageModel;
-    var shareSessionKey = ((_resolvedStageModel_primary = resolvedStageModel.primary) === null || _resolvedStageModel_primary === void 0 ? void 0 : _resolvedStageModel_primary.source) === Track.Source.ScreenShare ? getShareSessionKey(resolvedStageModel.primary.publication.trackSid) : undefined;
+    var selectedHostCamera = (_resolvedStageModel_cameraOverlay = resolvedStageModel.cameraOverlay) !== null && _resolvedStageModel_cameraOverlay !== void 0 ? _resolvedStageModel_cameraOverlay : ((_resolvedStageModel_primary = resolvedStageModel.primary) === null || _resolvedStageModel_primary === void 0 ? void 0 : _resolvedStageModel_primary.source) === Track.Source.Camera ? resolvedStageModel.primary : undefined;
+    var shareSessionKey = ((_resolvedStageModel_primary1 = resolvedStageModel.primary) === null || _resolvedStageModel_primary1 === void 0 ? void 0 : _resolvedStageModel_primary1.source) === Track.Source.ScreenShare ? getShareSessionKey(resolvedStageModel.primary.publication.trackSid) : undefined;
     var participants = useRoomPresence();
     var currentParticipantPresence = participants.find(function(participant) {
         return participant.isLocal;
@@ -27495,7 +27553,7 @@ var RoomPlatformWorkspaceContent = function(param) {
     };
     var participantTab = extensions === null || extensions === void 0 ? void 0 : extensions.participantTab;
     var monitor = extensions === null || extensions === void 0 ? void 0 : extensions.monitor;
-    var canUseMonitor = Boolean((monitor === null || monitor === void 0 ? void 0 : monitor.roomEligible) && hasCapability('monitor:manage'));
+    var canUseMonitor = hasCapability('monitor:manage');
     var handleMonitorStartError = useCallback(function() {
         setStageView('teaching');
         toast.error('Không thể bật Monitor. Vui lòng thử lại.');
@@ -27600,10 +27658,10 @@ var RoomPlatformWorkspaceContent = function(param) {
     var activeSpeakerSlot = resolvedStageModel.activeSpeaker && !isSelfActiveSpeaker ? /*#__PURE__*/ jsx(RoomPlatformActiveSpeaker, {
         trackRef: resolvedStageModel.activeSpeaker
     }) : undefined;
-    var localMediaSlot = showLocalPreview ? /*#__PURE__*/ jsx(RoomPlatformLocalPreview, {
+    var localMediaSlot = (selectedHostCamera === null || selectedHostCamera === void 0 ? void 0 : selectedHostCamera.participant.isLocal) ? undefined : /*#__PURE__*/ jsx(RoomPlatformLocalPreview, {
         localPreviewTrack: localPreviewTrack,
         trackRef: resolvedStageModel.localPreview
-    }) : undefined;
+    });
     var activeSpeakerMediaSlot = hasActiveSpeaker && !canModerate ? activeSpeakerSlot : undefined;
     var isClearingActiveSpeaker = isActionPending(RoomPlatformAction.SPEAKER_CLEAR);
     var clearActiveSpeaker = function() {
@@ -27646,7 +27704,6 @@ var RoomPlatformWorkspaceContent = function(param) {
                 canClearActiveSpeaker: true,
                 canRejectSpeak: true,
                 isClearingActiveSpeaker: isClearingActiveSpeaker,
-                isPracticeMode: isPracticeMode,
                 onApproveSpeakRequest: approveSpeakRequest,
                 onClearActiveSpeaker: clearActiveSpeaker,
                 onRejectSpeakRequest: rejectSpeakRequest,
@@ -27705,6 +27762,7 @@ var RoomPlatformWorkspaceContent = function(param) {
         children: [
             /*#__PURE__*/ jsx("section", {
                 className: "room-platform-room room-platform-surface",
+                "data-sizing": sizing,
                 children: /*#__PURE__*/ jsx(RoomPlatformShell, {
                     mainPanel: function(controls) {
                         if (stageView === 'monitor' && canUseMonitor && monitor) {
@@ -27789,6 +27847,7 @@ var RoomPlatformWorkspaceContent = function(param) {
                         });
                     },
                     sidebar: sidebar,
+                    sizing: sizing,
                     topBar: /*#__PURE__*/ jsx(RoomPlatformTopBar, {
                         monitorSelector: monitorSelector,
                         topBarLeading: topBarLeading,
@@ -27824,7 +27883,7 @@ var RoomPlatformWorkspaceContent = function(param) {
     });
 };
 var RoomPlatformConnectedWorkspace = function(props) {
-    var stageModel = useRoomPlatformStage(props.primaryCameraSelector);
+    var stageModel = useRoomPlatformStage();
     return /*#__PURE__*/ jsx(RoomPlatformWorkspaceContent, _object_spread_props(_object_spread({}, props), {
         stageModel: stageModel
     }));
@@ -27996,29 +28055,32 @@ function RoomPlatformPrivateRoomRuntime(param) {
     });
 }
 function RoomPlatformRoom(_0) {
-    var children = _0.children, extensions = _0.extensions, integrations = _0.integrations, isPracticeMode = _0.isPracticeMode, onExit = _0.onExit, primaryCameraSelector = _0.primaryCameraSelector, _0_showLocalPreview = _0.showLocalPreview, showLocalPreview = _0_showLocalPreview === void 0 ? true : _0_showLocalPreview, providerProps = _object_without_properties(_0, [
+    var children = _0.children, extensions = _0.extensions, integrations = _0.integrations, isPracticeMode = _0.isPracticeMode, onExit = _0.onExit, _0_sizing = _0.sizing, sizing = _0_sizing === void 0 ? 'viewport' : _0_sizing, providerProps = _object_without_properties(_0, [
         "children",
         "extensions",
         "integrations",
         "isPracticeMode",
         "onExit",
-        "primaryCameraSelector",
-        "showLocalPreview"
+        "sizing"
     ]);
-    return /*#__PURE__*/ jsx(RoomPlatformProvider, _object_spread_props(_object_spread({}, providerProps), {
-        children: /*#__PURE__*/ jsx(RoomPlatformMediaRuntime, {
-            children: /*#__PURE__*/ jsx(RoomPlatformPrivateRoomRuntime, {
-                integrations: integrations,
-                children: children !== null && children !== void 0 ? children : /*#__PURE__*/ jsx(RoomPlatformWorkspace, {
-                    extensions: extensions,
+    return /*#__PURE__*/ jsxs(RoomPlatformProvider, _object_spread_props(_object_spread({}, providerProps), {
+        children: [
+            /*#__PURE__*/ jsx(RoomPlatformPracticeModeMediaPolicy, {
+                isPracticeMode: isPracticeMode
+            }),
+            /*#__PURE__*/ jsx(RoomPlatformMediaRuntime, {
+                children: /*#__PURE__*/ jsx(RoomPlatformPrivateRoomRuntime, {
                     integrations: integrations,
-                    isPracticeMode: isPracticeMode,
-                    onExit: onExit,
-                    primaryCameraSelector: primaryCameraSelector,
-                    showLocalPreview: showLocalPreview
+                    children: children !== null && children !== void 0 ? children : /*#__PURE__*/ jsx(RoomPlatformWorkspace, {
+                        extensions: extensions,
+                        integrations: integrations,
+                        isPracticeMode: isPracticeMode,
+                        onExit: onExit,
+                        sizing: sizing
+                    })
                 })
             })
-        })
+        ]
     }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naviedu/room-platform-react",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "type": "module",
   "main": "./index.esm.js",
   "module": "./index.esm.js",

package/styles.css

@@ -1144,6 +1144,10 @@
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.room-platform-room .ring {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .room-platform-room .ring-1 {
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1170,12 +1174,6 @@
     --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
   }
 }
-.room-platform-room .ring-white\/20 {
-  --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-  }
-}
 .room-platform-room .outline-hidden {
   --tw-outline-style: none;
   outline-style: none;
@@ -3711,6 +3709,12 @@
     width: 100%;
 }
 
+.room-platform-room[data-sizing='container'] {
+    height: 100%;
+    min-height: 0;
+    width: 100%;
+}
+
 .room-platform-surface {
     box-sizing: border-box;
 }