封装视频播放组件方法

app/profile/[mid]/page.js

@@ -24,7 +24,7 @@ import AddWeChat from "@/components/AddWeChat";
 import { handleFollow, checkRelation } from "@/api/public";
 import { getStreamerDetailInfo } from "@/api/space";
 import { get } from "@/utils/storeInfo";
-import { handleShowVideos } from "@/utils/tools/handleFuns";
+import { handleShowVideo } from "@/utils/tools/handleFuns";
 import clipboard from "copy-to-clipboard";
 // import * as Clipboard from "expo-clipboard";
 export default function PersonSpace() {
@@ -235,7 +235,7 @@ export default function PersonSpace() {
                     key={index}
                     onClick={() => {
                       if (photo.type == "video") {
-                        handleShowVideos({
+                        handleShowVideo({
                           url: streamerInfo?.streamer_ext?.shorts?.videos[0]
                             ?.cover_urls[0],
                           mp4: streamerInfo?.streamer_ext?.shorts?.videos[0]

app/space/person_space_introduce/[mid]/page.js

@@ -13,7 +13,8 @@ import {
 import AddWeChat from "@/components/AddWeChat";
 import { getStreamerInfo } from "@/api/space";
 import baseRequest from "@/utils/baseRequest";
-import requireAPI from "@/utils/requireAPI"
+import requireAPI from "@/utils/requireAPI";
+import { handleShowVideo } from "@/utils/tools/handleFuns";
 export default function PersonSpaceIntroduce() {
   const base = baseRequest();
   const router = useRouter();
@@ -105,49 +106,6 @@ export default function PersonSpaceIntroduce() {
       classNames: { body: "photos-bodyBox" },
     });
   };
-  const handleShowVideo = (video) => {
-    Dialog.className = "videoMask";
-    Dialog.show({
-      title: "",
-      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%",
-      },
-    });
-  };
   //当空间价格为0时，直接加入空间
   const handleJoinFreeSpace = async () => {
     try {

components/Photos/index.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleUp, faClose } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
 import baseRequest from "@/utils/baseRequest";
-import Player from "next-video/player";
+import { handleShowVideo } from "@/utils/tools/handleFuns";
 // import dynamic from 'next/dynamic'
 // import ImagesMask from "@/components/ImagesMask";
 // const ImagesMask = dynamic(() =>
@@ -166,66 +166,6 @@ export default function Photos({
       classNames: { body: "photos-bodyBox" },
     });
   };
-  const handleShowVideo = (video) => {
-    Dialog.className = "videoMask";
-    Dialog.show({
-      title: "",
-      content: (
-        <div className="h-screen flex justify-center items-center">
-          <div className="flex flex-col gap-2 -mt-24">
-            <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
-              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} /> */}
-              <Player
-                src={video.mp4}
-                poster={video?.url.src}
-                blurDataURL={video?.url.blurDataURL}
-                autoPlay={true}
-                style={{ height: "500px", width: "100vw" }}
-              />
-              {/* <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%",
-      },
-    });
-  };
   const handleSeeAllPhotos = (e) => {
     e.stopPropagation();
     e.preventDefault();

utils/tools/handleFuns.js

@@ -2,41 +2,104 @@ 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 {checkRole} from "../auth";
-export const handleShowVideos = (video) => {
+import Player from "next-video/player";
+// 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) => {
   Dialog.className = "videoMask";
   Dialog.show({
     title: "",
     content: (
-      <div className="flex flex-col gap-2">
+      <div className="h-screen flex justify-center items-center relative" >
-        <div className="flex w-full justify-end">
+        <div className="h-screen w-screen absolute"  onClick={() => Dialog.clear()}></div>
-          <div
+        <div className="w-screen flex flex-col gap-2 -mt-24 absolute pointer-events-none">
-            className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
+          <div className="flex w-full justify-end">
-            key="closeBtn"
+            <div
-            onClick={() => Dialog.clear()}
+              className="pointer-events-auto flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
-          >
+              key="closeBtn"
-            <FontAwesomeIcon icon={faClose} size="2xl" />
+              onClick={() => Dialog.clear()}
+            >
+              <FontAwesomeIcon icon={faClose} size="2xl" />
+            </div>
           </div>
-        </div>
+          <div className="my-4 pointer-events-auto">
-        <div className="my-4">
+            {/* <video
-          <video
             width="100%"
             height="100%"
             controls
+            muted={true}
             className="w-screen h-[70vh] rounded-lg object-contain"
-            poster={video.url}
+            poster={video?.url}
+            // autoPlay={true}
           >
             <source src={video.mp4} type="video/mp4" />
             您的浏览器不支持 Video 标签。
-          </video>
+          </video> */}
-        </div>
+            {/* <Video as={ReactPlayer} src={video.mp4} /> */}
-        {/* <div
+            <Player
+              src={video.mp4}
+              poster={video?.url.src}
+              blurDataURL={video?.url.blurDataURL}
+              autoPlay={true}
+              style={{ height: "500px", width: "100vw" }}
+            />
+            {/* <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={handleSeeAllPhotos}
+          onClick={() => saveFile(video.mp4)}
         >
           <FontAwesomeIcon icon={faSave} size="2xl" />
         </div> */}
+        </div>
       </div>
     ),
     bodyStyle: {
@@ -44,9 +107,9 @@ export const handleShowVideos = (video) => {
       maxHeight: "none",
       height: "100%",
     },
+    closeOnMaskClick: true,
   });
 };
-
 //保存div内容为图片
 export const saveImage = async (divId) => {
   const div = document.getElementById(divId);