@naviedu/room-platform-react 0.0.54 → 0.0.55

package/index.esm.js

@@ -27837,7 +27837,7 @@ function RoomPlatformShell(param) {
                             !isSidebarOpen && !isMobileFullscreen ? /*#__PURE__*/ jsx("button", {
                                 type: "button",
                                 "aria-label": "Mở sidebar",
-                                className: "absolute right-4 top-4 z-10 inline-flex size-10 items-center justify-center rounded-lg border border-white/20 bg-slate-950/80 text-white shadow-lg transition-colors hover:bg-slate-900",
+                                className: "absolute right-4 top-4 z-40 inline-flex size-10 items-center justify-center rounded-lg border border-white/20 bg-slate-950/80 text-white shadow-lg transition-colors hover:bg-slate-900",
                                 onClick: controls.onOpenSidebar,
                                 children: /*#__PURE__*/ jsx(PanelRightOpen, {
                                     className: "size-5"
@@ -27870,6 +27870,94 @@ function RoomPlatformShell(param) {
     });
 }
 
+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: getRoomPlatformTrackAspectRatio(trackRef !== null && trackRef !== void 0 ? trackRef : null)
+        },
+        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 RoomPlatformStage(param) {
+    var controlBar = param.controlBar, _param_layout = param.layout, layout = _param_layout === void 0 ? 'stage' : _param_layout, model = param.model, overlayTrack = param.overlayTrack, status = param.status, whiteboard = param.whiteboard;
+    var _ref;
+    var _model_primary, _model_primary1;
+    var cameraOverlayTrack = overlayTrack !== null && overlayTrack !== void 0 ? overlayTrack : model.primary;
+    var displayedTrack = layout === 'camera-overlay' ? cameraOverlayTrack : model.primary;
+    var screenShareTrack = layout === 'stage' && ((_model_primary = model.primary) === null || _model_primary === void 0 ? void 0 : _model_primary.source) === Track.Source.ScreenShare ? model.primary : null;
+    var displayedTrackRatio = useRoomPlatformTrackAspectRatio(displayedTrack !== null && displayedTrack !== void 0 ? displayedTrack : null);
+    var screenShareRatio = useRoomPlatformTrackAspectRatio(screenShareTrack);
+    var frameStyle = {
+        aspectRatio: screenShareTrack ? screenShareRatio.aspectRatio : displayedTrackRatio.aspectRatio
+    };
+    var isScreenShare = Boolean(screenShareTrack);
+    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(RoomPlatformCameraOverlay, {
+            status: status,
+            testId: "room-platform-stage",
+            trackRef: cameraOverlayTrack
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative flex min-h-0 flex-1 items-center justify-center bg-slate-950 p-2 sm:p-4 w-full",
+        "data-status": status,
+        "data-testid": "room-platform-stage",
+        children: [
+            /*#__PURE__*/ jsx(RoomPlatformControlAnchor, {
+                anchorKind: "video-frame",
+                anchorScope: "frame",
+                className: "h-full max-h-full w-auto max-w-full flex-none bg-slate-950",
+                controlBar: controlBar,
+                style: frameStyle,
+                children: /*#__PURE__*/ jsx("section", {
+                    className: frameClassName,
+                    "data-source": (_ref = (_model_primary1 = model.primary) === null || _model_primary1 === void 0 ? void 0 : _model_primary1.source) !== null && _ref !== void 0 ? _ref : 'empty',
+                    "data-testid": "room-platform-stage-frame",
+                    style: frameStyle,
+                    children: isScreenShare && model.primary ? /*#__PURE__*/ jsx("div", {
+                        "data-testid": "room-platform-main-screen-share",
+                        className: "relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg text-sm text-slate-300",
+                        children: /*#__PURE__*/ jsx(RoomPlatformScreenShareWhiteboardFrame, {
+                            aspectRatio: frameStyle.aspectRatio,
+                            onLoadedMetadata: screenShareRatio.onLoadedMetadata,
+                            onResize: screenShareRatio.onResize,
+                            trackRef: model.primary,
+                            children: whiteboard
+                        })
+                    }) : model.primary ? /*#__PURE__*/ jsx(RoomPlatformFitMediaFrame, {
+                        aspectRatio: frameStyle.aspectRatio,
+                        testId: "room-platform-stage-media-frame",
+                        children: /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
+                            className: "h-full w-full",
+                            kind: "stage",
+                            mediaClassName: "h-full w-full overflow-hidden",
+                            onLoadedMetadata: displayedTrackRatio.onLoadedMetadata,
+                            onResize: displayedTrackRatio.onResize,
+                            trackRef: model.primary
+                        })
+                    }) : 'Đang chờ tín hiệu lớp học'
+                })
+            }),
+            resolvedOverlayTrack ? /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
+                testId: "room-platform-camera-overlay",
+                trackRef: resolvedOverlayTrack
+            }) : null
+        ]
+    });
+}
+
 function _define_property$3(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -27996,6 +28084,7 @@ function RoomPlatformPrivateRoomStage(param) {
     var callerCameraTrack = selectTrackByExternalActorId(cameraTracks, callerExternalActorId);
     var studentCameraTrack = selectTrackByExternalActorId(cameraTracks, studentExternalActorId);
     var screenShareTrack = activeScreenShareExternalActorId ? selectTrackByExternalActorId(screenShareTracks, activeScreenShareExternalActorId) : null;
+    var screenShareCameraTrack = activeScreenShareExternalActorId ? selectTrackByExternalActorId(cameraTracks, activeScreenShareExternalActorId) : null;
     var hasActiveScreenShare = Boolean(activeScreenShareExternalActorId);
     var screenShareRatio = useRoomPlatformTrackAspectRatio(screenShareTrack);
     var shareSessionKey = (screenShareTrack === null || screenShareTrack === void 0 ? void 0 : screenShareTrack.publication.trackSid) ? "livekit:".concat(screenShareTrack.publication.trackSid) : undefined;
@@ -28074,10 +28163,16 @@ function RoomPlatformPrivateRoomStage(param) {
                 children: /*#__PURE__*/ jsx("section", {
                     "data-testid": "classroom-video-frame",
                     className: "relative h-full min-h-0 w-full overflow-hidden rounded-lg bg-slate-950 text-white",
-                    children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsxs("div", {
                         "data-testid": "private-live-room-main-stage",
                         className: "relative flex h-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-lg",
-                        children: mainStage
+                        children: [
+                            mainStage,
+                            hasActiveScreenShare && screenShareCameraTrack ? /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
+                                testId: "private-live-room-camera-overlay",
+                                trackRef: screenShareCameraTrack
+                            }) : null
+                        ]
                     })
                 })
             })
