mirror of
https://github.com/PlayEdu/h5.git
synced 2025-06-22 20:36:11 +08:00
视频详情以及视频播放页面优化优化
This commit is contained in:
禺狨
parent
c6aaa868bc
commit
74b806b13d
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styles from "./hour.module.scss";
|
||||
import { durationFormat } from "../../../utils/index";
|
||||
|
||||
@ -8,7 +8,6 @@ interface PropInterface {
|
||||
title: string;
|
||||
duration: number;
|
||||
record: any;
|
||||
progress: number;
|
||||
onSuccess: (cid: number, id: number) => void;
|
||||
}
|
||||
|
||||
@ -18,9 +17,17 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
title,
|
||||
duration,
|
||||
record,
|
||||
progress,
|
||||
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 (
|
||||
<>
|
||||
<div
|
||||
@ -34,7 +41,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
<i className="iconfont icon-icon-video"></i>
|
||||
<span className={styles["label"]}>视频</span>
|
||||
</div>
|
||||
{progress > 0 && progress < 100 && (
|
||||
{userProgress > 0 && userProgress < 100 && (
|
||||
<div className={styles["studying"]}>
|
||||
<span>
|
||||
学习到
|
||||
@ -42,14 +49,14 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{progress >= 100 && (
|
||||
{userProgress >= 100 && (
|
||||
<div className={styles["complete"]}>
|
||||
<span>已学完</span>{" "}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles["title"]}>
|
||||
{title}{" "}({durationFormat(Number(duration))})
|
||||
{title} ({durationFormat(Number(duration))})
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import styles from "./hour.module.scss";
|
||||
import { durationFormat } from "../../../utils/index";
|
||||
|
||||
@ -9,7 +9,6 @@ interface PropInterface {
|
||||
title: string;
|
||||
duration: number;
|
||||
record: any;
|
||||
progress: number;
|
||||
onSuccess: (cid: number, id: number) => void;
|
||||
}
|
||||
|
||||
@ -20,9 +19,16 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
title,
|
||||
duration,
|
||||
record,
|
||||
progress,
|
||||
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 (
|
||||
<>
|
||||
<div
|
||||
@ -41,7 +47,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
<span>学习中</span>
|
||||
</div>
|
||||
)}
|
||||
{vid !== id && progress > 0 && progress < 100 && (
|
||||
{vid !== id && userProgress > 0 && userProgress < 100 && (
|
||||
<div className={styles["studying"]}>
|
||||
<span>
|
||||
学习到
|
||||
@ -49,7 +55,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{vid !== id && progress >= 100 && (
|
||||
{vid !== id && userProgress >= 100 && (
|
||||
<div className={styles["complete"]}>
|
||||
<span>已学完</span>{" "}
|
||||
</div>
|
||||
|
||||
@ -128,34 +128,16 @@ const CoursePage = () => {
|
||||
<div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
|
||||
{hours[0].map((item: CourseHourModel) => (
|
||||
<div key={item.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[item.id] ? (
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={item.title}
|
||||
record={learnHourRecord[item.id]}
|
||||
duration={item.duration}
|
||||
progress={
|
||||
(learnHourRecord[item.id].finished_duration * 100) /
|
||||
learnHourRecord[item.id].total_duration
|
||||
}
|
||||
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>
|
||||
)}
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={item.title}
|
||||
record={learnHourRecord[item.id]}
|
||||
duration={item.duration}
|
||||
onSuccess={(cid: number, id: number) => {
|
||||
playVideo(cid, id);
|
||||
}}
|
||||
></HourCompenent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -168,35 +150,16 @@ const CoursePage = () => {
|
||||
<div className={styles["chapter-name"]}>{item.name}</div>
|
||||
{hours[item.id]?.map((it: CourseHourModel) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
duration={it.duration}
|
||||
progress={
|
||||
(learnHourRecord[it.id].finished_duration * 100) /
|
||||
learnHourRecord[it.id].total_duration
|
||||
}
|
||||
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>
|
||||
)}
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
duration={it.duration}
|
||||
onSuccess={(cid: number, id: number) => {
|
||||
playVideo(cid, id);
|
||||
}}
|
||||
></HourCompenent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,14 @@ import { HourCompenent } from "./compenents/videoHour";
|
||||
|
||||
declare const window: any;
|
||||
|
||||
type LocalUserLearnHourRecordModel = {
|
||||
[key: number]: UserLearnHourRecordModel;
|
||||
};
|
||||
|
||||
type LocalCourseHour = {
|
||||
[key: number]: CourseHourModel[];
|
||||
};
|
||||
|
||||
const CoursePlayPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
@ -19,17 +27,17 @@ const CoursePlayPage = () => {
|
||||
const [playDuration, setPlayDuration] = useState(0);
|
||||
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
|
||||
const [lastSeeValue, setLastSeeValue] = useState({});
|
||||
const [course, setCourse] = useState<any>({});
|
||||
const [course, setCourse] = useState<CourseModel | null>(null);
|
||||
const [hour, setHour] = useState<any>({});
|
||||
const [loading, setLoading] = useState<Boolean>(false);
|
||||
const [isLastpage, setIsLastpage] = useState<Boolean>(false);
|
||||
const [totalHours, setTotalHours] = useState<any>([]);
|
||||
const [playingTime, setPlayingTime] = useState(0);
|
||||
const [watchedSeconds, setWatchedSeconds] = useState(0);
|
||||
const [chapters, setChapters] = useState<any>([]);
|
||||
const [hours, setHours] = useState<any>({});
|
||||
const [learnRecord, setLearnRecord] = useState<any>({});
|
||||
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
|
||||
const [chapters, setChapters] = useState<ChapterModel[]>([]);
|
||||
const [hours, setHours] = useState<LocalCourseHour | null>(null);
|
||||
const [learnHourRecord, setLearnHourRecord] =
|
||||
useState<LocalUserLearnHourRecordModel>({});
|
||||
const myRef = useRef(0);
|
||||
const playRef = useRef(0);
|
||||
const watchRef = useRef(0);
|
||||
@ -61,9 +69,6 @@ const CoursePlayPage = () => {
|
||||
Course.detail(Number(params.courseId)).then((res: any) => {
|
||||
setChapters(res.data.chapters);
|
||||
setHours(res.data.hours);
|
||||
if (res.data.learn_record) {
|
||||
setLearnRecord(res.data.learn_record);
|
||||
}
|
||||
if (res.data.learn_hour_records) {
|
||||
setLearnHourRecord(res.data.learn_hour_records);
|
||||
}
|
||||
@ -97,7 +102,8 @@ const CoursePlayPage = () => {
|
||||
setLoading(true);
|
||||
Course.play(Number(params.courseId), Number(params.hourId))
|
||||
.then((res: any) => {
|
||||
setCourse(res.data.course);
|
||||
let courseItem: CourseModel = res.data.course;
|
||||
setCourse(courseItem);
|
||||
setHour(res.data.hour);
|
||||
document.title = res.data.hour.title;
|
||||
let record = res.data.user_hour_record;
|
||||
@ -276,87 +282,46 @@ const CoursePlayPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["chapters-hours-cont"]}>
|
||||
{chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}{" "}
|
||||
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{hours[0].map((item: any, index: number) => (
|
||||
{chapters.length === 0 && !hours && <Empty />}
|
||||
{chapters.length === 0 && hours && (
|
||||
<div className={styles["hours-list-box"]} style={{ marginTop: 10 }}>
|
||||
{hours[0].map((item: CourseHourModel) => (
|
||||
<div key={item.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[item.id] && (
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={item.title}
|
||||
record={learnHourRecord[item.id]}
|
||||
duration={item.duration}
|
||||
vid={Number(params.hourId)}
|
||||
progress={
|
||||
(learnHourRecord[item.id].finished_duration * 100) /
|
||||
learnHourRecord[item.id].total_duration
|
||||
}
|
||||
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>
|
||||
)}
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
cid={item.course_id}
|
||||
title={item.title}
|
||||
record={learnHourRecord[item.id]}
|
||||
duration={item.duration}
|
||||
vid={Number(params.hourId)}
|
||||
onSuccess={(cid: number, id: number) => {
|
||||
playVideo(cid, id);
|
||||
}}
|
||||
></HourCompenent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
|
||||
{chapters.length > 0 && hours && (
|
||||
<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 className={styles["chapter-name"]}>{item.name}</div>
|
||||
{hours[item.id] &&
|
||||
hours[item.id].map((it: any, int: number) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
duration={it.duration}
|
||||
vid={Number(params.hourId)}
|
||||
progress={
|
||||
(learnHourRecord[it.id].finished_duration * 100) /
|
||||
learnHourRecord[it.id].total_duration
|
||||
}
|
||||
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>
|
||||
))}
|
||||
{hours[item.id]?.map((it: CourseHourModel) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
cid={item.course_id}
|
||||
title={it.title}
|
||||
record={learnHourRecord[it.id]}
|
||||
duration={it.duration}
|
||||
vid={Number(params.hourId)}
|
||||
onSuccess={(cid: number, id: number) => {
|
||||
playVideo(cid, id);
|
||||
}}
|
||||
></HourCompenent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user