wargerm 0.4.20 → 0.4.23

package/dist/components/Modal/index.d.ts

@@ -33,7 +33,6 @@ declare class Modal extends React.PureComponent<Props> {
     titleRef: React.RefObject<any>;
     renderTop: () => JSX.Element;
     componentDidMount(): void;
-    componentWillUnmount(): void;
     renderContent: () => {} | null;
     render(): JSX.Element;
 }

package/dist/components/Video/example/VideoDemo/demo1.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo2.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo3.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo4.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo5.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo6.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo7.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo8.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/example/VideoDemo/demo9.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/components/Video/index.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties } from 'react';
+import { IPlayerOptions } from 'xgplayer';
+/** 清晰度视频项目,name 为清晰度,url 为视频源 */
+export interface DefinitionItemProps {
+    name: string;
+    url: string;
+}
+/** 视频属性配置，继承 xgplayer 配置属性 */
+interface VideoProps extends Omit<IPlayerOptions, 'url' | 'loop'> {
+    /** 唯一id值 */
+    id: string;
+    /** 视频路径数组 */
+    videoUrls: string[];
+    /** 清晰度视频数组,顺序应与 videoUrls 保持一致 */
+    definitionList?: DefinitionItemProps[][];
+    /** 是否循环播放 */
+    isLoop?: boolean;
+    /** 是否可见 */
+    visible?: boolean;
+    /** 是否静音播放 */
+    muted?: boolean;
+    /** 初始化显示首帧 */
+    videoInit?: boolean;
+    /** 是否允许记忆播放 */
+    enableMemory?: boolean;
+    /** 记忆提示文字展示时长(s) */
+    lastPlayTimeHideDelay?: number;
+    /** 手动控制当前播放集数 */
+    currentIndex?: number;
+    setCurrentIndex?: (currentIndex: number) => void;
+    style?: CSSProperties;
+    className?: string;
+}
+declare const _default: ({ id, videoUrls, definitionList, isLoop, muted, currentIndex: parentIndex, setCurrentIndex: setParentIndex, className, style, visible, autoplay, videoInit, enableMemory, lastPlayTimeHideDelay, ...props }: VideoProps) => JSX.Element;
+export default _default;

package/dist/index.css

@@ -411,18 +411,47 @@
 }
 [data-prefers-color='dark'] .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
   background: rgba(156, 208, 239, 0.2) !important;
