From a68cb5b38b46a5fba8e7ce8b25493a1216f724f9 Mon Sep 17 00:00:00 2001
From: eson <474420502@qq.com>
Date: Thu, 28 Mar 2024 03:34:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                     |  2 +-
 src/Config.jsx                 |  2 +-
 src/components/CategoryNav.jsx |  4 ++++
 src/components/VideoPlayer.jsx | 31 ++++++++++++++++++++++---------
 src/index.css                  | 25 +++++++++++++++++++++++++
 5 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8fd5bc7..b791477 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,5 +50,5 @@ yarn-error.log*
 movie
 server/server
 server/main
-__debug_bin
+__debug_bin*
 gpt*.txt
diff --git a/src/Config.jsx b/src/Config.jsx
index 5c0ccfd..32dba46 100644
--- a/src/Config.jsx
+++ b/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;
\ No newline at end of file
diff --git a/src/components/CategoryNav.jsx b/src/components/CategoryNav.jsx
index d26478c..34cea69 100644
--- a/src/components/CategoryNav.jsx
+++ b/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) => (
diff --git a/src/components/VideoPlayer.jsx b/src/components/VideoPlayer.jsx
index 9d49bfb..d54f5e1 100644
--- a/src/components/VideoPlayer.jsx
+++ b/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;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..0347ebf 100644
--- a/src/index.css
+++ b/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));
+    }
+ 
+}
\ No newline at end of file