@cloud-app-dev/vidc 3.0.7 → 3.0.10

package/.prettierrc

@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 180,
+  "printWidth": 150,
   "overrides": [
     {
       "files": ".prettierrc",

package/.umirc.ts

@@ -87,12 +87,13 @@ export default defineConfig({
       --gray11: #4B4B4B;
       --gray12: #383838;
       --background: #348fe2;
+      --icon:#62708B;
       --fs: 14px;
       --fs-small: 12px;
       --fs-large: 20px;
       --color: rgba(0,0,0,1);
       --color-dark: #000000;
-      --color-light: rgba(102,102,102,1);
+      --color-light: rgba(255,255,255,1);
       --color-disabled: rgba(0,0,0,0.26);
       --shadow1: 2px 0 10px 0 rgba(0,0,0,0.06);
       --shadow2: 2px 0 10px 0 rgba(0,0,0,0.06);

package/es/CustomRenderSelect/index.css

@@ -0,0 +1,20 @@
+.custom-render-select {
+  display: inline-block;
+  position: relative;
+  width: max-content;
+  overflow: hidden;
+}
+.custom-render-select .custom-render-box {
+  display: inline-block;
+  position: relative;
+  z-index: 22;
+}
+.custom-render-select .cloudapp-select {
+  position: absolute;
+  width: max-content;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+}

package/es/CustomRenderSelect/index.d.ts

@@ -0,0 +1,10 @@
+import { SelectProps } from 'antd';
+import React from 'react';
+import './index.less';
+interface ICustomRenderSelectProps extends SelectProps {
+    children?: React.ReactNode;
+    value: any;
+    customRender: (value: any) => JSX.Element;
+}
+declare function CustomRenderSelect({ children, value, customRender, dropdownClassName, ...props }: ICustomRenderSelectProps): JSX.Element;
+export default CustomRenderSelect;

package/es/CustomRenderSelect/index.js

@@ -0,0 +1,67 @@
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+import _useClickAway from "ahooks/es/useClickAway";
+import _useToggle3 from "ahooks/es/useToggle";
+import _uuid from "@cloud-app-dev/utils/es/uuid";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { __rest } from "tslib";
+import React, { useMemo, useRef } from 'react';
+import "./index.css";
+
+function CustomRenderSelect(_a) {
+  var children = _a.children,
+      value = _a.value,
+      customRender = _a.customRender,
+      dropdownClassName = _a.dropdownClassName,
+      props = __rest(_a, ["children", "value", "customRender", "dropdownClassName"]);
+
+  var classname = useMemo(function () {
+    return "custom-render-select-dropdown-".concat(_uuid());
+  }, []);
+  var domRef = useRef(null);
+
+  var _useToggle = _useToggle3(),
+      _useToggle2 = _slicedToArray(_useToggle, 2),
+      open = _useToggle2[0],
+      _useToggle2$ = _useToggle2[1],
+      toggle = _useToggle2$.toggle,
+      set = _useToggle2$.set;
+
+  var getDoms = useMemo(function () {
+    return [function () {
+      return domRef.current.querySelector('.custom-render-box');
+    }, function () {
+      return document.querySelector(".".concat(classname));
+    }];
+  }, []);
+
+  _useClickAway(function () {
+    return set(false);
+  }, getDoms, ['click']);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-render-select",
+    ref: domRef
+  }, /*#__PURE__*/React.createElement(_Select, Object.assign({}, props, {
+    value: value,
+    dropdownClassName: "custom-render-select-dropdown ".concat(classname, " ").concat(dropdownClassName),
+    open: open
+  }), children), /*#__PURE__*/React.createElement("div", {
+    className: "custom-render-box",
+    onClick: toggle
+  }, customRender(value)));
+}
+
+export default CustomRenderSelect;

package/es/Player/demo.js

@@ -23,6 +23,7 @@ import React, { useState } from 'react';
 import Player from './single_player';
 import SegmentPlayer from './segment_player';
 import FrontendPlayer from './frontend_player';
+import moment from 'moment';
 var options = [{
   value: '',
   label: '自动'
@@ -123,28 +124,51 @@ function Demo1() {
   }));
 }
 
-var begin = Date.now();
+var mm = moment().set({
+  hours: 0,
+  minutes: 0,
+  seconds: 0
+});
+var m = mm.clone();
 
 function Demo2() {
   var _useState3 = useState({
     isLive: 1,
     segments: [{
-      beginTime: begin,
-      endTime: begin + 60 * 1000,
+      beginTime: m.valueOf(),
+      endTime: m.set({
+        minutes: 1
+      }).valueOf(),
       url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
     }, {
-      beginTime: begin + 60 * 1000,
-      endTime: begin + 2 * 60 * 1000
+      beginTime: m.set({
+        minutes: 1
+      }).valueOf(),
+      endTime: m.set({
+        minutes: 2
+      }).valueOf()
     }, {
-      beginTime: begin + 2 * 60 * 1000,
-      endTime: begin + 3 * 60 * 1000,
+      beginTime: m.set({
+        minutes: 2
+      }).valueOf(),
+      endTime: m.set({
+        minutes: 3
+      }).valueOf(),
       url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=1'
     }, {
-      beginTime: begin + 3 * 60 * 1000,
-      endTime: begin + 4 * 60 * 1000
+      beginTime: m.set({
+        minutes: 3
+      }).valueOf(),
+      endTime: m.set({
+        minutes: 4
+      }).valueOf()
     }, {
-      beginTime: begin + 4 * 60 * 1000,
-      endTime: begin + 5 * 60 * 1000,
+      beginTime: m.set({
+        minutes: 4
+      }).valueOf(),
+      endTime: m.set({
+        minutes: 5
+      }).valueOf(),
       url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=2'
     }],
     tempUrl: ''
@@ -190,7 +214,7 @@ function Demo2() {
       });
     }
   }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(SegmentPlayer, {
-    begin: begin,
+    begin: mm.valueOf(),
     segments: state.segments,
     isLive: false
   }));

