mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-07-19 21:59:42 +08:00
视频播放下一节
This commit is contained in:
禺狨
parent
357f795883
commit
0b567866e0
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 12 KiB |
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import styles from "./hour.module.scss";
|
||||
import { durationFormat } from "../../../utils/index";
|
||||
@ -11,6 +11,7 @@ interface PropInterface {
|
||||
duration: number;
|
||||
record: any;
|
||||
progress: number;
|
||||
totalHours: any;
|
||||
onChange: () => void;
|
||||
}
|
||||
|
||||
@ -21,21 +22,56 @@ export const HourCompenent: React.FC<PropInterface> = ({
|
||||
duration,
|
||||
record,
|
||||
progress,
|
||||
totalHours,
|
||||
onChange,
|
||||
}) => {
|
||||
// const navigate = useNavigate();
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [currentId, setCurrentId] = useState(id);
|
||||
const [currentTitle, setCurrentTitle] = useState(title);
|
||||
const [isLastpage, setIsLastpage] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [totalHours]);
|
||||
|
||||
const getData = () => {
|
||||
const index = totalHours.findIndex((i: any) => i.id === id);
|
||||
if (index === totalHours.length - 1) {
|
||||
setIsLastpage(true);
|
||||
}
|
||||
};
|
||||
|
||||
const goNextVideo = () => {
|
||||
const index = totalHours.findIndex((i: any) => i.id === id);
|
||||
if (index === totalHours.length - 1) {
|
||||
setIsLastpage(true);
|
||||
} else if (index < totalHours.length - 1) {
|
||||
setCurrentId(totalHours[index + 1].id);
|
||||
setCurrentTitle(totalHours[index + 1].title);
|
||||
if (index + 1 === totalHours.length - 1) {
|
||||
setIsLastpage(true);
|
||||
}
|
||||
}
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["item"]}>
|
||||
<VideoModel
|
||||
cid={cid}
|
||||
id={id}
|
||||
title={title}
|
||||
id={currentId}
|
||||
title={currentTitle}
|
||||
open={visible}
|
||||
isLastpage={isLastpage}
|
||||
onCancel={() => {
|
||||
setVisible(false);
|
||||
onChange();
|
||||
}}
|
||||
goNextVideo={() => {
|
||||
setVisible(false);
|
||||
goNextVideo();
|
||||
}}
|
||||
></VideoModel>
|
||||
<div className={styles["left-item"]}>
|
||||
<i className="iconfont icon-icon-video"></i>
|
||||
|
||||
@ -70,6 +70,35 @@
|
||||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: el-skeleton-loading 1.4s ease infinite;
|
||||
position: relative;
|
||||
.alert-message {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
.alert-button {
|
||||
width: 200px;
|
||||
height: 54px;
|
||||
background: #ff4d4f;
|
||||
border-radius: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 30px;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
|
||||
import styles from "./video.module.scss";
|
||||
import { course } from "../../../api/index";
|
||||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
declare const window: any;
|
||||
|
||||
@ -10,7 +11,9 @@ interface PropInterface {
|
||||
cid: number;
|
||||
title: string;
|
||||
open: boolean;
|
||||
isLastpage: boolean;
|
||||
onCancel: () => void;
|
||||
goNextVideo: () => void;
|
||||
}
|
||||
|
||||
export const VideoModel: React.FC<PropInterface> = ({
|
||||
@ -18,11 +21,14 @@ export const VideoModel: React.FC<PropInterface> = ({
|
||||
cid,
|
||||
title,
|
||||
open,
|
||||
isLastpage,
|
||||
onCancel,
|
||||
goNextVideo,
|
||||
}) => {
|
||||
const systemConfig = useSelector((state: any) => state.systemConfig.value);
|
||||
const [playUrl, setPlayUrl] = useState<string>("");
|
||||
const [playDuration, setPlayDuration] = useState(0);
|
||||
const [playendedStatus,setPlayendedStatus]= useState<Boolean>(false);
|
||||
const [playendedStatus, setPlayendedStatus] = useState<Boolean>(false);
|
||||
const myRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
@ -48,14 +54,15 @@ export const VideoModel: React.FC<PropInterface> = ({
|
||||
autoplay: false,
|
||||
video: {
|
||||
url: playUrl,
|
||||
pic: systemConfig.playerPoster,
|
||||
},
|
||||
try: isTrySee === 1,
|
||||
bulletSecret: {
|
||||
enabled: false,
|
||||
text: "18119604035",
|
||||
enabled: systemConfig.playerIsEnabledBulletSecret,
|
||||
text: systemConfig.playerBulletSecretText,
|
||||
size: "15px",
|
||||
color: "red",
|
||||
opacity: 0.8,
|
||||
color: systemConfig.playerBulletSecretColor || "red",
|
||||
opacity: Number(systemConfig.playerBulletSecretOpacity),
|
||||
},
|
||||
ban_drag: false,
|
||||
last_see_pos: 0,
|
||||
@ -66,8 +73,9 @@ export const VideoModel: React.FC<PropInterface> = ({
|
||||
playTimeUpdate(parseInt(window.player.video.currentTime), false);
|
||||
});
|
||||
window.player.on("ended", () => {
|
||||
setPlayendedStatus(true);
|
||||
playTimeUpdate(parseInt(window.player.video.currentTime), true);
|
||||
window.player.destroy();
|
||||
window.player && window.player.destroy();
|
||||
});
|
||||
};
|
||||
|
||||
@ -101,6 +109,25 @@ export const VideoModel: React.FC<PropInterface> = ({
|
||||
<div className={styles["video-title"]}>{title}</div>
|
||||
<div className={styles["video-box"]}>
|
||||
<div className="play-box" id="meedu-player-container"></div>
|
||||
{playendedStatus && (
|
||||
<div className={styles["alert-message"]}>
|
||||
{isLastpage && (
|
||||
<div className={styles["alert-button"]}>
|
||||
恭喜你学完最后一节
|
||||
</div>
|
||||
)}
|
||||
{!isLastpage && (
|
||||
<div
|
||||
className={styles["alert-button"]}
|
||||
onClick={() => {
|
||||
setPlayendedStatus(false);
|
||||
goNextVideo()}}
|
||||
>
|
||||
播放下一节
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,6 +15,7 @@ const CoursePage = () => {
|
||||
const [hours, setHours] = useState<any>({});
|
||||
const [learnRecord, setLearnRecord] = useState<any>({});
|
||||
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
|
||||
const [totalHours, setTotalHours] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getDetail();
|
||||
@ -32,6 +33,15 @@ const CoursePage = () => {
|
||||
if (res.data.learn_hour_records) {
|
||||
setLearnHourRecord(res.data.learn_hour_records);
|
||||
}
|
||||
if (res.data.chapters.length === 0) {
|
||||
setTotalHours(res.data.hours[0]);
|
||||
} else if (res.data.chapters.length > 0) {
|
||||
const arr: any = [];
|
||||
chapters.map((item: any) => {
|
||||
arr.concat(res.data.hours[item.id]);
|
||||
});
|
||||
setTotalHours(arr);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
@ -116,7 +126,7 @@ const CoursePage = () => {
|
||||
{chapters.length === 0 && JSON.stringify(hours) === "{}" && <Empty />}
|
||||
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{hours[0].map((item: any) => (
|
||||
{hours[0].map((item: any, index: number) => (
|
||||
<div key={item.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[item.id] && (
|
||||
<HourCompenent
|
||||
@ -129,6 +139,7 @@ const CoursePage = () => {
|
||||
(learnHourRecord[item.id].finished_duration * 100) /
|
||||
learnHourRecord[item.id].total_duration
|
||||
}
|
||||
totalHours={totalHours}
|
||||
onChange={() => getDetail()}
|
||||
></HourCompenent>
|
||||
)}
|
||||
@ -140,6 +151,7 @@ const CoursePage = () => {
|
||||
record={null}
|
||||
duration={item.duration}
|
||||
progress={0}
|
||||
totalHours={totalHours}
|
||||
onChange={() => getDetail()}
|
||||
></HourCompenent>
|
||||
)}
|
||||
@ -149,10 +161,10 @@ const CoursePage = () => {
|
||||
)}
|
||||
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{chapters.map((item: any) => (
|
||||
{chapters.map((item: any, index: number) => (
|
||||
<div key={item.id} className={styles["chapter-it"]}>
|
||||
<div className={styles["chapter-name"]}>{item.name}</div>
|
||||
{hours[item.id].map((it: any) => (
|
||||
{hours[item.id].map((it: any, int: number) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
{learnHourRecord[it.id] && (
|
||||
<HourCompenent
|
||||
@ -166,6 +178,7 @@ const CoursePage = () => {
|
||||
learnHourRecord[it.id].total_duration
|
||||
}
|
||||
onChange={() => getDetail()}
|
||||
totalHours={totalHours}
|
||||
></HourCompenent>
|
||||
)}
|
||||
{!learnHourRecord[it.id] && (
|
||||
@ -176,6 +189,7 @@ const CoursePage = () => {
|
||||
record={null}
|
||||
duration={it.duration}
|
||||
progress={0}
|
||||
totalHours={totalHours}
|
||||
onChange={() => getDetail()}
|
||||
></HourCompenent>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user