优化录制按钮

src/components/public/LiveNodePlayer.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { message } from 'antd';
 import {
   SpeakerLoudIcon,
   SpeakerOffIcon,
@@ -174,6 +175,10 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
     }
   };
   const startRecord = () => {
+    if (isLiveStreamNotStart) {
+      message.error(t('直播未开始，不能录制'));
+      return;
+    }
     setIsStartRecord(false);
     coursesAPI.sendCourseEntryNotice(`target=record?code=${courseCode}`);
   };
@@ -223,36 +228,16 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
               />
             </div>
           )}
-          {!isLiveStreamNotStart && isFullScreen && (
+          {isFullScreen && (
             <div className={'absolute bottom-0 w-full group'}>
               {buildToolBar()}
             </div>
           )}
         </div>
       </div>
-
-      {!isLiveStreamNotStart && !isFullScreen && (
+      {!isFullScreen && (
         <div className='rounded-b overflow-hidden'>{buildToolBar()}</div>
       )}
-      {/* 录制按钮 */}
-      {isShellWeb && isAssistant && !isLiveStreamNotStart && (
-        <div className='absolute top-0 right-0 mt-2 mr-2 flex'>
-          {isStartRecord && (
-            <button
-              className='bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full'
-              onClick={() => startRecord()}>
-              {t('开始录制')}
-            </button>
-          )}
-          {!isStartRecord && (
-            <button
-              className='bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 ml-2 rounded-full'
-              onClick={() => endRecord()}>
-              {t('结束录制')}
-            </button>
-          )}
-        </div>
-      )}
     </div>
   );
 
@@ -265,26 +250,57 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
             ? 'group-hover:translate-y-0 group-hover:delay-0 delay-500 translate-y-10 duration-300'
             : ''
         }>
-        <div className='flex justify-end bg-gray-900  '>
-          <button onClick={handleToggleMute} className='border-none p-1'>
-            {!isMuted ? (
-              <SpeakerLoudIcon className='text-gray-100 w-6 h-6' />
-            ) : (
-              <SpeakerOffIcon className='text-gray-100 w-6 h-6' />
-            )}
-          </button>
-          <div className='w-2'></div>
-          <button onClick={handleToggleFullScreen} className='border-none p-1'>
-            {isFullScreen ? (
-              <ExitFullScreenIcon className='text-gray-100 w-6 h-6' />
-            ) : (
-              <EnterFullScreenIcon className='text-gray-100 w-6 h-6' />
-            )}
-          </button>
+        <div className='flex justify-between bg-gray-900  '>
+          {buildRecordButton()}
+          <div className='flex justify-end '>
+            <button onClick={handleToggleMute} className='border-none p-1'>
+              {!isMuted ? (
+                <SpeakerLoudIcon className='text-gray-100 w-6 h-6' />
+              ) : (
+                <SpeakerOffIcon className='text-gray-100 w-6 h-6' />
+              )}
+            </button>
+            <div className='w-2'></div>
+            <button
+              onClick={handleToggleFullScreen}
+              className='border-none p-1'>
+              {isFullScreen ? (
+                <ExitFullScreenIcon className='text-gray-100 w-6 h-6' />
+              ) : (
+                <EnterFullScreenIcon className='text-gray-100 w-6 h-6' />
+              )}
+            </button>
+          </div>
         </div>
       </div>
     );
   }
+
+  /// 构建录制按钮
+  function buildRecordButton() {
+    if (isShellWeb && isAssistant) {
+      return (
+        <div className='flex'>
+          {isStartRecord && (
+            <button
+              className='bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4'
+              onClick={() => startRecord()}>
+              {t('开始录制')}
+            </button>
+          )}
+          {!isStartRecord && (
+            <button
+              className='bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4'
+              onClick={() => endRecord()}>
+              {t('结束录制')}
+            </button>
+          )}
+        </div>
+      );
+    } else {
+      return <div></div>;
+    }
+  }
 };
 
 export default LiveNodePlayer;

tailwind.config.js

@@ -75,9 +75,9 @@ export default {
   },
   plugins: [
     require('tailwindcss-animate'),
-    require('@vidstack/react/tailwind.cjs')({
-      prefix: 'media',
-    }),
+    // require('@vidstack/react/tailwind.cjs')({
+    //   prefix: 'media',
+    // }),
     customVariants,
   ],
 };