@@ -29083,94 +29178,6 @@ function RoomPlatformSpeakQueue(param) {
     });
 }
 
-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: getRoomPlatformTrackAspectRatio(trackRef !== null && trackRef !== void 0 ? trackRef : null)
-        },
-        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 RoomPlatformStage(param) {
-    var controlBar = param.controlBar, _param_layout = param.layout, layout = _param_layout === void 0 ? 'stage' : _param_layout, model = param.model, overlayTrack = param.overlayTrack, status = param.status, whiteboard = param.whiteboard;
-    var _ref;
-    var _model_primary, _model_primary1;
-    var cameraOverlayTrack = overlayTrack !== null && overlayTrack !== void 0 ? overlayTrack : model.primary;
-    var displayedTrack = layout === 'camera-overlay' ? cameraOverlayTrack : model.primary;
-    var screenShareTrack = layout === 'stage' && ((_model_primary = model.primary) === null || _model_primary === void 0 ? void 0 : _model_primary.source) === Track.Source.ScreenShare ? model.primary : null;
-    var displayedTrackRatio = useRoomPlatformTrackAspectRatio(displayedTrack !== null && displayedTrack !== void 0 ? displayedTrack : null);
-    var screenShareRatio = useRoomPlatformTrackAspectRatio(screenShareTrack);
-    var frameStyle = {
-        aspectRatio: screenShareTrack ? screenShareRatio.aspectRatio : displayedTrackRatio.aspectRatio
-    };
-    var isScreenShare = Boolean(screenShareTrack);
-    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(RoomPlatformCameraOverlay, {
-            status: status,
-            testId: "room-platform-stage",
-            trackRef: cameraOverlayTrack
-        });
-    }
-    return /*#__PURE__*/ jsxs("div", {
-        className: "relative flex min-h-0 flex-1 items-center justify-center bg-slate-950 p-2 sm:p-4 w-full",
-        "data-status": status,
-        "data-testid": "room-platform-stage",
-        children: [
-            /*#__PURE__*/ jsx(RoomPlatformControlAnchor, {
-                anchorKind: "video-frame",
-                anchorScope: "frame",
-                className: "h-full max-h-full w-auto max-w-full flex-none bg-slate-950",
-                controlBar: controlBar,
-                style: frameStyle,
-                children: /*#__PURE__*/ jsx("section", {
-                    className: frameClassName,
-                    "data-source": (_ref = (_model_primary1 = model.primary) === null || _model_primary1 === void 0 ? void 0 : _model_primary1.source) !== null && _ref !== void 0 ? _ref : 'empty',
-                    "data-testid": "room-platform-stage-frame",
-                    style: frameStyle,
-                    children: isScreenShare && model.primary ? /*#__PURE__*/ jsx("div", {
-                        "data-testid": "room-platform-main-screen-share",
-                        className: "relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg text-sm text-slate-300",
-                        children: /*#__PURE__*/ jsx(RoomPlatformScreenShareWhiteboardFrame, {
-                            aspectRatio: frameStyle.aspectRatio,
-                            onLoadedMetadata: screenShareRatio.onLoadedMetadata,
-                            onResize: screenShareRatio.onResize,
-                            trackRef: model.primary,
-                            children: whiteboard
-                        })
-                    }) : model.primary ? /*#__PURE__*/ jsx(RoomPlatformFitMediaFrame, {
-                        aspectRatio: frameStyle.aspectRatio,
-                        testId: "room-platform-stage-media-frame",
-                        children: /*#__PURE__*/ jsx(RoomPlatformVideoTile, {
-                            className: "h-full w-full",
-                            kind: "stage",
-                            mediaClassName: "h-full w-full overflow-hidden",
-                            onLoadedMetadata: displayedTrackRatio.onLoadedMetadata,
-                            onResize: displayedTrackRatio.onResize,
-                            trackRef: model.primary
-                        })
-                    }) : 'Đang chờ tín hiệu lớp học'
-                })
-            }),
-            resolvedOverlayTrack ? /*#__PURE__*/ jsx(RoomPlatformCameraOverlay, {
-                testId: "room-platform-camera-overlay",
-                trackRef: resolvedOverlayTrack
-            }) : null
-        ]
-    });
-}
-
 function RoomPlatformTopBar(param) {
     var monitorSelector = param.monitorSelector, completionAction = param.completionAction, topBarLeading = param.topBarLeading, topBarTrailing = param.topBarTrailing;
     var hasTrailingContent = Boolean(monitorSelector || completionAction || topBarTrailing);

package/package.json

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