-  border: 1px solid #9cd0ef !important;
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #9cd0ef !important;
+}
+[data-prefers-color='dark'] .ant-radio-wrapper {
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-disabled + span {
+  color: rgba(255, 255, 255, 0.25);
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:focus-within {
+  box-shadow: none;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: none;
+}
+[data-prefers-color='dark'] .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: none;
 }
 [data-prefers-color='dark'] .ant-radio-button-wrapper {
-  background: #1d2c4a !important;
+  background: rgba(81, 190, 246, 0.28) !important;
+  border: 1px solid #4383a4;
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #4383a4 !important;
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:first-child {
+  border-left: 1px solid #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:not(:first-child)::before {
+  background-color: #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked {
+  color: rgba(21, 27, 37, 0.9) !important;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked .ant-radio-button-checked {
+  background: #51bef6 !important;
 }
 [data-prefers-color='dark'] .ant-picker-input input::-webkit-input-placeholder {
   color: #4383a4;
@@ -1441,8 +1470,8 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='dark'] .videoContainer {
-  min-width: 400px;
-  min-height: 400px;
+  min-width: 10px;
+  min-height: 10px;
   width: 100%;
   height: 100%;
   display: flex;
@@ -2865,8 +2894,8 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='light'] .videoContainer {
-  min-width: 400px;
-  min-height: 400px;
+  min-width: 10px;
+  min-height: 10px;
   width: 100%;
   height: 100%;
   display: flex;

package/dist/index.d.ts

@@ -27,3 +27,4 @@ export { default as TabelCard } from './components/TabelCard';
 export { default as Cascader } from './components/Cascader';
 export { default as WebsocketHeart } from './components/WebsocketHeart';
 export { default as VideoPlayer } from './components/VideoPlayer';
+export { default as Video } from './components/Video';

package/dist/index.esm.css

@@ -411,18 +411,47 @@
 }
 [data-prefers-color='dark'] .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
   background: rgba(156, 208, 239, 0.2) !important;
-  border: 1px solid #9cd0ef !important;
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #9cd0ef !important;
+}
+[data-prefers-color='dark'] .ant-radio-wrapper {
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-disabled + span {
+  color: rgba(255, 255, 255, 0.25);
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:focus-within {
+  box-shadow: none;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: none;
+}
+[data-prefers-color='dark'] .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: none;
 }
 [data-prefers-color='dark'] .ant-radio-button-wrapper {
-  background: #1d2c4a !important;
+  background: rgba(81, 190, 246, 0.28) !important;
+  border: 1px solid #4383a4;
   font-size: 14px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
-  color: #4383a4 !important;
+  color: #bbdff0;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:first-child {
+  border-left: 1px solid #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper:not(:first-child)::before {
+  background-color: #4383a4;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked {
+  color: rgba(21, 27, 37, 0.9) !important;
+}
+[data-prefers-color='dark'] .ant-radio-button-wrapper-checked .ant-radio-button-checked {
+  background: #51bef6 !important;
 }
 [data-prefers-color='dark'] .ant-picker-input input::-webkit-input-placeholder {
   color: #4383a4;
@@ -1441,8 +1470,8 @@ button[data-prefers-color='dark'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='dark'] .videoContainer {
-  min-width: 400px;
-  min-height: 400px;
+  min-width: 10px;
+  min-height: 10px;
   width: 100%;
   height: 100%;
   display: flex;
@@ -2865,8 +2894,8 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   background: #0f6ab7;
 }
 [data-prefers-color='light'] .videoContainer {
-  min-width: 400px;
-  min-height: 400px;
+  min-width: 10px;
+  min-height: 10px;
   width: 100%;
   height: 100%;
   display: flex;

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import 'antd/es/dropdown/style';
 import _Dropdown from 'antd/es/dropdown';
 import 'antd/es/menu/style';
 import _Menu from 'antd/es/menu';
-import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef, createRef } from 'react';
+import React, { memo, useState, useEffect, useMemo, useImperativeHandle, useRef, forwardRef, createRef, useCallback } from 'react';
 import { createFromIconfontCN, SearchOutlined, ReloadOutlined, CloseCircleOutlined, PlusOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
@@ -51,6 +51,7 @@ import ProTable from '@ant-design/pro-table';
 import Player from 'xgplayer';
 import FlvPlayer from 'xgplayer-flv.js';
 import HlsJsPlayer from 'xgplayer-hls.js';
+import { isEmpty } from 'lodash';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -9608,13 +9609,13 @@ var Index$c = function Index(_ref, ref) {
     className: "container-in"
   }, /*#__PURE__*/React.createElement("div", {
     className: "container-in-border"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, title ? /*#__PURE__*/React.createElement("div", {
     className: "header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "dot"
-  }), title), headerCenter, headerTail), /*#__PURE__*/React.createElement("div", {
+  }), title), headerCenter, headerTail) : null, /*#__PURE__*/React.createElement("div", {
     className: "body"
   }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React.createElement("div", {
     className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
@@ -9938,11 +9939,6 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
         document.onmousemove = null;
       };
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      Modal.destory();
-    }
   }, {
     key: "render",
     value: function render() {
@@ -11177,12 +11173,12 @@ function Xgplay(_ref, fRef) {
     }
 
     return function () {
-      var _playerRef$current, _playerRef$current$pl;
+      var _playerRef$current;
 
-      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : (_playerRef$current$pl = _playerRef$current.player) === null || _playerRef$current$pl === void 0 ? void 0 : _playerRef$current$pl.destroy(true);
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.destroy(true);
       setRef(null);
     };
-  });
+  }, []);
   useImperativeHandle(fRef, function () {
     return {
       player: playerRef.current
@@ -11387,4 +11383,234 @@ function VideoPlayer(_ref, ref) {
 
 var index$3 = /*#__PURE__*/forwardRef(VideoPlayer);
 
-export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
+var _excluded$i = ["id", "videoUrls", "definitionList", "isLoop", "muted", "currentIndex", "setCurrentIndex", "className", "style", "visible", "autoplay", "videoInit", "enableMemory", "lastPlayTimeHideDelay"];
+
+var DEFAULT_PLAY_BACK_RATE = [0.5, 0.75, 1, 1.5, 2]; // 默认记忆提示文字展示时长(s)
+
+var DEFAULT_LAST_PLAY_TIME_DELAY = 5; // 默认音量大小
+
+var DEFAULT_VOLUME = 0.6;
+var index$4 = (function (_ref) {
+  var id = _ref.id,
+      _ref$videoUrls = _ref.videoUrls,
+      videoUrls = _ref$videoUrls === void 0 ? [] : _ref$videoUrls,
+      _ref$definitionList = _ref.definitionList,
+      definitionList = _ref$definitionList === void 0 ? [] : _ref$definitionList,
+      _ref$isLoop = _ref.isLoop,
+      isLoop = _ref$isLoop === void 0 ? true : _ref$isLoop,
+      _ref$muted = _ref.muted,
+      muted = _ref$muted === void 0 ? false : _ref$muted,
+      parentIndex = _ref.currentIndex,
+      setParentIndex = _ref.setCurrentIndex,
+      className = _ref.className,
+      style = _ref.style,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
+      _ref$autoplay = _ref.autoplay,
+      autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
+      _ref$videoInit = _ref.videoInit,
+      videoInit = _ref$videoInit === void 0 ? true : _ref$videoInit,
+      _ref$enableMemory = _ref.enableMemory,
+      enableMemory = _ref$enableMemory === void 0 ? false : _ref$enableMemory,
+      _ref$lastPlayTimeHide = _ref.lastPlayTimeHideDelay,
+      lastPlayTimeHideDelay = _ref$lastPlayTimeHide === void 0 ? DEFAULT_LAST_PLAY_TIME_DELAY : _ref$lastPlayTimeHide,
+      props = _objectWithoutProperties(_ref, _excluded$i);
+
+  var player = useRef();
+  var currentPlayerIndex = useRef(0); // 内置的 index 状态管理
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      videoIndex = _useState2[0],
+      setVideoIndex = _useState2[1];
+
+  var currentIndex = useMemo(function () {
+    return parentIndex !== null && parentIndex !== void 0 ? parentIndex : videoIndex;
+  }, [parentIndex, videoIndex]);
+  var setCurrentIndex = useMemo(function () {
+    return setParentIndex !== null && setParentIndex !== void 0 ? setParentIndex : setVideoIndex;
+  }, [setParentIndex, setVideoIndex]);
+  var config = useRef(_objectSpread2({
+    url: videoUrls[0],
+    playbackRate: DEFAULT_PLAY_BACK_RATE,
+    playNext: {
+      urlList: videoUrls.slice(1)
+    },
+    volume: muted ? 0 : DEFAULT_VOLUME,
+    autoplay: autoplay,
+    videoInit: videoInit,
+    lastPlayTimeHideDelay: lastPlayTimeHideDelay
+  }, props));
+  /** 设置当前播放 index */
+
+  var handleSetCurrentIndex = useCallback(function (currentIdx) {
+    var newIdx = currentIdx !== null && currentIdx !== void 0 ? currentIdx : currentPlayerIndex.current + 1;
+
+    if (newIdx >= videoUrls.length) {
+      if (isLoop) {
+        // 允许循环则播放起始视频
+        newIdx = 0;
+      } else if (player.current && player.current.video) {
+        // 不允许循环则进度条快进到最后
+        player.current.currentTime = player.current.video.duration;
+        return;
+      }
+    }
+
+    setCurrentIndex(newIdx);
+  }, [isLoop, setCurrentIndex, videoUrls.length]);
+  /** 播放下一个 */
+
+  var handlePlayNext = useCallback(function (currentIdx) {
+    if (!player.current) {
+      return;
+    }
+
+    player.current.src = videoUrls[currentIdx];
+    player.current.emit('playerNext', currentIdx);
+    player.current.play();
+    currentPlayerIndex.current = currentIdx;
+
+    if (isLoop) {
+      // 防止 next 按钮消失
+      player.current.currentVideoIndex = -videoUrls.length;
+    }
+  }, [videoUrls, isLoop]);
+  /** 重置视频 */
+
+  var handleReset = useCallback(function () {
+    if (!player.current) {
+      return;
+    }
+
+    setCurrentIndex(0);
+    currentPlayerIndex.current = -1;
+    player.current.destroy();
+    player.current = undefined;
+  }, [setCurrentIndex]);
+  /** 弹窗中的视频关闭以后重置 */
+
+  useEffect(function () {
+    if (!visible) {
+      handleReset();
+    }
+  }, [handleReset, visible]);
+  /** 当 currentIndex 改变以后自动播放下一个 */
+
+  useEffect(function () {
+    if (!player.current || !visible) {
+      return;
+    }
+
+    handlePlayNext(currentIndex !== null && currentIndex !== void 0 ? currentIndex : currentPlayerIndex.current);
+  }, [currentIndex, handlePlayNext, visible]);
+  /** 播放器初始化并绑定事件 */
+
+  useEffect(function () {
+    if (!visible || isEmpty(videoUrls) || player.current) {
+      return;
+    }
+
+    player.current = new Player(config.current);
+    player.current.currentVideoIndex = -videoUrls.length;
+    player.current.on('ended', function () {
+      // 如果是循环或有其他视频未播放完，继续播放下一个
+      if (isLoop || !isLoop && currentPlayerIndex.current < videoUrls.length - 1) {
+        handleSetCurrentIndex();
+        setTimeout(function () {
+          var _player$current;
+
+          return (_player$current = player.current) === null || _player$current === void 0 ? void 0 : _player$current.play();
+        });
+      } else {
+        var _player$current2;
+
+        (_player$current2 = player.current) === null || _player$current2 === void 0 ? void 0 : _player$current2.pause();
+      }
+    }); // 播放记忆缓存
+
+    if (enableMemory) {
+      var videoPlayedTimeObj = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}');
+      player.current.on('timeupdate', function () {
+        var _player$current3;
+
+        if (currentPlayerIndex.current === -1) {
+          return;
+        }
+
+        localStorage.setItem('videoPlayedTime', JSON.stringify(_objectSpread2(_objectSpread2({}, videoPlayedTimeObj), {}, _defineProperty({}, id, {
+          lastPlayTime: (_player$current3 = player.current) === null || _player$current3 === void 0 ? void 0 : _player$current3.currentTime,
+          videoIndex: currentPlayerIndex.current
+        }))));
+      });
+    }
+
+    player.current.on('playNextBtnClick', function () {
+      if (!isLoop && player.current) {
+        // 防止 next 按钮消失
+        player.current.currentVideoIndex = videoUrls.length - 2;
+      }
+
+      handleSetCurrentIndex();
+    });
+  }, [autoplay, enableMemory, handleSetCurrentIndex, id, isLoop, videoUrls, videoUrls.length, visible]);
+  /** 读取缓存的播放记忆并跳转 */
+
+  useEffect(function () {
+    if (enableMemory && visible) {
+      var _JSON$parse;
+
+      var _ref2 = ((_JSON$parse = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse[id]) || {},
+          lastPlayTime = _ref2.lastPlayTime,
+          _videoIndex = _ref2.videoIndex;
+
+      setTimeout(function () {
+        handleSetCurrentIndex(_videoIndex);
+        setTimeout(function () {
+          if (player.current) {
+            player.current.currentTime = lastPlayTime;
+          }
+        });
+      });
+    }
+  }, [visible, enableMemory, handleSetCurrentIndex, id]);
+  /** 加载清晰度配置 */
+
+  useEffect(function () {
+    if (!isEmpty(definitionList[currentIndex]) && player.current) {
+      player.current.emit('resourceReady', definitionList[currentIndex]);
+    }
+  }, [currentIndex, definitionList]);
+  var getRef = useCallback(function (ref) {
+    if (ref && visible) {
+      var newConfig = _objectSpread2(_objectSpread2({}, config.current), {}, {
+        el: ref,
+        url: videoUrls[0],
+        playNext: {
+          urlList: videoUrls.slice(1)
+        }
+      });
+
+      if (enableMemory) {
+        var _JSON$parse2;
+
+        var _ref3 = ((_JSON$parse2 = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse2 === void 0 ? void 0 : _JSON$parse2[id]) || {},
+            lastPlayTime = _ref3.lastPlayTime;
+
+        Object.assign(newConfig, {
+          lastPlayTime: lastPlayTime,
+          lastPlayTimeHideDelay: lastPlayTimeHideDelay
+        });
+      }
+
+      config.current = newConfig;
+    }
+  }, [visible, id, videoUrls, lastPlayTimeHideDelay, enableMemory]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    ref: getRef,
+    style: style
+  });
+});
+
+export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$4 as Video, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };

package/dist/index.js

@@ -55,6 +55,7 @@ var ProTable = require('@ant-design/pro-table');
 var Player = require('xgplayer');
 var FlvPlayer = require('xgplayer-flv.js');
 var HlsJsPlayer = require('xgplayer-hls.js');
+var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -9646,13 +9647,13 @@ var Index$c = function Index(_ref, ref) {
     className: "container-in"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "container-in-border"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, title ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "header"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "title"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     className: "dot"
-  }), title), headerCenter, headerTail), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), title), headerCenter, headerTail) : null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "body"
   }, sliderTabs ? sliderTabs.components[activeTab] : props.children)), sliderTabs && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left  ".concat(sliderTabs.className || '') : "right  ".concat(sliderTabs.className || ''))