package/es/Player/segment_player.js

@@ -216,6 +216,7 @@ function SegmentPlayer(_a) {
     begin: begin,
     api: api,
     event: event,
+    seekTo: seekTo,
     index: index,
     segments: segments,
     duration: duration,

package/es/Player/segment_timeline.d.ts

@@ -11,6 +11,7 @@ interface ITimeLineProps {
     duration: number;
     setIndex: (i: number) => void;
     begin: number;
+    seekTo: (time: number) => void;
 }
-declare function SegmentTimeLine({ api, event, index, segments, duration, begin, setIndex }: ITimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ api, event, index, segments, duration, begin, setIndex, seekTo }: ITimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/Player/segment_timeline.js

@@ -27,7 +27,8 @@ function SegmentTimeLine(_ref) {
       segments = _ref.segments,
       duration = _ref.duration,
       begin = _ref.begin,
-      setIndex = _ref.setIndex;
+      setIndex = _ref.setIndex,
+      seekTo = _ref.seekTo;
   var status = useBarStatus(event);
 
   var _useTimes = useTimes(api, event),
@@ -56,17 +57,11 @@ function SegmentTimeLine(_ref) {
     var ele = e.currentTarget;
     var rect = ele.getBoundingClientRect();
     var current = e.pageX - rect.left;
-    var currentTime = current / rect.width * api.getDuration();
-
-    if (i !== index) {
-      setIndex(i); // 临时方案，最好方案在初始化播放器时实现，这样处理理论上也可以
-
-      setTimeout(function () {
-        return api.seekTo(currentTime);
-      }, 500);
-    } else {
-      api.seekTo(currentTime);
-    }
+    var item = segments[i - 1];
+    var pTime = item ? item.endTime : begin;
+    var duration = segments[i].endTime - segments[i].beginTime;
+    var currentTime = current / rect.width * duration;
+    seekTo(Math.round(currentTime + pTime));
   }, [segments, api, index, setIndex]);
   return /*#__PURE__*/React.createElement("div", {
     className: "player-timeline-layout player-segment-timeline-layout ".concat(status === 0 ? 'hide-time-line' : '')

package/es/Player/style/iconfont.css

@@ -1,62 +1,179 @@
 @font-face {
-  font-family: 'lm-player-iconfont';
-  src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
+  font-family: "lm-player-iconfont"; /* Project id 1153292 */
+  src: url('iconfont.woff2?t=1661511384224') format('woff2'),
+       url('iconfont.woff?t=1661511384224') format('woff'),
+       url('iconfont.ttf?t=1661511384224') format('truetype');
 }
+
 .lm-player-iconfont {
-  font-family: 'lm-player-iconfont' !important;
+  font-family: "lm-player-iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.lm-player-Loading:before {
-  content: '\e65d';
+
+.lm-player-xiazai:before {
+  content: "\e6d0";
 }
-.lm-player-volume-close:before {
-  content: '\e602';
+
+.lm-player-bofang:before {
+  content: "\e6cf";
 }
-.lm-player-volume-normal-fuben:before {
-  content: '\e604';
+
+.lm-player-tingzhi:before {
+  content: "\e6ce";
 }
-.lm-player-volume-max:before {
-  content: '\e605';
+
+.lm-player-quanbuguanbi:before {
+  content: "\e6cc";
 }
-.lm-player-Pause_Main:before {
-  content: '\e652';
+
+.lm-player-huamianshiying:before {
+  content: "\e6cb";
 }
-.lm-player-Play_Main:before {
-  content: '\e654';
+
+.lm-player-quanping:before {
+  content: "\e6c6";
 }
-.lm-player-ZoomIn_Main:before {
-  content: '\e663';
+
+.lm-player-a-guanbi_close-one11:before {
+  content: "\e623";
 }
-.lm-player-ZoomDefault_Main:before {
-  content: '\e664';
+
+.lm-player-lunxunkaishi:before {
+  content: "\e6c3";
 }
-.lm-player-ZoomOut_Main:before {
-  content: '\e665';
+
+.lm-player-fenping16:before {
+  content: "\e6c5";
 }
-.lm-player-Refresh_Main:before {
-  content: '\e687';
+
+.lm-player-xiangji1fill:before {
+  content: "\e77e";
 }
-.lm-player-ExitFull_Main:before {
-  content: '\e68e';
+
+.lm-player-M_Device_jiazaishibai:before {
+  content: "\e6de";
 }
-.lm-player-Full_Main:before {
-  content: '\e690';
+
+.lm-player-M_Bar_CloudAuto:before {
+  content: "\e6c9";
 }
-.lm-player-PlaySource:before {
-  content: '\e6cd';
+
+.lm-player-S_Box_VideoCloud:before {
+  content: "\e6ca";
 }
+
+.lm-player-S_Bar_LatLongYes:before {
+  content: "\e792";
+}
+
+.lm-player-S_Device_kuaijin:before {
+  content: "\e6c7";
+}
+
+.lm-player-S_Device_shezhi:before {
+  content: "\e6c8";
+}
+
+.lm-player-S_View_Playerpley:before {
+  content: "\e827";
+}
+
+.lm-player-S_View_RotateRight:before {
+  content: "\e828";
+}
+
+.lm-player-S_View_ScreenSizeFull:before {
+  content: "\e82d";
+}
+
+.lm-player-S_View_SoundMiddle:before {
+  content: "\e835";
+}
+
+.lm-player-S_Edit_LoadDown:before {
+  content: "\e7b6";
+}
+
+.lm-player-S_Edit_Reset:before {
+  content: "\e7c3";
+}
+
+.lm-player-S_View_SearchBox:before {
+  content: "\e833";
+}
+
+.lm-player-S_View_PlayerPlay1:before {
+  content: "\e6b7";
+}
+
 .lm-player-YesorNo_No_Dark:before {
-  content: '\e6dd';
+  content: "\e6dd";
+}
+
+.lm-player-Refresh_Main:before {
+  content: "\e687";
 }
+
 .lm-player-SearchBox:before {
-  content: '\e706';
+  content: "\e706";
+}
+
+.lm-player-ZoomIn_Main:before {
+  content: "\e663";
+}
+
+.lm-player-ZoomDefault_Main:before {
+  content: "\e664";
+}
+
+.lm-player-ZoomOut_Main:before {
+  content: "\e665";
 }
+
 .lm-player-PrevFast:before {
-  content: '\e71f';
+  content: "\e71f";
 }
+
 .lm-player-NextFast_Light:before {
-  content: '\e720';
+  content: "\e720";
+}
+
+.lm-player-volume-close:before {
+  content: "\e602";
+}
+
+.lm-player-volume-normal-fuben:before {
+  content: "\e604";
+}
+
+.lm-player-volume-max:before {
+  content: "\e605";
+}
+
+.lm-player-ExitFull_Main:before {
+  content: "\e68e";
+}
+
+.lm-player-Full_Main:before {
+  content: "\e690";
+}
+
+.lm-player-Loading:before {
+  content: "\e65d";
+}
+
+.lm-player-Pause_Main:before {
+  content: "\e652";
+}
+
+.lm-player-Play_Main:before {
+  content: "\e654";
+}
+
+.lm-player-PlaySource:before {
+  content: "\e6cd";
 }
+

package/es/ScreenPlayer/Live.js

@@ -1,3 +1,11 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -28,7 +36,7 @@ function LivePlayer(_ref) {
   var _useState = useState({
     screenNum: 4,
     selectIndex: 0,
-    mode: 1
+    modes: []
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -70,7 +78,10 @@ function LivePlayer(_ref) {
     }
 
     if (newState.hasOwnProperty('mode')) {
-      obj.mode = newState.mode;
+      var newModes = _toConsumableArray(state.modes);
+
+      newModes[state.selectIndex] = newState.mode;
+      obj.modes = newModes;
     }
 
     setState(function (old) {
@@ -89,8 +100,10 @@ function LivePlayer(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-layout"
   }, screenList.map(function (item, index) {
+    var _a;
+
     return /*#__PURE__*/React.createElement(LivePlayerWithExt, Object.assign({}, item, {
-      mode: state.mode,
+      mode: (_a = item.mode) !== null && _a !== void 0 ? _a : state.modes[index],
       isLive: true,
       key: "".concat(item.url, "-").concat(index),
       updatePlayer: function updatePlayer(player) {
@@ -116,7 +129,7 @@ function LivePlayer(_ref) {
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: state.screenNum,
-    mode: state.mode,
+    mode: state.modes[state.selectIndex],
     containerRef: domRef,
     updateState: updateState
   }), children && /*#__PURE__*/React.cloneElement(children, {

package/es/ScreenPlayer/LiveTools.js

@@ -79,20 +79,57 @@ function LiveTools(_ref) {
     title: "\u91CD\u8F7D"
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
-    onClick: onClose
+    onClick: function onClick() {
+      return updateState({
+        mode: mode !== 2 ? 2 : 1
+      });
+    }
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
-    title: "\u5173\u95ED\u5F53\u524D"
+    style: {
+      top: 2,
+      position: 'relative',
+      left: 1
+    },
+    type: "lm-player-S_Device_shezhi",
+    title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-tools-item",
+    onClick: onClose,
+    style: {
+      marginRight: 6
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-tingzhi",
+    title: "\u505C\u6B62",
+    style: {
+      fontSize: 16,
+      position: 'relative',
+      top: 1
+    }
+  })), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
-    onClick: playToggle
+    onClick: playToggle,
+    style: {
+      marginLeft: 6
+    }
   }, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-Pause_Main",
-    title: "\u6682\u505C"
+    title: "\u6682\u505C",
+    style: {
+      fontSize: 22,
+      position: 'relative',
+      top: -2
+    }
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Play_Main",
+    style: {
+      fontSize: 17,
+      position: 'relative',
+      left: 2,
+      top: 2
+    },
+    type: "lm-player-bofang",
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
@@ -100,38 +137,31 @@ function LiveTools(_ref) {
     className: "player-tools-item",
     onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
+    type: "lm-player-quanbuguanbi",
     title: "\u5173\u95ED\u6240\u6709"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item",
-    onClick: function onClick() {
-      return updateState({
-        mode: mode === 1 ? 2 : 1
-      });
-    }
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
-    title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
-  })), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement(ScreenSelect, {
+    screenNum: screenNum,
+    updateState: updateState
+  }), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: toggleFit
   }, fit === 'fill' ? /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ScreenSizeFull",
+    type: "lm-player-huamianshiying",
     title: "\u81EA\u9002\u5E94"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ScreenSizeFull",
+    type: "lm-player-huamianshiying",
     title: "\u586B\u5145"
-  })), /*#__PURE__*/React.createElement(ScreenSelect, {
-    screenNum: screenNum,
-    updateState: updateState
-  }), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
-    onClick: toggleFullscreen
+    onClick: toggleFullscreen,
+    style: {
+      marginRight: 0
+    }
   }, isFullscreen ? /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-ExitFull_Main",
+    type: "lm-player-quanping",
     title: "\u5168\u5C4F"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Full_Main",
+    type: "lm-player-quanping",
     title: "\u5168\u5C4F"
   }))));
 }

package/es/ScreenPlayer/PlayerWithExt.d.ts

@@ -9,11 +9,11 @@ interface ILivePlayerWithExtProps extends ISinglePlayerProps {
     pluginDownloadUrl?: string;
 }
 export declare function LivePlayerWithExt({ mode, isLive, url, type, style, className, updatePlayer, onClick, pluginDownloadUrl, ...props }: ILivePlayerWithExtProps): JSX.Element;
-interface ISegmentPlayerWithExtProps extends Omit<ILivePlayerWithExtProps, 'url' | 'mode'> {
+interface ISegmentPlayerWithExtProps extends Omit<ILivePlayerWithExtProps, 'url'> {
     segments?: ISegmentType[];
     begin?: number;
 }
-export declare function SegmentPlayerWithExt({ begin, style, className, segments, updatePlayer, onClick, ...props }: ISegmentPlayerWithExtProps): JSX.Element;
+export declare function SegmentPlayerWithExt({ begin, style, className, segments, updatePlayer, onClick, mode, ...props }: ISegmentPlayerWithExtProps): JSX.Element;
 interface IFrontendPlayerWithExtProps extends Omit<ILivePlayerWithExtProps, 'url'> {
     segments?: ISegmentType[];
     begin?: number;