feat: video active

src/pages/Videos.tsx

@@ -6,7 +6,7 @@ import Video from './component/Video';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import api from '../api';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 // type VideosProps = {
 //     type: string;
 //     profileImg: string;
@@ -35,19 +35,21 @@ export default function Videos() {
     navigate(`/review/${data.data.list[0].id}`);
   }, [data, id, navigate]);
 
+  const [activeIndex, setActiveIndex] = useState(0);
+
   return (
     <div className="flex flex-col h-screen">
       <Header back review white text=" " fixed />
       <Swiper
         className="w-full h-full flex-1 bg-black"
         direction="vertical"
         slidesPerView={1}
-        onSlideChange={(d) => console.log(JSON.stringify(d))}
+        onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
       >
-        {data?.data.list.map((review) => (
+        {data?.data.list.map((review, index) => (
           <SwiperSlide key={review.id}>
             <div className="h-full w-full">
-              <Video {...review} />
+              <Video {...review} active={activeIndex === index} />
             </div>
           </SwiperSlide>
         ))}

src/pages/component/Video.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import Menu from './Menu';
 import Grade from './Grade';
@@ -10,7 +10,7 @@ type VideoProps = {
   grade?: string;
 };
 
-const Video = ({ user, place, tags, stars, likes }: VideoProps) => {
+const Video = ({ user, place, tags, stars, likes, active }: VideoProps) => {
   const videoEl = React.useRef<HTMLVideoElement>(null);
 
   const handleVideoClick = () => {
@@ -23,6 +23,16 @@ const Video = ({ user, place, tags, stars, likes }: VideoProps) => {
     }
   };
 
+  useEffect(() => {
+    if (videoEl.current) {
+      if (active) {
+        videoEl.current.play();
+      } else {
+        videoEl.current.pause();
+      }
+    }
+  }, [active]);
+
   return (
     <div
       className="w-full h-custom overflow-hidden relative bg-black"

tailwind.config.js

@@ -13,7 +13,7 @@ export default {
       },
       backgroundImage: {
         'gradient-video':
-          'linear-gradient(to top,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 160px),linear-gradient(to bottom,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 96px)',
+          'linear-gradient(to top,rgba(0,0,0,.8) 120px,rgba(0,0,0,0) 260px),linear-gradient(to bottom,rgba(0,0,0,.4) 0,rgba(0,0,0,0) 96px)',
       },
       height: {
         custom: 'calc(100vh - 60px)',