|
|
@@ -72,7 +72,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
|
|
|
}
|
|
|
|
|
|
setIsLandscape(!isLandscape);
|
|
|
-
|
|
|
+
|
|
|
if (!isLandscape) {
|
|
|
// 进入横屏模式
|
|
|
if (document.documentElement.requestFullscreen) {
|
|
|
@@ -81,7 +81,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
|
|
|
// 尝试横屏旋转(需要设备支持)
|
|
|
// @ts-ignore
|
|
|
if (screen.orientation && screen.orientation.lock) {
|
|
|
- // @ts-ignore
|
|
|
+ // @ts-ignore
|
|
|
screen.orientation.lock('landscape').catch(() => {
|
|
|
showToast('info', '您的设备不支持自动横屏,请手动旋转设备');
|
|
|
});
|
|
|
@@ -175,7 +175,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
|
|
|
|
|
|
{/* 消息和控制面板列 */}
|
|
|
<div className={`${showVideo ? `${isLandscape ? 'w-96 flex-none h-screen' : 'w-full h-[calc(100vh-300px)]'}` : 'h-full'} md:w-96 md:flex-none flex flex-col overflow-hidden ${isLandscape ? 'max-h-screen' : ''}`}>
|
|
|
- {/* 消息区域 */}
|
|
|
+ {/* 消息区域 */}
|
|
|
{/* 消息列表 - 填充剩余空间 */}
|
|
|
<MessageList messages={messageList} />
|
|
|
|
|
|
@@ -196,37 +196,40 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
|
|
|
>
|
|
|
<VideoCameraIcon className="w-4 h-4" />
|
|
|
</Button>
|
|
|
- <Button
|
|
|
- type="button"
|
|
|
- onClick={toggleCamera}
|
|
|
- className={`p-2 rounded-full ${isCameraOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
|
|
|
- title={isCameraOn ? '关闭摄像头' : '开启摄像头'}
|
|
|
- size="icon"
|
|
|
- variant="ghost"
|
|
|
- >
|
|
|
- <CameraIcon className="w-4 h-4" />
|
|
|
- </Button>
|
|
|
- <Button
|
|
|
- type="button"
|
|
|
- onClick={toggleAudio}
|
|
|
- className={`p-2 rounded-full ${isAudioOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
|
|
|
- title={isAudioOn ? '关闭麦克风' : '开启麦克风'}
|
|
|
- size="icon"
|
|
|
- variant="ghost"
|
|
|
- >
|
|
|
- <MicrophoneIcon className="w-4 h-4" />
|
|
|
- </Button>
|
|
|
{role === Role.Teacher && (
|
|
|
- <Button
|
|
|
- type="button"
|
|
|
- onClick={toggleScreenShare}
|
|
|
- className={`p-2 rounded-full ${isScreenSharing ? 'bg-green-500' : 'bg-blue-500'} text-white`}
|
|
|
- title={isScreenSharing ? '停止共享' : '共享屏幕'}
|
|
|
- size="icon"
|
|
|
- variant="ghost"
|
|
|
- >
|
|
|
- <ShareIcon className="w-4 h-4" />
|
|
|
- </Button>
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ type="button"
|
|
|
+ onClick={toggleCamera}
|
|
|
+ className={`p-2 rounded-full ${isCameraOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
|
|
|
+ title={isCameraOn ? '关闭摄像头' : '开启摄像头'}
|
|
|
+ size="icon"
|
|
|
+ variant="ghost"
|
|
|
+ >
|
|
|
+ <CameraIcon className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ type="button"
|
|
|
+ onClick={toggleAudio}
|
|
|
+ className={`p-2 rounded-full ${isAudioOn ? 'bg-green-500' : 'bg-red-500'} text-white`}
|
|
|
+ title={isAudioOn ? '关闭麦克风' : '开启麦克风'}
|
|
|
+ size="icon"
|
|
|
+ variant="ghost"
|
|
|
+ >
|
|
|
+ <MicrophoneIcon className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ type="button"
|
|
|
+ onClick={toggleScreenShare}
|
|
|
+ className={`p-2 rounded-full ${isScreenSharing ? 'bg-green-500' : 'bg-blue-500'} text-white`}
|
|
|
+ title={isScreenSharing ? '停止共享' : '共享屏幕'}
|
|
|
+ size="icon"
|
|
|
+ variant="ghost"
|
|
|
+ >
|
|
|
+ <ShareIcon className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ </>
|
|
|
)}
|
|
|
{role === Role.Teacher && shareLink && (
|
|
|
<Button
|
|
|
@@ -262,7 +265,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
|
|
|
|
|
|
{/* 图片选择按钮 */}
|
|
|
<ImageSelectorButton />
|
|
|
-
|
|
|
+
|
|
|
{/* 角色特定按钮 */}
|
|
|
{role === Role.Teacher && (
|
|
|
<>
|
|
|
@@ -273,7 +276,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
|
|
|
<AllMuteToggleButton />
|
|
|
</>
|
|
|
)}
|
|
|
-
|
|
|
+
|
|
|
{/* {role === Role.Student && (
|
|
|
<>
|
|
|
<StudentHandUpButton />
|