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