更新移动端全屏样式

src/components/public/LiveNodePlayer.jsx

@@ -12,7 +12,13 @@ import { LivePlayer } from '../../js/device_live/player';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
-const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
+const LiveNodePlayer = ({
+  url,
+  courseCode,
+  isAssistant,
+  isShellWeb,
+  isMobile,
+}) => {
   const divRef = useRef(null);
   const [dimensions, setDimensions] = useState({ width: 1920, height: 1080 });
   const [isMuted, setIsMuted] = useState(
@@ -27,7 +33,7 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
   const script = document.createElement('script');
   const [intervalId, setIntervalId] = useState(null);
   const [courseStatusDescription, setcCourseStatusDescription] = useState('');
-  const [isStartRecord, setIsStartRecord] = useState(true);
+  const [recording, setRecording] = useState(false);
 
   const { t, i18n } = useTranslation();
 
@@ -136,7 +142,7 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
       clearInterval(intervalId);
     }
     /// 如果助教正在录制 需要自动结束录制
-    if (!isStartRecord) {
+    if (recording) {
       endRecord();
     }
   };
@@ -179,11 +185,11 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
       message.error(t('直播未开始，不能录制'));
       return;
     }
-    setIsStartRecord(false);
+    setRecording(true);
     coursesAPI.sendCourseEntryNotice(`target=record?code=${courseCode}`);
   };
   const endRecord = () => {
-    setIsStartRecord(true);
+    setRecording(false);
     coursesAPI.sendCourseEntryNotice(`target=endRecord?code=${courseCode}`);
   };
   const openStorageDir = () => {
@@ -238,15 +244,18 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
     </div>
   );
 
+  // FIXME 移动端全屏按钮需要显示
+
   /// 功能按钮栏
   function buildToolBar() {
+    console.log('%c Line:254 🥐 isMobile', 'color:#6ec1c2', isMobile);
+    var style =
+      'group-hover:translate-y-0 group-hover:delay-0 delay-500 translate-y-10 duration-300';
+    if (isMobile) {
+      style = 'translate-y-0';
+    }
     return (
-      <div
-        className={
-          isFullScreen
-            ? 'group-hover:translate-y-0 group-hover:delay-0 delay-500 translate-y-10 duration-300'
-            : ''
-        }>
+      <div className={isFullScreen ? style : ''}>
         <div className='flex justify-between bg-gray-900  '>
           {buildRecordButton()}
           <div className='flex justify-end '>
@@ -278,14 +287,14 @@ const LiveNodePlayer = ({ url, courseCode, isAssistant, isShellWeb }) => {
     if (isShellWeb && isAssistant) {
       return (
         <div className='flex'>
-          {isStartRecord && (
+          {!recording && (
             <button
               className='bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4'
               onClick={() => startRecord()}>
               {t('开始录制')}
             </button>
           )}
-          {!isStartRecord && (
+          {recording && (
             <button
               className='bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4'
               onClick={() => endRecord()}>

src/pages/CoursePlayerPage.jsx

@@ -24,11 +24,11 @@ const CoursePlayerPage = () => {
   const [isShowPdf, setShowPdf] = useState(true);
   const [courseItems, setCourseItems] = useState([]);
   const [isShellWeb, setIsShellWeb] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const [currentTab, setCurrentTab] = useState(t('简介'));
   const [isAssistant, setIsAssistant] = useState(false);
   const [tabsList, setTabsList] = useState([t('简介')]);
   // const [tabsList, setTabsList] = useState([t('简介'), t('资料')]);
-  const [isStartRecord, setIsStartRecord] = useState(true);
   const navigate = useNavigate();
   const myVideoPlayerRef = useRef(null);
   const [heartBeatInterval, setHeartBeatInterval] = useState(30); // 心跳间隔，单位秒
@@ -96,7 +96,7 @@ const CoursePlayerPage = () => {
     if (isMobileDevice()) {
       setTabsList([t('简介'), t('互动区')]);
     }
-  }, [getCourseDeatil, courseCode]);
+  }, [getCourseDeatil, courseCode, addCoursePlayCountOnInit, t]);
 
   useEffect(() => {
     setShowPdf(courseFileUrl.endsWith('.pdf'));
@@ -124,6 +124,7 @@ const CoursePlayerPage = () => {
 
   useEffect(() => {
     setIsShellWeb(FPlatformEnum.byIndex(platform).isShell());
+    setIsMobile(FPlatformEnum.byIndex(platform).isMobile());
   }, [platform]);
 
   /// 发送一次心跳
@@ -223,16 +224,6 @@ const CoursePlayerPage = () => {
       navigator.userAgent.indexOf('IEMobile') !== -1
     );
   };
-  const startRecord = () => {
-    setIsStartRecord(false);
-    coursesAPI.sendCourseEntryNotice(`target=record?code=${courseData.Code}`);
-  };
-  const endRecord = () => {
-    setIsStartRecord(true);
-    coursesAPI.sendCourseEntryNotice(
-      `target=endRecord?code=${courseData.Code}`,
-    );
-  };
 
   // 内容主题区域，显示【课程列表】或【简介】
   const buildContentArea = () => {
@@ -297,6 +288,7 @@ const CoursePlayerPage = () => {
                 courseCode={courseData.Code}
                 isAssistant={courseData.IsAssistant}
                 isShellWeb={isShellWeb}
+                isMobile={isMobile}
               />
             </div>
           )}

src/pages/GuestCoursePlayerPage.jsx

@@ -23,7 +23,6 @@ const GuestCoursePlayerPage = () => {
   const [courseFileUrl, setCourseFileUrl] = useState('');
   const [isShowPdf, setShowPdf] = useState(true);
   const [courseItems, setCourseItems] = useState([]);
-  const [isShellWeb, setIsShellWeb] = useState(false);
   const { t, i18n } = useTranslation();
   const [currentTab, setCurrentTab] = useState(t('简介'));
   const [tabsList, setTabsList] = useState([t('简介')]);
@@ -279,10 +278,7 @@ const GuestCoursePlayerPage = () => {
             <div>
               {isShowPdf && (
                 <div className={`h-[70vh]`}>
-                  <PdfPlayer
-                    courseFileUrl={courseFileUrl}
-                    isShellWeb={isShellWeb}
-                  />
+                  <PdfPlayer courseFileUrl={courseFileUrl} isShellWeb={false} />
                 </div>
               )}
               {!isShowPdf && (
@@ -300,7 +296,8 @@ const GuestCoursePlayerPage = () => {
                 ref={myVideoPlayerRef}
                 courseCode={courseData.Code}
                 isAssistant={courseData.IsAssistant}
-                isShellWeb={isShellWeb}
+                isShellWeb={false}
+                isMobile={isMobileDevice()}
               />
             </div>
           )}

vite.config.ts

@@ -8,5 +8,6 @@ export default defineConfig({
   build: {
     // 指定构建输出路径
     outDir: '../fis_open_web/src/school',
+    target: 'es2015',
   },
 });