wishpal_ironfan
/
tiefen_space_h5
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

anln_refund_1.4 #30

Merged
yezian merged 18 commits from anln_refund_1.4 into main 2025-01-21 18:22:52 +08:00
Conversation 0 Commits 18 Files Changed 31 +58 -36
1 changed files with 58 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 00f98fb9ad - Show all commits

94
utils/tools/handleFuns.js
View File

@ -51,14 +51,21 @@ import VideoPlayer from "@/components/VideoPlayer";
export const handleShowVideo = (video) => {
document.body.style.overflow = "hidden";
const scrollY = window.scrollY;
const clientHeight =
document.documentElement.clientHeight || window.innerHeight;
const toolHeight = window.screen.height - clientHeight;
Dialog.className = "videoMask";
Dialog.show({
title: "",
bodyClassName: "!p-0",
content: (
<div className="h-screen flex justify-center items-center relative">
<div
className={`flex justify-center items-center relative`}
style={{ height: clientHeight + "px" }}
>
<div
className="h-screen w-screen absolute"
className={`w-screen absolute`}
style={{ height: clientHeight + "px" }}
onClick={() => {
if (scrollY !== 0) {
window.scrollTo(0, scrollY);
@ -68,27 +75,36 @@ export const handleShowVideo = (video) => {
></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" }}
className={`w-full pointer-events-auto relative flex justify-center items-center`}
style={{
background: "#00000080",
height: clientHeight + "px",
}}
>
{/* <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">
<div className="rounded-2xl overflow-hidden">
<video
width="100%"
height="100%"
controls
controlsList="nodownload noplaybackrate noremoteplayback toggleaudio"
muted={true}
className={`w-full object-contain`}
style={{ height: clientHeight - toolHeight + "px" }}
poster={video?.url}
// onTouchStart={(e) => e.preventDefault()}
onContextMenu={(e) => e.preventDefault()}
// onTouchEnd={(e) => e.preventDefault()}
// 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>
</div> */}
{/* <label
{/* <label
onClick={() => {
const videoPlayer = document.getElementById("videoPlayer");
console.log("videoPlayer", videoPlayer, videoPlayer.click);
@ -103,28 +119,34 @@ export const handleShowVideo = (video) => {
}}
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();
className="max-w-max absolute z-[9999] rounded-full"
style={{
top: "42px",
right: "42px",
zIndex: 30,
backgroundColor: "#ff669e24",
}}
>
<FontAwesomeIcon icon={faClose} size="2xl" />
<div
className="pointer-events-auto flex w-12 h-12 justify-center items-center text-[#FF669E]"
key="closeBtn"
onClick={() => {
if (scrollY !== 0) {
window.scrollTo(0, scrollY);
}
Dialog.clear();
}}
>
<FontAwesomeIcon icon={faClose} size="2xl" />
</div>
</div>
</div>
{/* <Player
{/* <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>
{/* <div
className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
@ -226,7 +248,7 @@ export const toggleFullScreen = (videoEleId, controllerId, getState) => {
// IE/Edge
video.msRequestFullscreen();
}
// console.log("toggleFullScreen", video);
console.log("toggleFullScreen", video);
if (!video || !controller) return;
// video.style.transform =
// "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important";
@ -260,7 +282,7 @@ export const toggleFullScreen = (videoEleId, controllerId, getState) => {
getState((old) => !old);
} else {
// console.log("toggleFullScreen", video);
console.log("toggleFullScreen", video);
if (!video || !controller) return;
// video.style.transform =
// "translateX(50vw) translateY(-24.4vh) rotate(90deg) !important";