mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-22 06:42:50 +08:00
上次观看记录跳转
This commit is contained in:
parent
0bce18d9e9
commit
9ecff02070
@ -12,6 +12,7 @@ interface PropInterface {
|
|||||||
record: any;
|
record: any;
|
||||||
progress: number;
|
progress: number;
|
||||||
totalHours: any;
|
totalHours: any;
|
||||||
|
records: any;
|
||||||
onChange: () => void;
|
onChange: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,6 +24,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
|||||||
record,
|
record,
|
||||||
progress,
|
progress,
|
||||||
totalHours,
|
totalHours,
|
||||||
|
records,
|
||||||
onChange,
|
onChange,
|
||||||
}) => {
|
}) => {
|
||||||
// const navigate = useNavigate();
|
// const navigate = useNavigate();
|
||||||
@ -30,6 +32,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
|||||||
const [currentId, setCurrentId] = useState(id);
|
const [currentId, setCurrentId] = useState(id);
|
||||||
const [currentTitle, setCurrentTitle] = useState(title);
|
const [currentTitle, setCurrentTitle] = useState(title);
|
||||||
const [isLastpage, setIsLastpage] = useState<boolean>(false);
|
const [isLastpage, setIsLastpage] = useState<boolean>(false);
|
||||||
|
const [lastSeeDuration, setLastSeeDuration] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData();
|
getData();
|
||||||
@ -40,6 +43,9 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
|||||||
if (index === totalHours.length - 1) {
|
if (index === totalHours.length - 1) {
|
||||||
setIsLastpage(true);
|
setIsLastpage(true);
|
||||||
}
|
}
|
||||||
|
if (records[totalHours[index].id]) {
|
||||||
|
setLastSeeDuration(records[totalHours[index].id].finished_duration);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const goNextVideo = () => {
|
const goNextVideo = () => {
|
||||||
@ -52,6 +58,9 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
|||||||
if (index + 1 === totalHours.length - 1) {
|
if (index + 1 === totalHours.length - 1) {
|
||||||
setIsLastpage(true);
|
setIsLastpage(true);
|
||||||
}
|
}
|
||||||
|
if (records[totalHours[index + 1].id]) {
|
||||||
|
setLastSeeDuration(records[totalHours[index + 1].id].finished_duration);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
setVisible(true);
|
setVisible(true);
|
||||||
};
|
};
|
||||||
@ -64,6 +73,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
|||||||
title={currentTitle}
|
title={currentTitle}
|
||||||
open={visible}
|
open={visible}
|
||||||
isLastpage={isLastpage}
|
isLastpage={isLastpage}
|
||||||
|
lastSeeDuration={lastSeeDuration}
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
setVisible(false);
|
setVisible(false);
|
||||||
onChange();
|
onChange();
|
||||||
|
@ -12,6 +12,7 @@ interface PropInterface {
|
|||||||
title: string;
|
title: string;
|
||||||
open: boolean;
|
open: boolean;
|
||||||
isLastpage: boolean;
|
isLastpage: boolean;
|
||||||
|
lastSeeDuration: number;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
goNextVideo: () => void;
|
goNextVideo: () => void;
|
||||||
}
|
}
|
||||||
@ -22,6 +23,7 @@ export const VideoModel: React.FC<PropInterface> = ({
|
|||||||
title,
|
title,
|
||||||
open,
|
open,
|
||||||
isLastpage,
|
isLastpage,
|
||||||
|
lastSeeDuration,
|
||||||
onCancel,
|
onCancel,
|
||||||
goNextVideo,
|
goNextVideo,
|
||||||
}) => {
|
}) => {
|
||||||
@ -29,27 +31,36 @@ export const VideoModel: React.FC<PropInterface> = ({
|
|||||||
const [playUrl, setPlayUrl] = useState<string>("");
|
const [playUrl, setPlayUrl] = useState<string>("");
|
||||||
const [playDuration, setPlayDuration] = useState(0);
|
const [playDuration, setPlayDuration] = useState(0);
|
||||||
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
|
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
|
||||||
|
const [lastSeeValue, setLastSeeValue] = useState({});
|
||||||
const myRef = useRef(0);
|
const myRef = useRef(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let params = null;
|
||||||
if (open) {
|
if (open) {
|
||||||
|
if (lastSeeDuration > 0) {
|
||||||
|
params = {
|
||||||
|
time: 5,
|
||||||
|
pos: lastSeeDuration,
|
||||||
|
};
|
||||||
|
setLastSeeValue(params);
|
||||||
|
}
|
||||||
setPlayendedStatus(false);
|
setPlayendedStatus(false);
|
||||||
getVideoUrl();
|
getVideoUrl(params);
|
||||||
}
|
}
|
||||||
}, [open, id, cid]);
|
}, [open, id, cid, lastSeeDuration]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
myRef.current = playDuration;
|
myRef.current = playDuration;
|
||||||
}, [playDuration]);
|
}, [playDuration]);
|
||||||
|
|
||||||
const getVideoUrl = () => {
|
const getVideoUrl = (params: any) => {
|
||||||
course.playUrl(cid, id).then((res: any) => {
|
course.playUrl(cid, id).then((res: any) => {
|
||||||
setPlayUrl(res.data.url);
|
setPlayUrl(res.data.url);
|
||||||
initDPlayer(res.data.url, 0);
|
initDPlayer(res.data.url, 0, params);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const initDPlayer = (playUrl: string, isTrySee: number) => {
|
const initDPlayer = (playUrl: string, isTrySee: number, params: any) => {
|
||||||
window.player = new window.DPlayer({
|
window.player = new window.DPlayer({
|
||||||
container: document.getElementById("meedu-player-container"),
|
container: document.getElementById("meedu-player-container"),
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
@ -66,9 +77,8 @@ export const VideoModel: React.FC<PropInterface> = ({
|
|||||||
opacity: Number(systemConfig.playerBulletSecretOpacity),
|
opacity: Number(systemConfig.playerBulletSecretOpacity),
|
||||||
},
|
},
|
||||||
ban_drag: false,
|
ban_drag: false,
|
||||||
last_see_pos: 0,
|
last_see_pos: params,
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听播放进度更新evt
|
// 监听播放进度更新evt
|
||||||
window.player.on("timeupdate", () => {
|
window.player.on("timeupdate", () => {
|
||||||
playTimeUpdate(parseInt(window.player.video.currentTime), false);
|
playTimeUpdate(parseInt(window.player.video.currentTime), false);
|
||||||
@ -121,6 +131,7 @@ export const VideoModel: React.FC<PropInterface> = ({
|
|||||||
<div
|
<div
|
||||||
className={styles["alert-button"]}
|
className={styles["alert-button"]}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
setLastSeeValue({});
|
||||||
setPlayendedStatus(false);
|
setPlayendedStatus(false);
|
||||||
goNextVideo();
|
goNextVideo();
|
||||||
}}
|
}}
|
||||||
|
@ -136,6 +136,7 @@ const CoursePage = () => {
|
|||||||
cid={item.course_id}
|
cid={item.course_id}
|
||||||
title={item.title}
|
title={item.title}
|
||||||
record={learnHourRecord[item.id]}
|
record={learnHourRecord[item.id]}
|
||||||
|
records={learnHourRecord}
|
||||||
duration={item.duration}
|
duration={item.duration}
|
||||||
progress={
|
progress={
|
||||||
(learnHourRecord[item.id].finished_duration * 100) /
|
(learnHourRecord[item.id].finished_duration * 100) /
|
||||||
@ -151,6 +152,7 @@ const CoursePage = () => {
|
|||||||
cid={item.course_id}
|
cid={item.course_id}
|
||||||
title={item.title}
|
title={item.title}
|
||||||
record={null}
|
record={null}
|
||||||
|
records={learnHourRecord}
|
||||||
duration={item.duration}
|
duration={item.duration}
|
||||||
progress={0}
|
progress={0}
|
||||||
totalHours={totalHours}
|
totalHours={totalHours}
|
||||||
@ -174,6 +176,7 @@ const CoursePage = () => {
|
|||||||
cid={item.course_id}
|
cid={item.course_id}
|
||||||
title={it.title}
|
title={it.title}
|
||||||
record={learnHourRecord[it.id]}
|
record={learnHourRecord[it.id]}
|
||||||
|
records={learnHourRecord}
|
||||||
duration={it.duration}
|
duration={it.duration}
|
||||||
progress={
|
progress={
|
||||||
(learnHourRecord[it.id].finished_duration * 100) /
|
(learnHourRecord[it.id].finished_duration * 100) /
|
||||||
@ -189,6 +192,7 @@ const CoursePage = () => {
|
|||||||
cid={item.course_id}
|
cid={item.course_id}
|
||||||
title={it.title}
|
title={it.title}
|
||||||
record={null}
|
record={null}
|
||||||
|
records={learnHourRecord}
|
||||||
duration={it.duration}
|
duration={it.duration}
|
||||||
progress={0}
|
progress={0}
|
||||||
totalHours={totalHours}
|
totalHours={totalHours}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user