You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.1 KiB
80 lines
2.1 KiB
import React, { useEffect, useRef, useState } from "react"; |
|
import JoLPlayer from "jol-player"; |
|
|
|
function Video({ fileIds, posterId, autoPlay }) { |
|
const videoRef = useRef(null); |
|
const [flag, setFlag] = useState(false); |
|
// useEffect(() => { |
|
// window.addEventListener("scroll", () => { |
|
// if (window.scrollY > 500) { |
|
// if (!localStorage.getItem("joiRect")) { |
|
// const jolRect = document |
|
// .getElementById("video-joi") |
|
// .getBoundingClientRect(); |
|
// localStorage.setItem("joiRect", JSON.stringify(jolRect)); |
|
// } |
|
// } |
|
// }); |
|
// }, []); |
|
|
|
// const videoMethod = (status) => { |
|
// if (status === "play") { |
|
// videoRef.current.play(); |
|
// setFlag(() => true); |
|
// } |
|
// }; |
|
// useEffect(() => { |
|
// console.log(`videoRef.current`, videoRef.current); |
|
// }, [videoRef.current]); |
|
|
|
// useEffect(() => { |
|
// if (window.scrollY > 3 * window.innerHeight) { |
|
// if (autoPlay && !flag) { |
|
// videoMethod("play"); |
|
// } |
|
// } |
|
// }, [autoPlay]); |
|
|
|
|
|
return ( |
|
<div |
|
style={{ |
|
direction: "ltr", |
|
textAlign: "left", |
|
marginBottom: 10, |
|
zIndex: 10, |
|
}} |
|
id="video-joi" |
|
> |
|
<JoLPlayer |
|
ref={videoRef} |
|
option={{ |
|
videoSrc: `https://dnvn.ir/api/v1/file/${fileIds}`, |
|
width: "100%", |
|
height: window.innerWidth > 1024 ? window.innerHeight - 200 : window.innerHeight / 3.6, |
|
theme: "#4dd35b", |
|
language: "en", |
|
isShowMultiple: window.innerWidth > 700, |
|
hideMouseTime: 10000, |
|
isShowPicture: true, |
|
isShowFullScreen: false, |
|
isShowSet: false, |
|
isShowScreenshot: window.innerWidth > 700, |
|
// isShowSet : false, |
|
isShowPauseButton: false, |
|
poster: `https://dnvn.ir/api/v1/file/${posterId}`, |
|
quality: [ |
|
{ |
|
name: "SD", |
|
url: `https://dnvn.ir/api/v1/file/${fileIds}`, |
|
}, |
|
], |
|
isShowWebFullScreen: false, |
|
// auto : true |
|
}} |
|
/> |
|
</div> |
|
); |
|
} |
|
|
|
export default Video;
|
|
|