@cloud-app-dev/vidc 3.0.9 → 3.0.12

package/.prettierrc

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

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTY1NjgzMTU3MywidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTM5NzYzMTU3M30.OWPxfPgFBWqGJaRsYLSAZohn2AarhbkOuWLa1bwgZE4';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MjI1ODMwNzUxNSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTk5OTEwNzUxNX0.uk_G3vqBCFqxQM2jbV6CSN-z9YNVt_cx5nWXkSuCOIA';
 
 export default defineConfig({
   title: 'CloudApp VIDC',
@@ -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/clear-cache.sh

@@ -0,0 +1,4 @@
+#! /bin/sh
+
+rm -rf .mfsu
+rm -rf src/.umi*

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, getPopupContainer, ...props }: ICustomRenderSelectProps): JSX.Element;
+export default CustomRenderSelect;

package/es/CustomRenderSelect/index.js

@@ -0,0 +1,73 @@
+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,
+      getPopupContainer = _a.getPopupContainer,
+      props = __rest(_a, ["children", "value", "customRender", "dropdownClassName", "getPopupContainer"]);
+
+  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),
+    getPopupContainer: getPopupContainer ? getPopupContainer : function () {
+      return domRef.current.parentElement.parentElement;
+    },
+    open: open
+  }), children), /*#__PURE__*/React.createElement("div", {
+    className: "custom-render-box",
+    onClick: toggle
+  }, customRender(value)), /*#__PURE__*/React.createElement("div", {
+    className: "popup-container"
+  }));
+}
+
+export default CustomRenderSelect;

package/es/List/DynamicGridList/index.js

@@ -1,7 +1,8 @@
 import "antd/lib/message/style";
 import _message from "antd/lib/message";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import GridList from '../GridList';
 import useInfiniteScroll from '../../useInfiniteScroll';
 
