zy-react-library 1.1.0 → 1.1.2

package/components/Video/AliPlayer.js

@@ -1,160 +1,182 @@
-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;
+import { useDocumentVisibility } from 'ahooks';
+import { uniqueId } from 'lodash-es';
+import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
+import { dynamicLoadJs, dynamicLoadCss } from '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const AliPlayer = /*#__PURE__*/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) {
+      if (window?.base?.loadDynamicResource) {
+        await window.base.loadDynamicResource({
+          url: "https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/aliplayer-min.js",
+          type: "script"
+        });
+        await window.base.loadDynamicResource({
+          url: "https://g.alicdn.com/apsara-media-box/imp-web-player/2.16.3/skins/default/aliplayer-min.css",
+          type: "link"
+        });
+      } else {
+        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 /*#__PURE__*/jsx("div", {
+    ref: containerRef,
+    id: className,
+    style: {
+      width,
+      height
+    }
+  });
+});
+AliPlayer.displayName = "AliPlayer";
+
+export { AliPlayer as default };

package/components/Video/index.js

@@ -1,90 +1,71 @@
-import { Button, 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,
-}) => {
-  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}
-        width={800}
-        title={title}
-        footer={[
-          <Button key="cancel" onClick={() => setVisible(false)}>
-            取消
-          </Button>,
-        ]}
-        maskClosable={false}
-        onCancel={() => setVisible(false)}
-      >
-        {playerElement}
-      </Modal>
-    );
-  }
-
-  return playerElement;
-};
-
-Video.displayName = "Video";
-
-export default Video;
+import { Modal, Button } from 'antd';
+import { useState, useRef, useEffect } from 'react';
+import { getFileUrl } from '../../utils/index.js';
+import AliPlayer from './AliPlayer.js';
+import { jsx } from 'react/jsx-runtime';
+
+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
+}) => {
+  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 = /*#__PURE__*/jsx(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 /*#__PURE__*/jsx(Modal, {
+      open: visible,
+      width: 800,
+      title: title,
+      footer: [/*#__PURE__*/jsx(Button, {
+        onClick: () => setVisible(false),
+        children: "\u53D6\u6D88"
+      }, "cancel")],
+      maskClosable: false,
+      onCancel: () => setVisible(false),
+      children: playerElement
+    });
+  }
+  return playerElement;
+};
+Video.displayName = "Video";
+
+export { Video as default };

package/css/common.less

@@ -20,6 +20,10 @@
     height: 10px;
     background-color: rgb(241, 241, 242);
   }
+
+  + .table-layout .@{ant-prefix}-pro-table-list-toolbar-container {
+    padding-top: 26px !important;
+  }
 }
 
 .table-layout {

package/enum/dictionary/index.js

@@ -1,7 +1,9 @@
 /**
  * 数据字典 appKey 枚举
  */
-export const DICTIONARY_APP_KEY_ENUM = {
+const DICTIONARY_APP_KEY_ENUM = {
   DEFAULT: "0bb989ecada5470c87635018ece9f327",
-  GWJ: "0bb989ecada5470c87635018ece9f327",
-}
+  GWJ: "0bb989ecada5470c87635018ece9f327"
+};
+
+export { DICTIONARY_APP_KEY_ENUM };

package/enum/formItemRender/index.js

@@ -1,37 +1,39 @@
 /**
  * 表单项类型枚举
- */
-export const FORM_ITEM_RENDER_ENUM = {
-  /** 映射为 antd Input */
-  INPUT: "input",
-  /** 映射为 antd Input.TextArea */
-  TEXTAREA: "textarea",
-  /** 映射为 antd InputNumber */
-  INPUT_NUMBER: "inputNumber",
-  /** 映射为 antd InputNumber */
-  NUMBER: "number",
-  /** 映射为 antd Select */
-  SELECT: "select",
-  /** 映射为 antd Radio.Group */
-  RADIO: "radio",
-  /** 映射为 antd Checkbox.Group */
-  CHECKBOX: "checkbox",
-  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD */
-  DATE: "date",
-  /** 映射为 antd DatePicker.MonthPicker，日期格式为YYYY-MM */
-  DATE_MONTH: "dateMonth",
-  /** 映射为 antd DatePicker.YearPicker，日期格式为YYYY */
-  DATE_YEAR: "dateYear",
-  /** 映射为 antd DatePicker.WeekPicker，日期格式为YYYY-wo */
-  DATE_WEEK: "dateWeek",
-  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD */
-  DATE_RANGE: "dateRange",
-  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD HH:mm:ss */
-  DATETIME: "datetime",
-  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD HH:mm:ss */
-  DATETIME_RANGE: "datetimeRange",
-  /** 映射为 antd Divider */
-  DIVIDER: "divider",
-  /** 映射为 antd FormList */
-  FORM_LIST: "formList",
-};
+ */
+const FORM_ITEM_RENDER_ENUM = {
+  /** 映射为 antd Input */
+  INPUT: "input",
+  /** 映射为 antd Input.TextArea */
+  TEXTAREA: "textarea",
+  /** 映射为 antd InputNumber */
+  INPUT_NUMBER: "inputNumber",
+  /** 映射为 antd InputNumber */
+  NUMBER: "number",
+  /** 映射为 antd Select */
+  SELECT: "select",
+  /** 映射为 antd Radio.Group */
+  RADIO: "radio",
+  /** 映射为 antd Checkbox.Group */
+  CHECKBOX: "checkbox",
+  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD */
+  DATE: "date",
+  /** 映射为 antd DatePicker.MonthPicker，日期格式为YYYY-MM */
+  DATE_MONTH: "dateMonth",
+  /** 映射为 antd DatePicker.YearPicker，日期格式为YYYY */
+  DATE_YEAR: "dateYear",
+  /** 映射为 antd DatePicker.WeekPicker，日期格式为YYYY-wo */
+  DATE_WEEK: "dateWeek",
+  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD */
+  DATE_RANGE: "dateRange",
+  /** 映射为 antd DatePicker，日期格式为YYYY-MM-DD HH:mm:ss */
+  DATETIME: "datetime",
+  /** 映射为 antd DatePicker.RangePicker，日期格式为YYYY-MM-DD HH:mm:ss */
+  DATETIME_RANGE: "datetimeRange",
+  /** 映射为 antd Divider */
+  DIVIDER: "divider",
+  /** 映射为 antd FormList */
+  FORM_LIST: "formList"
+};
+
+export { FORM_ITEM_RENDER_ENUM };