78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import { Store } from "antd/es/form/interface";
|
|
import { inject, observer } from "mobx-react";
|
|
import { useEffect, useState } from "react";
|
|
import "./video.less";
|
|
import { ZoomInOutlined } from "@ant-design/icons";
|
|
import VideoTow from "./videoTow";
|
|
const HomeVideo = (props: Store) => {
|
|
const { homeStore } = props;
|
|
const [videoUrls, setVideoUrl] = useState<Array<string> | null>([]);
|
|
const [showVideo, setShowVideo] = useState<boolean>(false);
|
|
let timer: any = null;
|
|
const [obj, setPbj] = useState<any>({
|
|
width: "300px",
|
|
});
|
|
const fetchUrl = () => {
|
|
homeStore.getNewTask().then((res) => {
|
|
setVideoUrl(res);
|
|
setShowVideo(homeStore.showVideo);
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
fetchUrl();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
timer = setInterval(() => {
|
|
fetchUrl();
|
|
}, 35000);
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, [homeStore, homeStore.showVideo]);
|
|
return (
|
|
<div className="homeVideos">
|
|
<ZoomInOutlined
|
|
style={{
|
|
color: "#fff",
|
|
display: "block",
|
|
textAlign: "right",
|
|
zIndex: 999,
|
|
marginRight: "20px",
|
|
position: "absolute",
|
|
right: "0px",
|
|
top: "-7px",
|
|
}}
|
|
onClick={() => {
|
|
if (obj.width === "300px") {
|
|
setPbj({
|
|
width: "0px",
|
|
});
|
|
} else {
|
|
setPbj({
|
|
width: "300px",
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
{showVideo ? (
|
|
<div className="homeVideoBox" style={obj}>
|
|
{videoUrls?.map((videoUrl, index) => {
|
|
return (
|
|
<div
|
|
key={videoUrl}
|
|
style={{ flex: "1", margin: "5px", height: "200px" }}
|
|
>
|
|
<VideoTow url={videoUrl} className="homeVideo" />;
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default inject("homeStore")(observer(HomeVideo));
|