@@ -28,8 +29,8 @@ function DynamicGridList(_a) {
       data = _useInfiniteScroll.data,
       noMore = _useInfiniteScroll.noMore;
 
-  useEffect(function () {
-    return _message.success('数据已全部加载完成！');
+  _useUpdateEffect(function () {
+    return noMore && _message.success('数据已全部加载完成！');
   }, [noMore]);
 
   function getItemData(data) {

package/es/List/DynamicList/utils.d.ts

@@ -1,4 +1,4 @@
-export declare const LIMIT = 30;
+export declare const LIMIT = 10;
 export declare const skeletonList: {
     skeleton: boolean;
 }[];

package/es/List/DynamicList/utils.js

@@ -1,4 +1,4 @@
-export var LIMIT = 30;
+export var LIMIT = 10;
 export var skeletonList = Array.from(new Array(LIMIT)).map(function () {
   return {
     skeleton: true

package/es/List/GridList/Demo.js

@@ -33,7 +33,7 @@ function getWindowMargin(windowHeight) {
 
 function getItemData(image, columnWidth) {
   return {
-    key: image.url,
+    key: image.index,
     height: 400,
     width: ITEM_WIDTH,
     url: image.url

package/es/Player/api/index.d.ts

@@ -1,4 +1,4 @@
-import flvjs from 'flv.zv.js';
+import Flvjs from '@cloud-app-dev/flv.js';
 import Hls, { HlsConfig } from 'hls.js';
 import type { FlvPlayerConfig } from '../player';
 declare class Api {
@@ -57,9 +57,9 @@ declare class Api {
 }
 export declare type TypeAndPlay = {
     type?: string;
-    flv?: flvjs.Player;
+    flv?: Flvjs.Player;
     hls?: Hls;
 };
-export declare function useTypeAndPlay(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [string, flvjs.Player, Hls];
-export declare function usePlayerApi(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [Api, [string, flvjs.Player, Hls]];
+export declare function useTypeAndPlay(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: Flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [string, Flvjs.Player, Hls];
+export declare function usePlayerApi(url?: string, type?: string, isLive?: boolean, container?: HTMLElement, segments?: Flvjs.MediaSegment[], flvConfig?: FlvPlayerConfig, hlsConfig?: HlsConfig): [Api, [string, Flvjs.Player, Hls]];
 export default Api;

package/es/Player/contraller_bar/contraller_event.js

@@ -47,7 +47,7 @@ function ContrallerEvent(_ref) {
       container.removeEventListener('mouseenter', showContraller, false);
       container.removeEventListener('mouseleave', hideContraller, false);
     };
-  }, [event]);
+  }, [container, event]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(children, function (child) {
     return /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
       visibel: visibel

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/event/errorEvent.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import type VideoEventInstance from '.';
 import type Api from '../api';
-import flvjs from 'flv.zv.js';
+import Flvjs from '@cloud-app-dev/flv.js';
 import Hls from 'hls.js';
 interface IErrorEventProps {
     event: VideoEventInstance;
     api: Api;
     errorReloadTimer: number;
-    flv: flvjs.Player;
+    flv: Flvjs.Player;
     hls: Hls;
     reload: () => void;
     unload: () => void;

package/es/Player/event/errorEvent.js

@@ -20,7 +20,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState, useEffect, useRef } from 'react';
 import EventName from './eventName';
-import flvjs from 'flv.zv.js';
+import Flvjs from '@cloud-app-dev/flv.js';
 import Hls from 'hls.js';
 
 function ErrorEvent(_ref) {
@@ -70,7 +70,7 @@ function ErrorEvent(_ref) {
     };
 
     if (flv) {
-      flv.on(flvjs.Events.ERROR, errorHandle);
+      flv.on(Flvjs.Events.ERROR, errorHandle);
     }
 
     if (hls) {

package/es/Player/live_heart.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-import Api from './api';
-declare function LiveHeart({ api }: {
+import type Api from './api';
+import type VideoEventInstance from './event';
+declare function LiveHeart({ api, event }: {
     api: Api;
+    event: VideoEventInstance;
 }): JSX.Element;
 export default LiveHeart;

package/es/Player/live_heart.js

@@ -1,9 +1,16 @@
 import _useRafInterval from "ahooks/es/useRafInterval";
-import React, { useEffect } from 'react';
-import BrowserTab from './event/browserTabEvent';
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _useDocumentVisibility from "ahooks/es/useDocumentVisibility";
+import React, { useRef } from 'react';
+import Events from './event/eventName';
 
 function LiveHeart(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+      event = _ref.event;
+
+  var documentVisibility = _useDocumentVisibility();
+
+  var cTimeRef = useRef(null);
 
   var run = function run() {
     var current = api.getCurrentTime();
@@ -16,21 +23,26 @@ function LiveHeart(_ref) {
     }
   };
 
-  useEffect(function () {
-    var browserTabChange = function browserTabChange() {
-      BrowserTab.visibilityState() === 'visible' && run();
-    };
+  _useUpdateEffect(function () {
+    return run();
+  }, [documentVisibility]);
 
-    BrowserTab.addEventListener(browserTabChange);
-    return function () {
-      BrowserTab.removeEventListener(browserTabChange);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [api]);
+  _useRafInterval(function () {
+    return cTimeRef.current = api.getCurrentTime();
+  }, 1 * 1000);
 
   _useRafInterval(function () {
     return run();
   }, 30 * 1000);
 
+  _useRafInterval(function () {
+    var cuurentTime = api.getCurrentTime();
+
+    if (!api.video.paused && cuurentTime === cTimeRef.current) {
+      event.emit(Events.ERROR);
+    }
+  }, 20 * 1000);
+
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 

package/es/Player/message.js

@@ -110,8 +110,8 @@ function VideoMessage(_ref) {
       api.pause();
     };
 
-    event.addEventListener('loadstart', openLoading);
-    event.addEventListener('waiting', openLoading); // event.addEventListener('seeking', openLoading)
+    event.addEventListener('loadstart', openLoading); // event.addEventListener('waiting', openLoading);
+    // event.addEventListener('seeking', openLoading)
 
     event.addEventListener('loadeddata', closeLoading);
     event.addEventListener('canplay', closeLoading);
@@ -122,8 +122,8 @@ function VideoMessage(_ref) {
     event.on(EventName.HISTORY_PLAY_END, playEnd);
     event.on(EventName.CLEAR_ERROR_TIMER, reloadSuccess);
     return function () {
-      event.removeEventListener('loadstart', openLoading);
-      event.removeEventListener('waiting', openLoading); // event.removeEventListener('seeking', openLoading)
+      event.removeEventListener('loadstart', openLoading); // event.removeEventListener('waiting', openLoading);
+      // event.removeEventListener('seeking', openLoading)
 
       event.removeEventListener('loadeddata', closeLoading);
       event.removeEventListener('canplay', closeLoading);

package/es/Player/player.d.ts

@@ -1,12 +1,12 @@
-import type FlvJs from 'flv.zv.js';
+import type Flvjs from '@cloud-app-dev/flv.js';
 import type Hls, { HlsConfig } from 'hls.js';
 import type React from 'react';
 import type Api from './api';
 import type VideoEventInstance from './event';
 
 export type FlvPlayerConfig = {
-  mediaDataSource: FlvJs.MediaDataSource;
-  config: FlvJs.Config;
+  mediaDataSource: Flvjs.MediaDataSource;
+  config: Flvjs.Config;
 };
 
 export interface ISinglePlayerProps {
@@ -198,7 +198,7 @@ export type ExportPlayerType = {
   container: HTMLElement;
   api: Api;
   event: VideoEventInstance;
-  plugins: [FlvJs.Player, Hls];
+  plugins: [Flvjs.Player, Hls];
   fit?: string;
   setIndex?: (i: number) => void;
   seekTo?: (i: number) => void;

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/single_player.js

@@ -213,7 +213,8 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     reload: reload,
     errorReloadTimer: errorReloadTimer
   }), isLive && /*#__PURE__*/React.createElement(LiveHeart, {
-    api: playApi
+    api: playApi,
+    event: playEvent
   })), children);
 });
 SinglePlayer.defaultProps = {