From d481faf21ad3679ac316d1cbc643ded9bcc3bdcd Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Sat, 12 Oct 2024 10:57:23 +0800 Subject: [PATCH] fix --- src/pages/index copy.tsx | 422 +++++++++++++++++++++++++++++++++++++++ src/pages/index.tsx | 36 +++- 2 files changed, 452 insertions(+), 6 deletions(-) create mode 100644 src/pages/index copy.tsx diff --git a/src/pages/index copy.tsx b/src/pages/index copy.tsx new file mode 100644 index 0000000..6e873f4 --- /dev/null +++ b/src/pages/index copy.tsx @@ -0,0 +1,422 @@ +import React, { useEffect, useRef, useState, useCallback } from 'react' +import './index.less' +import { useLocation } from 'umi' +import axios from 'axios' +import * as HLS from 'hls.js'; +import { ConfigProvider, Slider } from 'antd'; +import PopupHalfScreen from '@/components/Popup'; +import RgupHalfScreen from '@/components/rgup'; + + +export default function HomePage() { + + const location = useLocation() + + const videoRef = useRef(null); + + const [testMusic, settestMusic] = useState("https://alihls.jm-kid.com/6b46fb4068b471ee803f6723b78e0102/fabee8a31fff0477f788beee1ac8901c-ld-encrypt-stream.m3u8") + + const [MusicDesc, setMusicDesc] = useState({}) + + const [currentTime, setcurrentTime] = useState(0) + + const [durantionTime, setdurantionTime] = useState(230) + + const [isPlay, setisPlay] = useState(false) + + //检查是否为第一次播放,每次切换音频时需要重置 + const [isFirst, setisFirst] = useState(true) + + //是否有操作过播放或者切换（用以判断是否需要自动播放，受限于浏览器规则，用户刚进来时没法自动播放） + const [played, setPlayed] = useState(false) + + //音频列表 + const [musicList, setmusicList] = useState([]) + + //控制列表抽屉显示隐藏 + const [isShowList, setisShowList] = useState(false) + + //记录列表序号index + const [listIndex, setlistIndex] = useState(0) + + //记录音频播放模式 + //0 列表循环 + //1 单曲循环 + const [playMode, setplayMode] = useState(0) + + // 定时播放 + const [playTimer, setPlayTimer] = useState(0) + + //控制定时播放弹窗 + const [isShowRg, setisShowRg] = useState(false) + + const [timerId, setTimerId] = useState>(null); + const [selectedDuration, setSelectedDuration] = useState(600); // 默认选择600秒 + + //记录prdtId + const [reprdtId, setreprdtId] = useState('') + + const formatSecondsToTime = (seconds: number) => { + // 将秒数转换为整数秒和毫秒 + const totalSeconds = Math.floor(seconds); + + // 分钟数 + const minutes = Math.floor(totalSeconds / 60); + // 剩余秒数 + const remainingSeconds = totalSeconds % 60; + + // 补零操作 + const formattedMinutes = minutes.toString().padStart(2, '0'); + const formattedSeconds = remainingSeconds.toString().padStart(2, '0'); + + return `${formattedMinutes}:${formattedSeconds}`; + } + + // const { prdtId, resId } = useParams() + + useEffect(() => { + console.log('location=>', location, window.location.href) + + const url = window.location.href + + // 正则表达式来匹配prdtId和resId的值 + const regex = /\?prdtId=(\d+)&resId=(\d+)/; + const match = url.match(regex); + + let prdtId: any; + let resId: any; + + if (match) { + prdtId = match[1]; // 获取第一个捕获组的值 + resId = match[2]; // 获取第二个捕获组的值 + setreprdtId(prdtId) + + console.log(`prdtId: ${prdtId}, resId: ${resId}`); + } else { + console.log('没有找到匹配项'); + } + // + // prdtId => 4500 + // resId => 36208 + + //请求音频列表 + axios.post('https://interapi.jm-kid.com/api/audio/product/detail', { + timestamp: Date.now(), + prdt_id: prdtId ? prdtId : 5653, + }).then((res:any) => { + const cur = res.data.data.Resources.findIndex((e: any) => e.ResId === +resId) + setlistIndex(cur !== -1 ? cur : 0) + console.log('产品音频列表获取成功=>', res.data, typeof resId, cur) + setmusicList(res.data.data.Resources) + }) + }, []) + + const startTimer = () => { + stopTimer() + const id = setTimeout(() => { + setisPlay(false) + setPlayTimer(0) + clearTimeout(id); + setTimerId(null); + // }, playTimer * 1000 * 3); + }, playTimer * 1000 * 60 * 10); + setTimerId(id); + }; + + const stopTimer = () => { + if (timerId !== null) { + clearInterval(timerId); + setTimerId(null); + } + }; + + useEffect(() => { + playTimer && startTimer() + }, [playTimer]) + + useEffect(() => { + isPlay && setPlayed(true) + if(currentTime === durantionTime - 1){ + setcurrentTime(0) + } + + const audio = videoRef.current; + + if (isPlay) { + audioAddEvent() + 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 () { + audio.currentTime = currentTime + audio.play() + setisFirst(false) + }); + }else{ + audio.play() + console.log('继续播放') + } + }else{ + 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() { + audio.play(); // 开始播放 + setisFirst(false) + }); + } + + }else{ + audio.pause() + } + }, [isPlay]) + + useEffect(()=>{ + if(listIndex !== -1 && musicList.length > 0){ + console.log('切换音频', listIndex) + played && setisPlay(false) + axios.post('https://interapi.jm-kid.com/api/audio/resource', { + timestamp: Date.now(), + prdt_id: reprdtId ? reprdtId : 5653, + res_id: musicList[listIndex].ResId, + }).then((res: any) => { + console.log('产品资源获取成功=>', res.data) + + //判断播放方式 + if(res.data.data.Resource.PlayType === 'url'){ + const mDesc = { + PrdtTitle: res.data.data.Resource.ResTitle, + PrdtCover: res.data.data.Resource.ResCover, + } + setMusicDesc(mDesc) + settestMusic(res.data.data.Resource.PlayUrl) + setdurantionTime(res.data.data.Resource.ResDuration) + setisFirst(true) + setcurrentTime(0) + played && setisPlay(true) + }else{ + //app request for video resource + axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', { + "password": "WxBmGKupbl30+v4hfQC8aQ==", + "userName": "VqwgIY4g7s9DanyyqsKP4g==", + }).then((token_res: any) => { + console.log('app token=>', token_res.data.data.token) + + axios.get('https://api.jimeikid.com/jiyoumei/product/app/message/send/history/getPlayInfo',{ + params: { + token: res.data.data.Resource.ResPwd, + videoId: res.data.data.Resource.ResVcode + }, + headers: { + authorization: token_res.data.data.token + } + }).then((rres: any) => { + console.log('视频资源请求成功=>', rres.data) + const mDesc = { + PrdtTitle: res.data.data.Resource.ResTitle, + PrdtCover: res.data.data.Resource.ResCover, + } + setMusicDesc(mDesc) + console.log('视频资源1=>',rres.data.data.body.playInfoList.playInfo[0].playURL, played) + settestMusic(rres.data.data.body.playInfoList.playInfo[0].playURL) + setdurantionTime(rres.data.data.body.playInfoList.playInfo[0].duration) + setisFirst(true) + setcurrentTime(0) + played && setisPlay(true) + }) + }) + } + + + }) + } + + }, [listIndex]) + + + const audioAddEvent = () => { + // if (!played) { + const audio = videoRef.current; + audio.removeEventListener('timeupdate', timeupdateHandle) + audio.addEventListener('timeupdate', timeupdateHandle) + + audio.removeEventListener('pause', timeupdateHandle) + audio.addEventListener('pause', timeupdateHandle) + + audio.removeEventListener('ended', endedHandle) + audio.addEventListener('ended', endedHandle) + + audio.removeEventListener('play', playHandle) + audio.addEventListener('play', playHandle) + // } + } + + const timeupdateHandle = () => { + setcurrentTime(videoRef.current.currentTime) + } + + const endedHandle = () => { + // setisPlay(false) + console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, typeof playMode) + // debugger + if (playMode === 0) { + if(listIndex < musicList.length - 1){ + setlistIndex(listIndex + 1) + }else{ + setlistIndex(0) + } + audioAddEvent() + } else if (playMode === 1) { + videoRef.current.currentTime = 0 + videoRef.current.play() + } + } + + const playHandle = () => { + setisPlay(true) + } + + const handleClickList = () => { + setisShowList(true) + } + + return ( +
+
+
+
+ +
+
+
{MusicDesc.PrdtTitle}
+ + setisShowRg(true)} + > +
+ + + { + console.log('拖拽中', currentTime) + setcurrentTime(currentTime) + }} + onChangeComplete={(currentTime)=>{ + console.log('拖拽结束', currentTime) + const audio = videoRef.current + audio.currentTime = currentTime + }} + /> + + + + +
+
+ {formatSecondsToTime(currentTime)} +
+
+ {formatSecondsToTime(durantionTime)} +
+
+
+ {playMode} + setplayMode(playMode ? 0 : 1)} + > + { + setPlayed(true) + if(listIndex === 0){ + setlistIndex(musicList.length - 1) + }else{ + setlistIndex(listIndex - 1) + } + }} + > + setisPlay(!isPlay)} + > + { + setPlayed(true) + if(listIndex < musicList.length - 1){ + setlistIndex(listIndex + 1) + }else{ + setlistIndex(0) + } + }} + > + +
+ +
+ + + setisShowList(false)} + list={musicList} + index={listIndex} + setIndex={setlistIndex} + > + + setisShowRg(false)} + playTimer={playTimer} + setPlayTimer={setPlayTimer} + > +
+ ) +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 077d0fa..928f538 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -181,20 +181,17 @@ export default function HomePage() { audio.addEventListener('ended', () => { setisPlay(false) + console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, listIndex) if(playMode === 0){ if(listIndex < musicList.length - 1){ setlistIndex(listIndex + 1) }else{ setlistIndex(0) } + videoRef.current.currentTime = 0 }else if(playMode === 1){ - + videoRef.current.currentTime = 0 } - audio.currentTime = 0 - }) - - audio.addEventListener('error', (res: any) => { - console.log('error', res) }) audio.addEventListener('pause', () => { @@ -268,6 +265,33 @@ export default function HomePage() { }, [listIndex]) + + + const timeupdateHandle = () => { + setcurrentTime(videoRef.current.currentTime) + } + + const endedHandle = () => { + // setisPlay(false) + console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, typeof playMode) + // debugger + if (playMode === 0) { + if(listIndex < musicList.length - 1){ + setlistIndex(listIndex + 1) + }else{ + setlistIndex(0) + } + audioAddEvent() + } else if (playMode === 1) { + videoRef.current.currentTime = 0 + videoRef.current.play() + } + } + + const playHandle = () => { + setisPlay(true) + } + const handleClickList = () => { setisShowList(true) }