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(
{item.text}
{ - type === item.mode &&
+ playTimer === item.mode &&
}
)) 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(0) + // 定时播放 + const [playTimer, setPlayTimer] = useState(0) + //控制定时播放弹窗 const [isShowRg, setisShowRg] = useState(false) const [timerId, setTimerId] = useState>(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() {
-
{MusicDesc.PrdtTitle}
+
+
{MusicDesc.PrdtTitle}
+ + setisShowRg(true)} + > +
{ - 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)} > setisShowRg(false)} - type={playMode} - setType={setplayMode} + playTimer={playTimer} + setPlayTimer={setPlayTimer} >
)