yexuejc007/PlayEdu-h5
1
0
Fork 0
mirror of https://github.com/PlayEdu/h5.git synced 2025-06-22 23:47:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

视频详情以及视频播放页面优化优化

Browse Source
This commit is contained in:
禺狨 2023-07-04 15:00:29 +08:00
parent c6aaa868bc
commit 74b806b13d
4 changed files with 91 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/course/compenents/hour.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect, useState } from "react";
import styles from "./hour.module.scss"; import styles from "./hour.module.scss";
import { durationFormat } from "../../../utils/index"; import { durationFormat } from "../../../utils/index";
@ -8,7 +8,6 @@ interface PropInterface {
title: string; title: string;
duration: number; duration: number;
record: any; record: any;
progress: number;
onSuccess: (cid: number, id: number) => void; onSuccess: (cid: number, id: number) => void;
} }
@ -18,9 +17,17 @@ export const HourCompenent: React.FC<PropInterface> = ({
title, title,
duration, duration,
record, record,
progress,
onSuccess, onSuccess,
}) => { }) => {
const [userProgress, setUserProgress] = useState(0);
useEffect(() => {
if (record?.finished_duration && record?.total_duration) {
setUserProgress((record.finished_duration * 100) / record.total_duration);
} else {
setUserProgress(0);
}
}, [record]);
return ( return (
<> <>
<div <div
@ -34,7 +41,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
<i className="iconfont icon-icon-video"></i> <i className="iconfont icon-icon-video"></i>
<span className={styles["label"]}>视频</span> <span className={styles["label"]}>视频</span>
</div> </div>
{progress > 0 && progress < 100 && ( {userProgress > 0 && userProgress < 100 && (
<div className={styles["studying"]}> <div className={styles["studying"]}>
<span> <span>
学习到 学习到
@ -42,14 +49,14 @@ export const HourCompenent: React.FC<PropInterface> = ({
</span> </span>
</div> </div>
)} )}
{progress >= 100 && ( {userProgress >= 100 && (
<div className={styles["complete"]}> <div className={styles["complete"]}>
<span>已学完</span>{" "} <span>已学完</span>{" "}
</div> </div>
)} )}
</div> </div>
<div className={styles["title"]}> <div className={styles["title"]}>
{title}{" "}({durationFormat(Number(duration))}) {title} ({durationFormat(Number(duration))})
</div> </div>
</div> </div>
</> </>

16
src/pages/course/compenents/videoHour.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect, useState } from "react";
import styles from "./hour.module.scss"; import styles from "./hour.module.scss";
import { durationFormat } from "../../../utils/index"; import { durationFormat } from "../../../utils/index";
@ -9,7 +9,6 @@ interface PropInterface {
title: string; title: string;
duration: number; duration: number;
record: any; record: any;
progress: number;
onSuccess: (cid: number, id: number) => void; onSuccess: (cid: number, id: number) => void;
} }
@ -20,9 +19,16 @@ export const HourCompenent: React.FC<PropInterface> = ({
title, title,
duration, duration,
record, record,
progress,
onSuccess, onSuccess,
}) => { }) => {
const [userProgress, setUserProgress] = useState(0);
useEffect(() => {
if (record?.finished_duration && record?.total_duration) {
setUserProgress((record.finished_duration * 100) / record.total_duration);
} else {
setUserProgress(0);
}
}, [record]);
return ( return (
<> <>
<div <div
@ -41,7 +47,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
<span>学习中</span> <span>学习中</span>
</div> </div>
)} )}
{vid !== id && progress > 0 && progress < 100 && ( {vid !== id && userProgress > 0 && userProgress < 100 && (
<div className={styles["studying"]}> <div className={styles["studying"]}>
<span> <span>
学习到 学习到
@ -49,7 +55,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
</span> </span>
</div> </div>
)} )}
{vid !== id && progress >= 100 && ( {vid !== id && userProgress >= 100 && (
<div className={styles["complete"]}> <div className={styles["complete"]}>
<span>已学完</span>{" "} <span>已学完</span>{" "}
</div> </div>

77
src/pages/course/index.tsx
View File

@ -128,34 +128,16 @@ const CoursePage = () => {
<div className={styles["hours-list-box"]} style={{ marginTop: 10 }}> <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
{hours[0].map((item: CourseHourModel) => ( {hours[0].map((item: CourseHourModel) => (
<div key={item.id} className={styles["hours-it"]}> <div key={item.id} className={styles["hours-it"]}>
{learnHourRecord[item.id] ? ( <HourCompenent
<HourCompenent id={item.id}
id={item.id} cid={item.course_id}
cid={item.course_id} title={item.title}
title={item.title} record={learnHourRecord[item.id]}
record={learnHourRecord[item.id]} duration={item.duration}
duration={item.duration} onSuccess={(cid: number, id: number) => {
progress={ playVideo(cid, id);
(learnHourRecord[item.id].finished_duration * 100) / }}
learnHourRecord[item.id].total_duration ></HourCompenent>
}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
) : (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={null}
duration={item.duration}
progress={0}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
</div> </div>
))} ))}
</div> </div>
@ -168,35 +150,16 @@ const CoursePage = () => {
<div className={styles["chapter-name"]}>{item.name}</div> <div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id]?.map((it: CourseHourModel) => ( {hours[item.id]?.map((it: CourseHourModel) => (
<div key={it.id} className={styles["hours-it"]}> <div key={it.id} className={styles["hours-it"]}>
{learnHourRecord[it.id] && ( <HourCompenent
<HourCompenent id={it.id}
id={it.id} cid={item.course_id}
cid={item.course_id} title={it.title}
title={it.title} record={learnHourRecord[it.id]}
record={learnHourRecord[it.id]} duration={it.duration}
duration={it.duration} onSuccess={(cid: number, id: number) => {
progress={ playVideo(cid, id);
(learnHourRecord[it.id].finished_duration * 100) / }}
learnHourRecord[it.id].total_duration ></HourCompenent>
}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
{!learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={null}
duration={it.duration}
progress={0}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
</div> </div>
))} ))}
</div> </div>

129
src/pages/course/video.tsx
View File

@ -10,6 +10,14 @@ import { HourCompenent } from "./compenents/videoHour";
declare const window: any; declare const window: any;
type LocalUserLearnHourRecordModel = {
[key: number]: UserLearnHourRecordModel;
};
type LocalCourseHour = {
[key: number]: CourseHourModel[];
};
const CoursePlayPage = () => { const CoursePlayPage = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const params = useParams(); const params = useParams();
@ -19,17 +27,17 @@ const CoursePlayPage = () => {
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 [lastSeeValue, setLastSeeValue] = useState({});
const [course, setCourse] = useState<any>({}); const [course, setCourse] = useState<CourseModel | null>(null);
const [hour, setHour] = useState<any>({}); const [hour, setHour] = useState<any>({});
const [loading, setLoading] = useState<Boolean>(false); const [loading, setLoading] = useState<Boolean>(false);
const [isLastpage, setIsLastpage] = useState<Boolean>(false); const [isLastpage, setIsLastpage] = useState<Boolean>(false);
const [totalHours, setTotalHours] = useState<any>([]); const [totalHours, setTotalHours] = useState<any>([]);
const [playingTime, setPlayingTime] = useState(0); const [playingTime, setPlayingTime] = useState(0);
const [watchedSeconds, setWatchedSeconds] = useState(0); const [watchedSeconds, setWatchedSeconds] = useState(0);
const [chapters, setChapters] = useState<any>([]); const [chapters, setChapters] = useState<ChapterModel[]>([]);
const [hours, setHours] = useState<any>({}); const [hours, setHours] = useState<LocalCourseHour | null>(null);
const [learnRecord, setLearnRecord] = useState<any>({}); const [learnHourRecord, setLearnHourRecord] =
const [learnHourRecord, setLearnHourRecord] = useState<any>({}); useState<LocalUserLearnHourRecordModel>({});
const myRef = useRef(0); const myRef = useRef(0);
const playRef = useRef(0); const playRef = useRef(0);
const watchRef = useRef(0); const watchRef = useRef(0);
@ -61,9 +69,6 @@ const CoursePlayPage = () => {
Course.detail(Number(params.courseId)).then((res: any) => { Course.detail(Number(params.courseId)).then((res: any) => {
setChapters(res.data.chapters); setChapters(res.data.chapters);
setHours(res.data.hours); setHours(res.data.hours);
if (res.data.learn_record) {
setLearnRecord(res.data.learn_record);
}
if (res.data.learn_hour_records) { if (res.data.learn_hour_records) {
setLearnHourRecord(res.data.learn_hour_records); setLearnHourRecord(res.data.learn_hour_records);
} }
@ -97,7 +102,8 @@ const CoursePlayPage = () => {
setLoading(true); setLoading(true);
Course.play(Number(params.courseId), Number(params.hourId)) Course.play(Number(params.courseId), Number(params.hourId))
.then((res: any) => { .then((res: any) => {
setCourse(res.data.course); let courseItem: CourseModel = res.data.course;
setCourse(courseItem);
setHour(res.data.hour); setHour(res.data.hour);
document.title = res.data.hour.title; document.title = res.data.hour.title;
let record = res.data.user_hour_record; let record = res.data.user_hour_record;
@ -276,87 +282,46 @@ const CoursePlayPage = () => {
</div> </div>
</div> </div>
<div className={styles["chapters-hours-cont"]}> <div className={styles["chapters-hours-cont"]}>
{chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}{" "} {chapters.length === 0 && !hours && <Empty />}
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && ( {chapters.length === 0 && hours && (
<div className={styles["hours-list-box"]}> <div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
{hours[0].map((item: any, index: number) => ( {hours[0].map((item: CourseHourModel) => (
<div key={item.id} className={styles["hours-it"]}> <div key={item.id} className={styles["hours-it"]}>
{learnHourRecord[item.id] && ( <HourCompenent
<HourCompenent id={item.id}
id={item.id} cid={item.course_id}
cid={item.course_id} title={item.title}
title={item.title} record={learnHourRecord[item.id]}
record={learnHourRecord[item.id]} duration={item.duration}
duration={item.duration} vid={Number(params.hourId)}
vid={Number(params.hourId)} onSuccess={(cid: number, id: number) => {
progress={ playVideo(cid, id);
(learnHourRecord[item.id].finished_duration * 100) / }}
learnHourRecord[item.id].total_duration ></HourCompenent>
}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
{!learnHourRecord[item.id] && (
<HourCompenent
id={item.id}
cid={item.course_id}
title={item.title}
record={null}
duration={item.duration}
vid={Number(params.hourId)}
progress={0}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
</div> </div>
))} ))}
</div> </div>
)} )}
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && ( {chapters.length > 0 && hours && (
<div className={styles["hours-list-box"]}> <div className={styles["hours-list-box"]}>
{chapters.map((item: any, index: number) => ( {chapters.map((item: ChapterModel) => (
<div key={item.id} className={styles["chapter-it"]}> <div key={item.id} className={styles["chapter-it"]}>
<div className={styles["chapter-name"]}>{item.name}</div> <div className={styles["chapter-name"]}>{item.name}</div>
{hours[item.id] && {hours[item.id]?.map((it: CourseHourModel) => (
hours[item.id].map((it: any, int: number) => ( <div key={it.id} className={styles["hours-it"]}>
<div key={it.id} className={styles["hours-it"]}> <HourCompenent
{learnHourRecord[it.id] && ( id={it.id}
<HourCompenent cid={item.course_id}
id={it.id} title={it.title}
cid={item.course_id} record={learnHourRecord[it.id]}
title={it.title} duration={it.duration}
record={learnHourRecord[it.id]} vid={Number(params.hourId)}
duration={it.duration} onSuccess={(cid: number, id: number) => {
vid={Number(params.hourId)} playVideo(cid, id);
progress={ }}
(learnHourRecord[it.id].finished_duration * 100) / ></HourCompenent>
learnHourRecord[it.id].total_duration </div>
} ))}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
{!learnHourRecord[it.id] && (
<HourCompenent
id={it.id}
cid={item.course_id}
title={it.title}
record={null}
duration={it.duration}
vid={Number(params.hourId)}
progress={0}
onSuccess={(cid: number, id: number) => {
playVideo(cid, id);
}}
></HourCompenent>
)}
</div>
))}
</div> </div>
))} ))}
</div> </div>