299 lines
10 KiB
JavaScript
299 lines
10 KiB
JavaScript
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faClose } from "@fortawesome/free-solid-svg-icons";
|
|
import { Dialog, Toast } from "antd-mobile";
|
|
import html2canvas from "html2canvas";
|
|
import { checkRole } from "../auth";
|
|
import VideoPlayer from "@/components/VideoPlayer";
|
|
// export const handleShowVideos = (video) => {
|
|
// Dialog.className = "videoMask";
|
|
// Dialog.show({
|
|
// title: "",
|
|
// closeOnMaskClick: true,
|
|
// content: (
|
|
// <div className="flex flex-col gap-2">
|
|
// <div className="flex w-full justify-end">
|
|
// <div
|
|
// className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
|
// key="closeBtn"
|
|
// onClick={() => Dialog.clear()}
|
|
// >
|
|
// <FontAwesomeIcon icon={faClose} size="2xl" />
|
|
// </div>
|
|
// </div>
|
|
// <div className="my-4">
|
|
// <video
|
|
// width="100%"
|
|
// height="100%"
|
|
// controls
|
|
// className="w-screen h-[70vh] rounded-lg object-contain"
|
|
// poster={video.url}
|
|
// >
|
|
// <source src={video.mp4} type="video/mp4" />
|
|
// 您的浏览器不支持 Video 标签。
|
|
// </video>
|
|
// </div>
|
|
// {/* <div
|
|
// className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
|
// key="closeBtn"
|
|
// // onClick={handleSeeAllPhotos}
|
|
// >
|
|
// <FontAwesomeIcon icon={faSave} size="2xl" />
|
|
// </div> */}
|
|
// </div>
|
|
// ),
|
|
// bodyStyle: {
|
|
// background: "none",
|
|
// maxHeight: "none",
|
|
// height: "100%",
|
|
// },
|
|
// });
|
|
// };
|
|
export const handleShowVideo = (video) => {
|
|
document.body.style.overflow = "hidden";
|
|
const scrollY = window.scrollY;
|
|
Dialog.className = "videoMask";
|
|
Dialog.show({
|
|
title: "",
|
|
bodyClassName: "!p-0",
|
|
content: (
|
|
<div className="h-screen flex justify-center items-center relative">
|
|
<div
|
|
className="h-screen w-screen absolute"
|
|
onClick={() => {
|
|
if (scrollY !== 0) {
|
|
window.scrollTo(0, scrollY);
|
|
}
|
|
Dialog.clear();
|
|
}}
|
|
></div>
|
|
<div className="w-screen flex flex-col gap-2 pointer-events-none absolute top-0">
|
|
<div
|
|
className="w-full h-screen pointer-events-auto relative "
|
|
style={{ background: "#00000080" }}
|
|
>
|
|
{/* <video
|
|
width="100%"
|
|
height="100%"
|
|
controls
|
|
muted={true}
|
|
className="w-screen h-[70vh] rounded-lg object-contain"
|
|
poster={video?.url}
|
|
// autoPlay={true}
|
|
>
|
|
<source src={video.mp4} type="video/mp4" />
|
|
您的浏览器不支持 Video 标签。
|
|
</video> */}
|
|
{/* <Video as={ReactPlayer} src={video.mp4} /> */}
|
|
<div className="absolute top-1/2 -translate-y-1/2 w-full">
|
|
<VideoPlayer video={video} />
|
|
</div>
|
|
|
|
{/* <label
|
|
onClick={() => {
|
|
const videoPlayer = document.getElementById("videoPlayer");
|
|
console.log("videoPlayer", videoPlayer, videoPlayer.click);
|
|
// videoPlayer.play();
|
|
if (state.play) {
|
|
state.play = false;
|
|
videoPlayer.pause();
|
|
} else {
|
|
state.play = true;
|
|
videoPlayer.play();
|
|
}
|
|
}}
|
|
className="block w-full h-screen bg-[#ab27275e] absolute top-0"
|
|
/> */}
|
|
<div
|
|
className="max-w-max absolute top-[21px] right-4 z-[9999]"
|
|
style={{ top: "21px", zIndex: 30 }}
|
|
>
|
|
<div
|
|
className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
|
key="closeBtn"
|
|
onClick={() => {
|
|
if (scrollY !== 0) {
|
|
window.scrollTo(0, scrollY);
|
|
}
|
|
Dialog.clear();
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faClose} size="2xl" />
|
|
</div>
|
|
</div>
|
|
{/* <Player
|
|
src="https://www.mydomain.com/remote-video.mp4"
|
|
poster="https://www.mydomain.com/remote-poster.webp"
|
|
blurDataURL="data:image/webp;base64,UklGRlA..."
|
|
/> */}
|
|
</div>
|
|
{/* <div
|
|
className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
|
|
key="closeBtn"
|
|
onClick={() => saveFile(video.mp4)}
|
|
>
|
|
<FontAwesomeIcon icon={faSave} size="2xl" />
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
),
|
|
bodyStyle: {
|
|
background: "none",
|
|
maxHeight: "none",
|
|
height: "100%",
|
|
},
|
|
closeOnMaskClick: true,
|
|
onClose: () => {
|
|
document.body.style.overflow = "visible";
|
|
},
|
|
});
|
|
};
|
|
//保存div内容为图片
|
|
export const saveDivImage = async (divId) => {
|
|
if (typeof window == "undefined") return;
|
|
const div = document.getElementById(divId);
|
|
html2canvas(div, { useCORS: true }).then(function (canvas) {
|
|
// 创建一个图片元素
|
|
var img = canvas.toDataURL("image/jpg");
|
|
// 创建一个链接元素
|
|
var link = document.createElement("a");
|
|
link.href = img;
|
|
// 设置下载的文件名
|
|
link.download = "SAVE_IMAGE.jpg";
|
|
// 触发点击
|
|
link.click();
|
|
});
|
|
};
|
|
//保存图片
|
|
export const saveImage = async (url) => {
|
|
if (typeof window == "undefined") return;
|
|
fetch(url)
|
|
.then((res) => res.blob())
|
|
.then((blob) => {
|
|
const url = URL.createObjectURL(blob);
|
|
// 创建一个链接元素
|
|
var link = document.createElement("a");
|
|
link.href = url;
|
|
// 设置下载的文件名
|
|
link.download = "SAVE_IMAGE.jpg";
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
})
|
|
.catch((error) => console.log(error));
|
|
};
|
|
export const saveFile = async (href) => {
|
|
const isVip = await checkRole();
|
|
if (!isVip) {
|
|
// setIsVipModalVisible(true);
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: "仅会员支持下载",
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
if (typeof window == "undefined") return;
|
|
var link = document.createElement("a");
|
|
link.href = href;
|
|
link.target = "_blank";
|
|
// 设置下载的文件名
|
|
link.download = "newfile.mp4";
|
|
// 触发点击
|
|
// link.click();
|
|
link.style.display = "none"; // 设置为隐藏元素
|
|
document.body.appendChild(link);
|
|
link.click(); // 模拟点击以开始下载
|
|
document.body.removeChild(link); // 下载后移除元素
|
|
};
|
|
|
|
export const toggleFullScreen = (videoEleId, controllerId, getState) => {
|
|
const video = document.getElementById(videoEleId);
|
|
const controller = document.getElementById(controllerId);
|
|
const videoHeight = window.getComputedStyle(video).height;
|
|
const videoWidth = window.getComputedStyle(video).width;
|
|
|
|
if (!document.fullscreenElement) {
|
|
if (video.requestFullscreen) {
|
|
video.requestFullscreen();
|
|
} else if (video.mozRequestFullScreen) {
|
|
// Firefox
|
|
video.mozRequestFullScreen();
|
|
} else if (video.webkitRequestFullscreen) {
|
|
// Chrome, Safari and Opera
|
|
video.webkitRequestFullscreen();
|
|
} else if (video.msRequestFullscreen) {
|
|
// IE/Edge
|
|
video.msRequestFullscreen();
|
|
}
|
|
// console.log("toggleFullScreen", video);
|
|
if (!video || !controller) return;
|
|
// video.style.transform =
|
|
// "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important";
|
|
// video.firstChild.className = "h-[100vw] w-[100vh] origin-left";
|
|
// video.firstChild.style = {
|
|
// transform: "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important",
|
|
// width: "100vh",
|
|
// height: "100vw",
|
|
// transformOrigin: "left",
|
|
// };
|
|
if (videoWidth < videoHeight) {
|
|
video.firstChild.style.width = "100vw";
|
|
video.firstChild.style.height = "100vh";
|
|
controller.style.width = "100vw";
|
|
controller.style.height = "100vh";
|
|
// controller.firstChild.style.marginLeft = "10px";
|
|
// controller.firstChild.style.transform = "rotate(180deg)";
|
|
// controller.firstChild.style.transformOrigin = "center center";
|
|
} else {
|
|
video.firstChild.style.transform =
|
|
"translateX(50vw) translateY(-24.4vh) rotate(90deg)";
|
|
video.firstChild.style.width = "100vh";
|
|
video.firstChild.style.height = "100vw";
|
|
video.firstChild.style.transformOrigin = "left";
|
|
controller.style.width = "100vw";
|
|
controller.style.height = "100vh";
|
|
controller.firstChild.style.marginLeft = "10px";
|
|
// controller.firstChild.style.transform = "rotate(180deg)";
|
|
// controller.firstChild.style.transformOrigin = "center center";
|
|
}
|
|
|
|
getState((old) => !old);
|
|
} else {
|
|
// console.log("toggleFullScreen", video);
|
|
if (!video || !controller) return;
|
|
// video.style.transform =
|
|
// "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important";
|
|
// video.firstChild.className = "h-[100vw] w-[100vh] origin-left";
|
|
// video.firstChild.style = {
|
|
// transform: "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important",
|
|
// width: "100vh",
|
|
// height: "100vw",
|
|
// transformOrigin: "left",
|
|
// };
|
|
video.firstChild.style.transform = "none";
|
|
video.firstChild.style.width = "auto";
|
|
video.firstChild.style.height = "auto";
|
|
video.firstChild.style.transformOrigin = "";
|
|
controller.style.width = "100%";
|
|
controller.style.height = "100%";
|
|
controller.firstChild.style.marginLeft = "0";
|
|
// controller.firstChild.style.transform = "rotate(180deg)";
|
|
// controller.firstChild.style.transformOrigin = "center center";
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
// Firefox
|
|
document.mozCancelFullScreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
// Chrome, Safari and Opera
|
|
document.webkitExitFullscreen();
|
|
} else if (document.msExitFullscreen) {
|
|
// IE/Edge
|
|
document.msExitFullscreen();
|
|
}
|
|
|
|
getState((old) => !old);
|
|
}
|
|
};
|