zy-react-library 1.0.130 → 1.0.132

package/components/Map/MapSelector.js

@@ -1,5 +1,6 @@
 import { Button, Col, Form, Input, Modal, Row, Select, Spin } from "antd";
 import { useEffect, useRef, useState } from "react";
+import { dynamicLoadJs } from "../../utils";
 
 /**
  * 定位组件弹窗
@@ -34,8 +35,7 @@ const MapSelector = (props) => {
   // 初始化地图
   const initMap = async () => {
     if (!window.BMapGL) {
-      console.error("BMapGL is not loaded");
-      return;
+      await dynamicLoadJs("https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr");
     }
 
     setLoading(true);

package/components/Map/index.js

@@ -45,11 +45,14 @@ const Map = (props) => {
               <Form.Item name={latitudeProps} noStyle rules={[{ required, message: "请选择纬度" }]}>
                 <Input disabled />
               </Form.Item>
-              <Button type="primary" onClick={() => {
-                setMapVisible(true);
-                setCurrentLongitude(form.getFieldValue(longitudeProps));
-                setCurrentLatitude(form.getFieldValue(latitudeProps));
-              }}>
+              <Button
+                type="primary"
+                onClick={() => {
+                  setMapVisible(true);
+                  setCurrentLongitude(form.getFieldValue(longitudeProps));
+                  setCurrentLatitude(form.getFieldValue(latitudeProps));
+                }}
+              >
                 地图定位
               </Button>
             </div>

package/components/Video/AliPlayer.d.ts

@@ -0,0 +1,42 @@
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
+
+export interface AliPlayerProps {
+  /** 播放地址 */
+  source?: string | string[];
+  /** 阿里的 vid */
+  vid?: string;
+  /** 阿里的 playAuth */
+  playAuth?: string;
+  /** 封面地址 */
+  cover?: string;
+  /** 播放器宽度，默认 100% */
+  width?: string;
+  /** 播放器高度，默认 600px */
+  height?: string;
+  /** 是否自动播放 */
+  autoplay?: boolean;
+  /** 是否显示进度条 */
+  showProgress?: boolean;
+  /** 是否直播模式 */
+  isLive?: boolean;
+  /** 播放开始时间 */
+  playTime?: number;
+  /** 播放结束事件 */
+  onEnded?: () => void;
+  /** 播放进度更新事件 */
+  onTimeupdate?: (currentTime: number) => void;
+}
+
+export interface AliPlayerRef {
+  play: () => void;
+  pause: () => void;
+}
+
+/**
+ * 视频播放组件
+ */
+declare const AliPlayer: ForwardRefExoticComponent<
+  AliPlayerProps & RefAttributes<AliPlayerRef>
+>;
+
+export default AliPlayer;

package/components/Video/AliPlayer.js

@@ -0,0 +1,160 @@
+import { useDocumentVisibility } from "ahooks";
+import { uniqueId } from "lodash-es";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { dynamicLoadCss, dynamicLoadJs } from "../../utils";
+
+/**
+ * 视频播放组件
+ */
+const AliPlayer = forwardRef(({
+  source = "",
+  vid = "",
+  playAuth = "",
+  cover = "",
+  width = "100%",
+  height = "600px",
+  autoplay = true,
+  showProgress = true,
+  isLive = false,
+  playTime = 0,
+  onEnded,
+  onTimeupdate,
+}, ref) => {
+  const playerRef = useRef(null);
+  const containerRef = useRef(null);
+  const visibility = useDocumentVisibility();
+  const className = useRef(uniqueId("_")).current;
+
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      playerRef.current && playerRef.current.play();
+    },
+    pause: () => {
+      playerRef.current && playerRef.current.pause();
+    },
+  }));
+
+  const onDisposeAliPlayer = () => {
+    if (!playerRef.current)
+      return;
+    playerRef.current.dispose();
+    playerRef.current = null;
+  };
+
+  const onCreateAliPlayer = async () => {
+    if (!containerRef.current)
+      return;
+    if (!window.Aliplayer) {
+      await dynamicLoadJs("https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js");
+      await dynamicLoadCss("https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css");
+    }
+
+    onDisposeAliPlayer();
+
+    const skinLayout = [
+      { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
+      { name: "H5Loading", align: "cc" },
+      { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
+      { name: "infoDisplay" },
+      { name: "tooltip", align: "blabs", x: 0, y: 56 },
+      { name: "thumbnail" },
+      {
+        name: "controlBar",
+        align: "blabs",
+        x: 0,
+        y: 0,
+        children: [
+          { name: "playButton", align: "tl", x: 15, y: 12 },
+          { name: "timeDisplay", align: "tl", x: 10, y: 7 },
+          { name: "fullScreenButton", align: "tr", x: 10, y: 12 },
+          { name: "setting", align: "tr", x: 15, y: 12 },
+          { name: "volume", align: "tr", x: 5, y: 10 },
+        ],
+      },
+    ];
+
+    if (showProgress) {
+      skinLayout[skinLayout.length - 1].children.unshift({
+        name: "progress",
+        align: "blabs",
+        x: 0,
+        y: 44,
+      });
+    }
+
+    playerRef.current = new window.Aliplayer(
+      {
+        id: className,
+        ...(source
+          ? { source }
+          : {
+              vid,
+              playauth: playAuth,
+              qualitySort: "asc",
+              format: "m3u8",
+              encryptType: 1,
+              mediaType: "video",
+              isLive: true,
+              rePlay: false,
+              playsinline: true,
+              controlBarVisibility: "hover",
+            }),
+        cover,
+        width,
+        height,
+        autoplay,
+        isLive,
+        useH5Prism: true,
+        skinLayout,
+      },
+      (player) => {
+        if (autoplay) {
+          player.play();
+        }
+
+        player.on("ended", () => {
+          onEnded && onEnded();
+        });
+
+        player.on("timeupdate", () => {
+          onTimeupdate && onTimeupdate(player.getCurrentTime());
+        });
+
+        if (playTime > 0) {
+          player.seek(playTime);
+        }
+      },
+    );
+  };
+
+  useEffect(() => {
+    if (source || (vid && playAuth)) {
+      onCreateAliPlayer();
+    }
+
+    return () => {
+      onDisposeAliPlayer();
+    };
+  }, [source, vid, playAuth]);
+
+  useEffect(() => {
+    if (visibility === "hidden") {
+      playerRef.current && playerRef.current.pause();
+    }
+    else {
+      playerRef.current && playerRef.current.play();
+    }
+  }, [visibility]);
+
+  return (
+    <div
+      ref={containerRef}
+      id={className}
+      style={{ width, height }}
+    />
+  );
+});
+
+AliPlayer.displayName = "AliPlayer";
+
+export default AliPlayer;