@@ -9976,11 +9977,6 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
         document.onmousemove = null;
       };
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      Modal.destory();
-    }
   }, {
     key: "render",
     value: function render() {
@@ -11215,12 +11211,12 @@ function Xgplay(_ref, fRef) {
     }
 
     return function () {
-      var _playerRef$current, _playerRef$current$pl;
+      var _playerRef$current;
 
-      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : (_playerRef$current$pl = _playerRef$current.player) === null || _playerRef$current$pl === void 0 ? void 0 : _playerRef$current$pl.destroy(true);
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.destroy(true);
       setRef(null);
     };
-  });
+  }, []);
   React.useImperativeHandle(fRef, function () {
     return {
       player: playerRef.current
@@ -11425,6 +11421,236 @@ function VideoPlayer(_ref, ref) {
 
 var index$3 = /*#__PURE__*/React.forwardRef(VideoPlayer);
 
+var _excluded$i = ["id", "videoUrls", "definitionList", "isLoop", "muted", "currentIndex", "setCurrentIndex", "className", "style", "visible", "autoplay", "videoInit", "enableMemory", "lastPlayTimeHideDelay"];
+
+var DEFAULT_PLAY_BACK_RATE = [0.5, 0.75, 1, 1.5, 2]; // 默认记忆提示文字展示时长(s)
+
+var DEFAULT_LAST_PLAY_TIME_DELAY = 5; // 默认音量大小
+
+var DEFAULT_VOLUME = 0.6;
+var index$4 = (function (_ref) {
+  var id = _ref.id,
+      _ref$videoUrls = _ref.videoUrls,
+      videoUrls = _ref$videoUrls === void 0 ? [] : _ref$videoUrls,
+      _ref$definitionList = _ref.definitionList,
+      definitionList = _ref$definitionList === void 0 ? [] : _ref$definitionList,
+      _ref$isLoop = _ref.isLoop,
+      isLoop = _ref$isLoop === void 0 ? true : _ref$isLoop,
+      _ref$muted = _ref.muted,
+      muted = _ref$muted === void 0 ? false : _ref$muted,
+      parentIndex = _ref.currentIndex,
+      setParentIndex = _ref.setCurrentIndex,
+      className = _ref.className,
+      style = _ref.style,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
+      _ref$autoplay = _ref.autoplay,
+      autoplay = _ref$autoplay === void 0 ? false : _ref$autoplay,
+      _ref$videoInit = _ref.videoInit,
+      videoInit = _ref$videoInit === void 0 ? true : _ref$videoInit,
+      _ref$enableMemory = _ref.enableMemory,
+      enableMemory = _ref$enableMemory === void 0 ? false : _ref$enableMemory,
+      _ref$lastPlayTimeHide = _ref.lastPlayTimeHideDelay,
+      lastPlayTimeHideDelay = _ref$lastPlayTimeHide === void 0 ? DEFAULT_LAST_PLAY_TIME_DELAY : _ref$lastPlayTimeHide,
+      props = _objectWithoutProperties(_ref, _excluded$i);
+
+  var player = React.useRef();
+  var currentPlayerIndex = React.useRef(0); // 内置的 index 状态管理
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      videoIndex = _useState2[0],
+      setVideoIndex = _useState2[1];
+
+  var currentIndex = React.useMemo(function () {
+    return parentIndex !== null && parentIndex !== void 0 ? parentIndex : videoIndex;
+  }, [parentIndex, videoIndex]);
+  var setCurrentIndex = React.useMemo(function () {
+    return setParentIndex !== null && setParentIndex !== void 0 ? setParentIndex : setVideoIndex;
+  }, [setParentIndex, setVideoIndex]);
+  var config = React.useRef(_objectSpread2({
+    url: videoUrls[0],
+    playbackRate: DEFAULT_PLAY_BACK_RATE,
+    playNext: {
+      urlList: videoUrls.slice(1)
+    },
+    volume: muted ? 0 : DEFAULT_VOLUME,
+    autoplay: autoplay,
+    videoInit: videoInit,
+    lastPlayTimeHideDelay: lastPlayTimeHideDelay
+  }, props));
+  /** 设置当前播放 index */
+
+  var handleSetCurrentIndex = React.useCallback(function (currentIdx) {
+    var newIdx = currentIdx !== null && currentIdx !== void 0 ? currentIdx : currentPlayerIndex.current + 1;
+
+    if (newIdx >= videoUrls.length) {
+      if (isLoop) {
+        // 允许循环则播放起始视频
+        newIdx = 0;
+      } else if (player.current && player.current.video) {
+        // 不允许循环则进度条快进到最后
+        player.current.currentTime = player.current.video.duration;
+        return;
+      }
+    }
+
+    setCurrentIndex(newIdx);
+  }, [isLoop, setCurrentIndex, videoUrls.length]);
+  /** 播放下一个 */
+
+  var handlePlayNext = React.useCallback(function (currentIdx) {
+    if (!player.current) {
+      return;
+    }
+
+    player.current.src = videoUrls[currentIdx];
+    player.current.emit('playerNext', currentIdx);
+    player.current.play();
+    currentPlayerIndex.current = currentIdx;
+
+    if (isLoop) {
+      // 防止 next 按钮消失
+      player.current.currentVideoIndex = -videoUrls.length;
+    }
+  }, [videoUrls, isLoop]);
+  /** 重置视频 */
+
+  var handleReset = React.useCallback(function () {
+    if (!player.current) {
+      return;
+    }
+
+    setCurrentIndex(0);
+    currentPlayerIndex.current = -1;
+    player.current.destroy();
+    player.current = undefined;
+  }, [setCurrentIndex]);
+  /** 弹窗中的视频关闭以后重置 */
+
+  React.useEffect(function () {
+    if (!visible) {
+      handleReset();
+    }
+  }, [handleReset, visible]);
+  /** 当 currentIndex 改变以后自动播放下一个 */
+
+  React.useEffect(function () {
+    if (!player.current || !visible) {
+      return;
+    }
+
+    handlePlayNext(currentIndex !== null && currentIndex !== void 0 ? currentIndex : currentPlayerIndex.current);
+  }, [currentIndex, handlePlayNext, visible]);
+  /** 播放器初始化并绑定事件 */
+
+  React.useEffect(function () {
+    if (!visible || lodash.isEmpty(videoUrls) || player.current) {
+      return;
+    }
+
+    player.current = new Player__default['default'](config.current);
+    player.current.currentVideoIndex = -videoUrls.length;
+    player.current.on('ended', function () {
+      // 如果是循环或有其他视频未播放完，继续播放下一个
+      if (isLoop || !isLoop && currentPlayerIndex.current < videoUrls.length - 1) {
+        handleSetCurrentIndex();
+        setTimeout(function () {
+          var _player$current;
+
+          return (_player$current = player.current) === null || _player$current === void 0 ? void 0 : _player$current.play();
+        });
+      } else {
+        var _player$current2;
+
+        (_player$current2 = player.current) === null || _player$current2 === void 0 ? void 0 : _player$current2.pause();
+      }
+    }); // 播放记忆缓存
+
+    if (enableMemory) {
+      var videoPlayedTimeObj = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}');
+      player.current.on('timeupdate', function () {
+        var _player$current3;
+
+        if (currentPlayerIndex.current === -1) {
+          return;
+        }
+
+        localStorage.setItem('videoPlayedTime', JSON.stringify(_objectSpread2(_objectSpread2({}, videoPlayedTimeObj), {}, _defineProperty({}, id, {
+          lastPlayTime: (_player$current3 = player.current) === null || _player$current3 === void 0 ? void 0 : _player$current3.currentTime,
+          videoIndex: currentPlayerIndex.current
+        }))));
+      });
+    }
+
+    player.current.on('playNextBtnClick', function () {
+      if (!isLoop && player.current) {
+        // 防止 next 按钮消失
+        player.current.currentVideoIndex = videoUrls.length - 2;
+      }
+
+      handleSetCurrentIndex();
+    });
+  }, [autoplay, enableMemory, handleSetCurrentIndex, id, isLoop, videoUrls, videoUrls.length, visible]);
+  /** 读取缓存的播放记忆并跳转 */
+
+  React.useEffect(function () {
+    if (enableMemory && visible) {
+      var _JSON$parse;
+
+      var _ref2 = ((_JSON$parse = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse[id]) || {},
+          lastPlayTime = _ref2.lastPlayTime,
+          _videoIndex = _ref2.videoIndex;
+
+      setTimeout(function () {
+        handleSetCurrentIndex(_videoIndex);
+        setTimeout(function () {
+          if (player.current) {
+            player.current.currentTime = lastPlayTime;
+          }
+        });
+      });
+    }
+  }, [visible, enableMemory, handleSetCurrentIndex, id]);
+  /** 加载清晰度配置 */
+
+  React.useEffect(function () {
+    if (!lodash.isEmpty(definitionList[currentIndex]) && player.current) {
+      player.current.emit('resourceReady', definitionList[currentIndex]);
+    }
+  }, [currentIndex, definitionList]);
+  var getRef = React.useCallback(function (ref) {
+    if (ref && visible) {
+      var newConfig = _objectSpread2(_objectSpread2({}, config.current), {}, {
+        el: ref,
+        url: videoUrls[0],
+        playNext: {
+          urlList: videoUrls.slice(1)
+        }
+      });
+
+      if (enableMemory) {
+        var _JSON$parse2;
+
+        var _ref3 = ((_JSON$parse2 = JSON.parse(localStorage.getItem('videoPlayedTime') || '{}')) === null || _JSON$parse2 === void 0 ? void 0 : _JSON$parse2[id]) || {},
+            lastPlayTime = _ref3.lastPlayTime;
+
+        Object.assign(newConfig, {
+          lastPlayTime: lastPlayTime,
+          lastPlayTimeHideDelay: lastPlayTimeHideDelay
+        });
+      }
+
+      config.current = newConfig;
+    }
+  }, [visible, id, videoUrls, lastPlayTimeHideDelay, enableMemory]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: className,
+    ref: getRef,
+    style: style
+  });
+});
+
 exports.AutoScroll = Index$9;
 exports.Breadcrumb = Index$b;
 exports.Button = WButton;
@@ -11448,6 +11674,7 @@ exports.Switch = WSwitch;
 exports.TabelCard = index$2;
 exports.Table = Table;
 exports.TreeSelect = Index$6;
+exports.Video = index$4;
 exports.VideoPlayer = index$3;
 exports.WDatePicker = Index$5;
 exports.WForm = WForm$1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.4.20",
+  "version": "0.4.23",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",
@@ -81,4 +81,4 @@
     "react": "^16.12.0",
     "yorkie": "^2.0.0"
   }
-}
+}