132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
import { Modal } from "antd";
|
|
import { inject, observer } from "mobx-react";
|
|
import { useEffect, useState } from "react";
|
|
import Config from "@/util/config";
|
|
import EasyPlayer from "../videoTow";
|
|
const WhichVideo = (props) => {
|
|
const { homeStore } = props;
|
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
const [deviceList, setDeviceList] = useState<Array<any>>([]);
|
|
const [channelList, setChannelList] = useState<Array<any>>([]);
|
|
const [deviceId, setDeviceId] = useState<number>(0);
|
|
const [channelId, setChannelId] = useState<number>(0);
|
|
const [videoUrl, setVideoUrl] = useState<string | null>("");
|
|
let timer: any = null;
|
|
|
|
const openDispatch = async () => {
|
|
setIsModalOpen(true);
|
|
let req = await homeStore.getVideoUrlList();
|
|
setDeviceList(req.EasyDarwin.Body.Devices);
|
|
};
|
|
const getChannerList = async (id) => {
|
|
let reqs = await homeStore.getChannerUrlList(id);
|
|
setChannelList(reqs.EasyDarwin.Body.Channels);
|
|
};
|
|
|
|
const getUrl = async (id) => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
const fetchUrl = async () => {
|
|
try {
|
|
const reqs = await homeStore.getChannerStrem(deviceId, id);
|
|
if (!reqs.EasyDarwin) return;
|
|
const url = Config.videoApis + reqs.EasyDarwin.Body.URL;
|
|
setVideoUrl(url);
|
|
} catch (error) {
|
|
console.error("Error fetching video URL:", error);
|
|
}
|
|
};
|
|
fetchUrl();
|
|
timer = setInterval(() => {
|
|
fetchUrl();
|
|
}, 35000);
|
|
};
|
|
useEffect(() => {
|
|
return () => {
|
|
clearInterval(timer);
|
|
};
|
|
}, []);
|
|
return (
|
|
<>
|
|
<span onClick={openDispatch}> 视频查看</span>
|
|
<Modal
|
|
title={"视频查看"}
|
|
className="owner_model"
|
|
width={"80%"}
|
|
height={"650px"}
|
|
centered
|
|
open={isModalOpen}
|
|
afterClose={() => {
|
|
setDeviceList([]);
|
|
setChannelList([]);
|
|
setVideoUrl(null);
|
|
setChannelId(0);
|
|
}}
|
|
onOk={() => {}}
|
|
footer={null}
|
|
onCancel={() => {
|
|
setIsModalOpen(false);
|
|
}}
|
|
>
|
|
<div>
|
|
<div style={{ display: "flex" }}>
|
|
<div style={{ overflowY: "scroll", height: "550px" }}>
|
|
{deviceList.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => {
|
|
setDeviceId(item.DeviceID);
|
|
getChannerList(item.DeviceID);
|
|
}}
|
|
>
|
|
<p
|
|
style={{
|
|
color: deviceId === item.DeviceID ? "yellow" : "#fff",
|
|
}}
|
|
>
|
|
{item.DeviceName}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div style={{ width: "20px" }}></div>
|
|
<div style={{ height: "550px", overflow: "scroll" }}>
|
|
{channelList.map((item, index) => {
|
|
return (
|
|
<div
|
|
key={index}
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => {
|
|
setChannelId(item.ChannelID);
|
|
getUrl(item.ChannelID);
|
|
}}
|
|
>
|
|
<p
|
|
style={{
|
|
color: channelId === item.ChannelID ? "yellow" : "#fff",
|
|
}}
|
|
>
|
|
{item.Name}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div style={{ width: "20px" }}></div>
|
|
<div className="video" style={{ width: "100%", height: "550px" }}>
|
|
{<EasyPlayer url={videoUrl} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
// export default WhichVideo;
|
|
export default inject("homeStore")(observer(WhichVideo));
|