From d9c760fda8cd1d275a00ffe0ff6e9006ca471b33 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 9 Oct 2024 17:58:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E6=97=B6=E6=92=AD=E6=94=BE=E7=AD=89?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/rgup/index.tsx | 22 +++++-----
 src/pages/index.less          | 13 +++++-
 src/pages/index.tsx           | 83 ++++++++++++-----------------------
 3 files changed, 52 insertions(+), 66 deletions(-)

diff --git a/src/components/rgup/index.tsx b/src/components/rgup/index.tsx
index 6e4722f..9bc21e1 100644
--- a/src/components/rgup/index.tsx
+++ b/src/components/rgup/index.tsx
@@ -4,28 +4,28 @@ import './index.less'
 const textList = [
   {
     text: '不限制',
-    mode: 2,
+    mode: 0,
   },
   {
     text: '10分钟后停止播放',
-    mode: 3,
+    mode: 1,
   },
   {
     text: '20分钟后停止播放',
-    mode: 4,
+    mode: 2,
   },
   {
     text: '30分钟后停止播放',
-    mode: 5,
+    mode: 3,
   },
 ]
 
 export default function RgupHalfScreen(
   { 
-    visible, 
-    onClose, 
-    type,
-    setType,
+    visible,
+    onClose,
+    playTimer,
+    setPlayTimer,
   }: any) {
 
   //管理关闭动画状态
@@ -75,18 +75,18 @@ export default function RgupHalfScreen(
                 <div 
                   className='item'
                   key={index}  
-                  onClick={setType.bind(null, item.mode)}
+                  onClick={setPlayTimer.bind(null, item.mode)}
                 >
                   <div 
                     className='text'
                     style={
-                      type === item.mode ? {fontWeight: '600', color: '#3ba366'} : {}
+                      playTimer === item.mode ? {fontWeight: '600', color: '#3ba366'} : {}
                     }  
                   >
                     {item.text}
                   </div>
                   {
-                    type === item.mode && <div className='icon'></div>
+                    playTimer === item.mode && <div className='icon'></div>
                   }
                 </div>
                 ))
diff --git a/src/pages/index.less b/src/pages/index.less
index d906d52..06209c1 100644
--- a/src/pages/index.less
+++ b/src/pages/index.less
@@ -36,12 +36,23 @@
     flex-direction: column;
     gap: .5rem;
 
