恢复

.gitignore

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

package.json

@@ -21,8 +21,7 @@
     "react-swipe-handler": "^1.1.2",
     "react-swipeable": "^7.0.1",
     "swipeable": "^1.0.5",
-    "web-vitals": "^2.1.4",
-    "yarn": "^1.22.19"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

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/Main.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback, useReducer } from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -10,7 +10,24 @@ import ConfigContext from './Config';
 import MovieCard from './components/MovieCard';
 import CategoryNav from './components/CategoryNav';
 
-const initialState = {
+const Main = () => {
+  const config = useContext(ConfigContext);
+  const [loading, setLoading] = useState(false);
+  const categories = [
+    { label: '15min', idx: 0 },
+    { label: '30min', idx: 1 },
+    { label: '60min', idx: 2 },
+    { label: '大于60min', idx: 3 },
+  ];
+
+  const limit = 20;
+
+  const getInitialParams = () => {
+    const storedParams = localStorage.getItem('params');
+    if (storedParams) {
+      return JSON.parse(storedParams);
+    } else {
+      return {
         lastCategory: 0,
         history: {
           0: { lastPage: 1, scrollPos: 0 },
@@ -18,55 +35,24 @@ const initialState = {
           2: { lastPage: 1, scrollPos: 0 },
           3: { lastPage: 1, scrollPos: 0 },
         },
-  pagination: {
+      };
+    }
+  };
+
+  const [params, setParams] = useState(getInitialParams());
+
+  const [pagination, setPagination] = useState({
     movies: [],
-    page: 1,
+    page: params.history[params.lastCategory].lastPage,
     total: 1,
     length: 1,
-  },
-  loading: false,
-};
-
-function reducer(state, action) {
-  switch (action.type) {
-    case 'UPDATE_LAST_CATEGORY':
-      return { ...state, lastCategory: action.payload.lastCategory };
-    case 'UPDATE_HISTORY':
-      return {
-        ...state,
-        history: {
-          ...state.history,
-          [action.payload.category]: action.payload.newData,
-        },
-      };
-    case 'SET_PAGINATION':
-      return { ...state, pagination: action.payload.pagination };
-    case 'SET_LOADING':
-      return { ...state, loading: action.payload.loading };
-    default:
-      return state;
-  }
-}
-
-const Main = () => {
-  const config = useContext(ConfigContext);
-
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const updateLastCategory = useCallback((newCategory) => {
-    dispatch({ type: 'UPDATE_LAST_CATEGORY', payload: { lastCategory: newCategory } });
-  }, []);
-
-  const updateHistory = useCallback((category, newData) => {
-    dispatch({ type: 'UPDATE_HISTORY', payload: { category, newData } });
-  }, []);
+  });
 
   const fetchMovies = useCallback(async (category, page) => {
-    dispatch({ type: 'SET_LOADING', payload: { loading: true } });
-
+    setLoading(true);
     try {
       const response = await axios.get(
-        `${config.Host}/movie/?page=${page}&limit=${config.limit}&category=${category}` // 修改这里
+        `${config.Host}/movie/?page=${page}&limit=${limit}&category=${category}`
       );
 
       if (response.status === 200) {
@@ -75,85 +61,104 @@ const Main = () => {
         if (data.items.length === 0 && page > 1) {
           fetchMovies(category, page - 1);
         } else {
-          dispatch({
-            type: 'SET_PAGINATION',
-            payload: {
-              pagination: {
+          setPagination({
             movies: data.items,
             page: page,
             total: data.total,
-                length: Math.ceil(data.total / config.limit), // 修改这里
-              },
-            },
+            length: Math.ceil(data.total / limit),
           });
         }
       }
     } catch (error) {
       console.error('Error fetching movies:', error);
     } finally {
-      dispatch({ type: 'SET_LOADING', payload: { loading: false } });
+      setLoading(false);
     }
-  }, [config.Host, config.limit]); // 修改这里
+  }, [config.Host, limit]);
 
   useEffect(() => {
-    const currentCategory = state.lastCategory;
-    const currentPage = state.history[currentCategory].lastPage;
+    const currentCategory = params.lastCategory;
+    const currentPage = params.history[currentCategory].lastPage;
     fetchMovies(currentCategory, currentPage);
-  }, [fetchMovies, state]);
+  }, [fetchMovies, params]);
+
+  const updateParams = useCallback((newParams) => {
+    setParams((prevParams) => {
+      const updatedParams = { ...prevParams, ...newParams };
+      localStorage.setItem('params', JSON.stringify(updatedParams));
+      return updatedParams;
+    });
+  }, []);
 
   const handlePageChange = useCallback(
     (event, page) => {
-      const currentCategory = state.lastCategory;
-      updateHistory(currentCategory, { ...state.history[currentCategory], lastPage: page });
+      const currentCategory = params.lastCategory;
+      updateParams({
+        history: {
+          ...params.history,
+          [currentCategory]: { ...params.history[currentCategory], lastPage: page },
+        },
+      });
       fetchMovies(currentCategory, page);
     },
-    [fetchMovies, state, updateHistory]
+    [fetchMovies, params, updateParams]
   );
 
+  // 导致递归刷新
   const handleCategoryChange = useCallback(
     (category) => {
-      const currentPage = state.history[category].lastPage;
+      const currentPage = params.history[category].lastPage;
       fetchMovies(category, currentPage);
 
-      const currentCategory = state.lastCategory;
-      updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
-      updateLastCategory(category);
+      const currentCategory = params.lastCategory;
+      updateParams({
+        lastCategory: category,
+        history: {
+          ...params.history,
+          [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
         },
-    [fetchMovies, state, updateHistory, updateLastCategory]
+      });
+    },
+    [fetchMovies, params, updateParams]
   );
 
   const handleRenderComplete = useCallback(() => {
-    const { scrollPos } = state.history[state.lastCategory];
+    const { scrollPos } = params.history[params.lastCategory];
     window.scrollTo(0, scrollPos);
-  }, [state]);
+  }, [params]);
 
   const handleMovieCardClick = () => {
-    const currentCategory = state.lastCategory;
-    updateHistory(currentCategory, { ...state.history[currentCategory], scrollPos: window.scrollY });
+    const currentCategory = params.lastCategory;
+    updateParams({
+      history: {
+        ...params.history,
+        [currentCategory]: { ...params.history[currentCategory], scrollPos: window.scrollY },
+      },
+    });
   };
 
   return (
     <Container style={{ marginTop: 20 }}>
       <CategoryNav
-        categories={config.categories} // 修改这里
-        currentCategory={state.lastCategory} // 修改这里
+        categories={categories}
+        currentCategory={params.lastCategory}
         onCategoryChange={handleCategoryChange}
       />
 
-      <PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
 
-      {state.loading ? (
+      {loading ? (
         <Loading />
       ) : (
         <MoviesGrid
-          movies={state.pagination.movies}
+          movies={pagination.movies}
           config={config}
           onRenderComplete={handleRenderComplete}
          onMovieCardClick={handleMovieCardClick}
         />
       )}
 
-      <PaginationWrapper page={state.pagination.page} length={state.pagination.length} onPageChange={handlePageChange} />
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
     </Container>
   );
 };
@@ -164,6 +169,7 @@ const PaginationWrapper = ({ page, length, onPageChange }) => (
   </Grid>
 );
  
+
 const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
   useEffect(() => {
     onRenderComplete();
@@ -179,7 +185,7 @@ const MoviesGrid = ({ movies, config, onRenderComplete, onMovieCardClick }) => {
           <Link
             to={`/res/${item.filename}`}
             style={{ textDecoration: 'none', paddingBottom: 10 }}
-            onClick={onMovieCardClick}
+            onClick={onMovieCardClick} // 修改这里
           >
             <MovieCard movie={item} config={config} />
           </Link>

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));
+    }
+ 
+}