package/components/Video/index.d.ts

@@ -0,0 +1,20 @@
+import type { ForwardRefExoticComponent, RefAttributes } from "react";
+import type { AliPlayerProps, AliPlayerRef } from "./AliPlayer";
+
+export interface VideoProps extends Omit<AliPlayerProps, "onEnded" | "onTimeupdate"> {
+  /** 是否显示弹窗 */
+  visible?: boolean;
+  /** 是否内联模式 */
+  inline?: boolean;
+  /** 弹窗关闭事件 */
+  onCancel?: () => void;
+}
+
+/**
+ * 视频播放组件
+ */
+declare const Video: ForwardRefExoticComponent<
+  VideoProps & RefAttributes<AliPlayerRef>
+>;
+
+export default Video;

package/components/Video/index.js

@@ -0,0 +1,89 @@
+import { Modal } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { getFileUrl } from "../../utils";
+import AliPlayer from "./AliPlayer";
+
+/**
+ * 视频播放组件
+ */
+const Video = ({
+  source = "",
+  vid = "",
+  playAuth = "",
+  cover = "",
+  autoplay = true,
+  showProgress = true,
+  playTime = 0,
+  inline = false,
+  isLive = false,
+  width = "100%",
+  height = "600px",
+  title = "视频",
+  visible: externalVisible = false,
+  onCancel,
+  ...restProps
+}) => {
+  const [internalVisible, setInternalVisible] = useState(false);
+  const playerRef = useRef(null);
+
+  const visible = onCancel ? externalVisible : internalVisible;
+  const setVisible = onCancel || setInternalVisible;
+
+  const getSource = () => {
+    if (!source)
+      return;
+    if (source.includes("http") || source.includes("https"))
+      return source;
+    else return getFileUrl() + source;
+  };
+
+  useEffect(() => {
+    if (!inline) {
+      if (visible) {
+        playerRef.current && playerRef.current.play();
+      }
+      else {
+        playerRef.current && playerRef.current.pause();
+      }
+    }
+  }, [visible, inline]);
+
+  const playerElement = (
+    <AliPlayer
+      ref={playerRef}
+      source={getSource()}
+      vid={vid}
+      playAuth={playAuth}
+      cover={cover}
+      autoplay={autoplay}
+      showProgress={showProgress}
+      playTime={playTime}
+      isLive={isLive}
+      width={width}
+      height={height}
+    />
+  );
+
+  if (!inline) {
+    return (
+      <Modal
+        open={visible}
+        title={title}
+        footer={[
+          <button key="cancel" onClick={() => setVisible(false)}>
+            取消
+          </button>,
+        ]}
+        maskClosable={false}
+        onCancel={() => setVisible(false)}
+        {...restProps}
+      >
+        {playerElement}
+      </Modal>
+    );
+  }
+
+  return playerElement;
+};
+
+export default Video;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.130",
+  "version": "1.0.132",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",

package/utils/index.d.ts

@@ -332,3 +332,13 @@ export function processTreeDataForOnlyLastLevel(
 export function validatorEndTime(timeStart: string): {
   validator: (_: any, value: any) => Promise<void | string>;
 };
+
+/**
+ * 动态加载js资源
+ */
+export function dynamicLoadJs(url: string): Promise<void>;
+
+/**
+ * 动态加载css资源
+ */
+export function dynamicLoadCss(url: string): Promise<void>;

package/utils/index.js

@@ -523,6 +523,35 @@ export const validatorEndTime = (timeStart) => {
   }
 }
 
+/**
+ * 动态加载js资源
+ */
+export function dynamicLoadJs(url) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = url;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.body.appendChild(script);
+  });
+}
+
+/**
+ * 动态加载css资源
+ */
+export function dynamicLoadCss(url) {
+  return new Promise((resolve, reject) => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = url;
+    link.onload = resolve;
+    link.onerror = reject;
+    document.head.appendChild(link);
+  });
+}
+
 /**
  * 获取文件url
  */