添加 修改

.gitignore

@@ -50,5 +50,5 @@ yarn-error.log*
 movie
 server/server
 server/main
-__debug_bin
+__debug_bin*
 gpt*.txt

src/Config.jsx

@@ -4,7 +4,7 @@ import { createContext } from 'react';
 const ConfigContext = createContext();
 
 export const config = {
-  Host: 'http://192.168.31.121:4444',
+  Host: 'http://192.168.124.2:4444',
 };
 
 export default ConfigContext;

src/components/CategoryNav.jsx

@@ -9,11 +9,15 @@ const CategoryNav = ({ categories, currentCategory, onCategoryChange }) => {
   };
 
   return (
+    
     <Tabs
       value={currentCategory}
       onChange={handleChange}
       indicatorColor="primary"
       textColor="primary"
+      ScrollButtonComponent="div"
+      variant="scrollable"
+      scrollButtons="auto"
       centered
     >
       {categories.map((category, idx) => (

src/components/VideoPlayer.jsx

@@ -1,8 +1,10 @@
-import {React, useContext} from 'react';
+import {React, useContext, useState} from 'react';
 import { useParams } from 'react-router-dom';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import ConfigContext from '../Config';
+import ReactPlayer from 'react-player';
+
 
 
 
@@ -10,21 +12,32 @@ const VideoPlayer = () => {
   const config = useContext(ConfigContext);
   const { filename } = useParams();
 
+  const [isFullScreen, setIsFullScreen] = useState(false);
+
+  const handleFullScreenChange = (player) => {
+    setIsFullScreen(!isFullScreen);
+    if (isFullScreen) {
+      player.exitFullscreen();
+    } else {
+      player.requestFullscreen();
+    }
+  };
+
+
   return (
     <Container>
       <Typography variant="h6" gutterBottom>
         {filename}
       </Typography>
-      <video
-        autoPlay={true}
+      <ReactPlayer
+        url={`${config.Host}/res/${filename}`}
         controls
-        style={{ width: '100%', maxHeight: '70vh' }}
-        src={`${config.Host}/res/${filename}`}
-      >
-        您的浏览器不支持HTML5视频播放。
-      </video>
+        width="100%"
+        height="auto"
+        playing={isFullScreen}
+        onReady={handleFullScreenChange}
+      />
     </Container>
   );
 };
-
 export default VideoPlayer;

src/index.css

@@ -11,3 +11,28 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+/* 对于较小的屏幕 */
+@media only screen and (max-width: 600px) {
+    .MoviesGrid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
+   
+}
+
+/* 中等大小屏幕 */
+@media only screen and (min-width: 601px) and (max-width: 960px) {
+    .MoviesGrid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+ 
+}
+
+/* 大屏幕 */
+@media only screen and (min-width: 961px) {
+    .MoviesGrid {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
+ 
+}