+    .audio_title_wrap {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 2rem 0 1rem;
+      .audio_btn {
+        width: 3rem;
+        height: 3rem;
+        background-repeat: no-repeat;
+        background-size: cover;
+      }
+    }
     .audio_title {
       font-size: 1.125rem;
       font-weight: 600;
       color: #000;
       text-align: center;
-      margin: 2rem auto 1rem 0;
     }
     
     .audio_discription {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a89a098..077d0fa 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -42,14 +42,15 @@ export default function HomePage() {
   //记录音频播放模式
   //0 列表循环
   //1 单曲循环
-  //2 定时播放
   const [playMode, setplayMode] = useState<number>(0)
 
+  // 定时播放
+  const [playTimer, setPlayTimer] = useState<number>(0)
+
   //控制定时播放弹窗
   const [isShowRg, setisShowRg] = useState(false)
 
   const [timerId, setTimerId] = useState<null | ReturnType<typeof setInterval>>(null);
-  const [seconds, setSeconds] = useState(0);
   const [selectedDuration, setSelectedDuration] = useState(600); // 默认选择600秒
 
   //记录prdtId
@@ -111,15 +112,14 @@ export default function HomePage() {
   }, [])
 
   const startTimer = () => {
-    if (timerId !== null) return; // 如果已经有计时器在运行，则返回
-    let id = setInterval(() => {
-      setSeconds(prevSeconds => prevSeconds + 1);
-      if (seconds >= selectedDuration - 1) {
-        videoRef.current = null;
-        clearInterval(id);
-        setTimerId(null);
-      }
-    }, 1000);
+    stopTimer()
+    const id = setTimeout(() => {
+      setisPlay(false)
+      setPlayTimer(0)
+      clearTimeout(id);
+      setTimerId(null);
+    // }, playTimer * 1000 * 3);
+  }, playTimer * 1000 * 60 * 10);
     setTimerId(id);
   };
 
@@ -127,29 +127,12 @@ export default function HomePage() {
     if (timerId !== null) {
       clearInterval(timerId);
       setTimerId(null);
-      setSeconds(0); // 重置秒数
     }
   };
 
   useEffect(() => {
-    return () => {
-      if (timerId !== null) {
-        clearInterval(timerId);
-      }
-    };
-  }, [timerId]); // 只有当 timerId 发生变化时才执行
-
-  useEffect(() => {
-    if(playMode > 2){
-      if(selectedDuration !== (playMode - 2) * 600){
-        stopTimer()
-        setSelectedDuration((playMode - 2) * 600)
-        startTimer()
-      }
-    }else if(playMode === 2){
-      stopTimer()
-    }
-  }, [playMode])
+    playTimer && startTimer()
+  }, [playTimer])
 
   useEffect(() => {
     isPlay && setPlayed(true)
@@ -160,14 +143,14 @@ export default function HomePage() {
     const audio = videoRef.current;
 
     if (isPlay) {
-      if(currentTime !== 0){
+      if (currentTime !== 0) {
         if(isFirst){
           console.log('第一次播放')
           const hls = new HLS.default(); // 使用 HLS.js
           console.log('加载HLS流地址=>', testMusic)
           hls.loadSource(testMusic); // 加载 HLS 流地址
           hls.attachMedia(audio); // 关联 media 元素
-          hls.on(HLS.Events.MANIFEST_PARSED, function() {
+          hls.on(HLS.Events.MANIFEST_PARSED, function () {
             audio.currentTime = currentTime
             audio.play()
             setisFirst(false)
@@ -184,6 +167,7 @@ export default function HomePage() {
         hls.attachMedia(audio); // 关联 media 元素
         hls.on(HLS.Events.MANIFEST_PARSED, function() {
           audio.play(); // 开始播放
+          setisFirst(false)
         });
       }
       
@@ -205,8 +189,6 @@ export default function HomePage() {
         }
       }else if(playMode === 1){
         
-      }else if(playMode === 2){
-        setplayMode(0)
       }
       audio.currentTime = 0
     })
@@ -217,7 +199,6 @@ export default function HomePage() {
 
     audio.addEventListener('pause', () => {
       setcurrentTime(audio.currentTime)
-      setisPlay(false)
     })
 
     audio.addEventListener('play', () => {
@@ -287,12 +268,6 @@ export default function HomePage() {
     
   }, [listIndex])
 
-  useEffect(()=>{
-    if(playMode > 1){
-      setisShowRg(true)
-    }
-  }, [playMode])
-
   const handleClickList = () => {
     setisShowList(true)
   }
@@ -307,7 +282,15 @@ export default function HomePage() {
       </div>
       
       <div className='audio_progress_bar'>
-        <div className='audio_title'>{MusicDesc.PrdtTitle}</div>
+        <div className="audio_title_wrap">
+          <div className='audio_title'>{MusicDesc.PrdtTitle}</div>
+    
+          <img
+            className='audio_btn'
+            src='https://oss.jm-kid.com/wx_5colorflower/assets/regularPlay.png'
+            onClick={() => setisShowRg(true)}
+          ></img>
+          </div>
 
         <ConfigProvider
           theme={{
@@ -363,16 +346,8 @@ export default function HomePage() {
         <div className='audio_operate'>
           <img
             className='audio_operate_btn0'
-            src={playMode === 0 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/listPlay.png' : playMode === 1 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/cyclePlay.png' : 'https://oss.jm-kid.com/wx_5colorflower/assets/regularPlay.png'}
-            onClick={() => {
-              if(playMode === 0){
-                setplayMode(1)
-              }else if(playMode === 1){
-                setplayMode(2)
-              }else{
-                setplayMode(0)
-              }
-            }}
+            src={playMode === 0 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/listPlay.png' : 'https://oss.jm-kid.com/wx_5colorflower/assets/cyclePlay.png'}
+            onClick={() => setplayMode(playMode ? 0 : 1)}
           ></img>
           <img 
             className='audio_operate_btn0'
@@ -424,8 +399,8 @@ export default function HomePage() {
       <RgupHalfScreen
         visible={isShowRg}
         onClose={() => setisShowRg(false)}
-        type={playMode}
-        setType={setplayMode}
+        playTimer={playTimer}
+        setPlayTimer={setPlayTimer}
       ></RgupHalfScreen>
     </div>
   )