@cloud-app-dev/vidc 2.1.0-alpha.9 → 2.2.0-alpha.1

package/es/Player/style/message.css

@@ -0,0 +1,49 @@
+.lm-player-message-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  background: transparent;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  transition: all 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  pointer-events: none;
+}
+.lm-player-message-mask.lm-player-mask-loading-animation {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1;
+}
+.lm-player-message-mask .lm-player-loading-icon {
+  position: relative;
+  font-size: 48px;
+  z-index: -1;
+  visibility: hidden;
+}
+.lm-player-message-mask .lm-player-loading-icon.lm-player-loading-animation {
+  visibility: visible;
+  z-index: 9;
+  animation: loadingAnimation 1s linear infinite;
+}
+.lm-player-message-mask .lm-player-loading-icon.lm-player-loadfail {
+  visibility: visible;
+  z-index: 9;
+}
+.lm-player-message-mask .lm-player-message {
+  color: #fff;
+  font-size: 16px;
+  padding: 10px;
+}
+@keyframes loadingAnimation {
+  form {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/es/Player/style/slider.css

@@ -0,0 +1,96 @@
+.slider-layout {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.slider-layout .slider-content {
+  width: 100%;
+  height: 2px;
+  position: relative;
+  transition: height 0.2s;
+  cursor: pointer;
+  overflow: hidden;
+}
+.slider-layout .slider-other-content {
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: height 0.2s;
+  cursor: pointer;
+  z-index: 9;
+  pointer-events: none;
+}
+.slider-layout .slider-max-line {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-radius: 4px;
+}
+.slider-layout .slider-visibel-line {
+  position: absolute;
+  background: #5b7eac;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.slider-layout .slider-current-line {
+  position: absolute;
+  background-color: #ffaa00;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  border-radius: 4px;
+}
+.slider-layout .drag-change-icon {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-left: -3px;
+  border: 1px solid #fff;
+  background-color: #ffaa00;
+  top: -3px;
+  pointer-events: all;
+  box-sizing: content-box;
+}
+.slider-layout:hover .slider-content,
+.slider-layout:hover .slider-other-content {
+  height: 4px;
+}
+.slider-layout:hover .drag-change-icon {
+  width: 10px;
+  height: 10px;
+  top: -4px;
+  margin-left: -5px;
+}
+.lm-player-slide-tips {
+  background: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  left: 0;
+  top: -26px;
+  transform: translate(-50%, -100%);
+  font-size: 12px;
+  color: #fff;
+  border-radius: 4px;
+  z-index: 6;
+  padding: 2px 4px;
+  white-space: nowrap;
+  z-index: 99;
+}

package/es/Player/style/timeline.css

@@ -0,0 +1,92 @@
+.player-timeline-layout {
+  position: absolute;
+  left: 0;
+  bottom: 28px;
+  width: 100%;
+  height: 20px;
+  background: #000000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9;
+  opacity: 0.8;
+  transition: all 0.1s;
+  cursor: pointer;
+}
+.player-timeline-layout.hide-time-line {
+  bottom: 0;
+  height: 4px;
+}
+.player-timeline-layout .buffer-line {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: #676767;
+  pointer-events: none;
+  max-width: 100%;
+}
+.player-timeline-layout .current-line {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: #4661ff;
+  pointer-events: none;
+  overflow: hidden;
+  max-width: 100%;
+}
+.player-timeline-layout.player-segment-timeline-layout {
+  background: transparent;
+}
+.player-timeline-layout.player-segment-timeline-layout .segment-line-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.player-timeline-layout.player-segment-timeline-layout .segment-line-box .segment-line-item {
+  background: #000000;
+  position: relative;
+  box-sizing: border-box;
+}
+.player-timeline-layout.player-segment-timeline-layout .segment-line-box .segment-line-item:hover::after {
+  content: ' ';
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border: 1px solid #fff;
+  z-index: 6;
+  position: absolute;
+}
+.player-timeline-layout.player-segment-timeline-layout .segment-line-box .segment-line-item.segment-line-item-none {
+  background: #de0e0e;
+  z-index: 6;
+  cursor: not-allowed;
+}
+.player-timeline-layout.frontend-player-timeline-layout .frontend-line-mark {
+  position: absolute;
+  height: 100%;
+  width: 2px;
+  background-color: #fff;
+  pointer-events: none;
+}
+.player-timeline-layout.frontend-player-timeline-layout .frontend-line-tip-box {
+  position: absolute;
+  top: -130px;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 3px;
+  background-color: #000000;
+  padding: 10px;
+  width: 162px;
+  line-height: 20px;
+  margin-left: -81px;
+}
+.segment-line-tip-box {
+  font-size: 12px;
+}
+.segment-line-tip-box div {
+  margin: 0;
+  padding: 2px 0;
+}

package/es/Player/timeline.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type Api from './api';
+import type VideoEventInstance from './event';
+import './style/timeline.less';
+interface ITimeLineProps {
+    api: Api;
+    event: VideoEventInstance;
+}
+export declare function useTimes(api: Api, event: VideoEventInstance, isHide?: boolean): number[];
+declare function TimeLine({ api, event }: ITimeLineProps): JSX.Element;
+export default TimeLine;

package/es/Player/timeline.js

@@ -0,0 +1,104 @@
+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 React, { useCallback, useEffect, useMemo, useState } from 'react';
+import useBarStatus from './contraller_bar/useBarStatus';
+import "./style/timeline.css";
+export function useTimes(api, event, isHide) {
+  var _useState = useState({
+    currentTime: 0,
+    buffered: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  if (isHide) {
+    return [0, 0, 0];
+  }
+
+  useEffect(function () {
+    var getCurrentTime = function getCurrentTime() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          currentTime: api.getCurrentTime(),
+          buffered: api.getSecondsLoaded()
+        });
+      });
+    };
+
+    var getBuffered = function getBuffered() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          buffered: api.getSecondsLoaded()
+        });
+      });
+    };
+
+    var seekendPlay = function seekendPlay() {
+      return api.play();
+    };
+
+    event.addEventListener('timeupdate', getCurrentTime);
+    event.addEventListener('progress', getBuffered);
+    event.addEventListener('suspend', getBuffered);
+    event.addEventListener('seeked', seekendPlay);
+    return function () {
+      event.removeEventListener('timeupdate', getCurrentTime);
+      event.removeEventListener('progress', getBuffered);
+      event.removeEventListener('suspend', getBuffered);
+      event.removeEventListener('seeked', seekendPlay);
+    };
+  }, [event, api]);
+  return [state.currentTime, state.buffered, api.getDuration()];
+}
+
+function TimeLine(_ref) {
+  var api = _ref.api,
+      event = _ref.event;
+  var status = useBarStatus(event);
+
+  var _useTimes = useTimes(api, event),
+      _useTimes2 = _slicedToArray(_useTimes, 3),
+      currentTime = _useTimes2[0],
+      buffered = _useTimes2[1],
+      duration = _useTimes2[2];
+
+  var playPercent = useMemo(function () {
+    return currentTime / duration * 100;
+  }, [currentTime]);
+  var bufferedPercent = useMemo(function () {
+    return buffered / duration * 100;
+  }, [buffered]);
+  var seekWithLine = useCallback(function (e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    var current = e.pageX - rect.left;
+    var cTime = current / rect.width * api.getDuration();
+    api.seekTo(cTime);
+  }, [api]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "player-timeline-layout ".concat(status === 0 ? 'hide-time-line' : ''),
+    onClick: seekWithLine
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "buffer-line",
+    style: {
+      width: "".concat(bufferedPercent, "%")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "current-line",
+    style: {
+      width: "".concat(playPercent, "%")
+    }
+  }));
+}
+
+export default TimeLine;

package/es/Player/util.d.ts

@@ -0,0 +1,48 @@
+import Flvjs from 'flv.zv.js';
+import Hls, { HlsConfig } from 'hls.js';
+import type { FlvPlayerConfig } from './player';
+/**
+ * 创建HLS对象
+ * @param {*} video
+ * @param {*} URL
+ */
+export declare function createHlsPlayer(video: HTMLVideoElement, url: string, hlsConfig: HlsConfig): Hls;
+/**
+ * 创建FLV对象
+ * @param {*} video
+ * @param {*} options
+ */
+export declare function createFlvPlayer(video: HTMLVideoElement, url: string, isLive?: boolean, flvConfig?: FlvPlayerConfig): Flvjs.Player;
+export declare const playReload: (video: HTMLVideoElement, flv?: Flvjs.Player, hls?: Hls, url?: string) => void;
+export declare const playUnload: (video: HTMLVideoElement, flv?: Flvjs.Player, hls?: Hls) => void;
+/**
+ * 获取播放文件类型
+ * @param {*} url
+ */
+export declare function getVideoType(url: string): "flv" | "native" | "m3u8";
+export declare function timeStamp(second: number): string;
+/**
+ * 日期格式化
+ * @param {*} timetemp
+ */
+export declare function dateFormat(timetemp: number): string;
+/**
+ * 全屏
+ * @param {*} element
+ */
+export declare function fullscreen(element: HTMLElement): void;
+/**
+ * exitFullscreen 退出全屏
+ * @param  {Objct} element 选择器
+ */
+export declare function exitFullscreen(): void;
+/**
+ * 判读是否支持全屏
+ */
+export declare function fullscreenEnabled(): boolean;
+/**
+ * [isFullscreen 判断浏览器是否全屏]
+ * @return [全屏则返回当前调用全屏的元素,不全屏返回false]
+ */
+export declare function isFullscreen(ele: HTMLElement): boolean;
+export declare function getRandom(): string;

package/es/Player/util.js

@@ -0,0 +1,172 @@
+import Flvjs from 'flv.zv.js';
+import Hls from 'hls.js';
+/**
+ * 创建HLS对象
+ * @param {*} video
+ * @param {*} URL
+ */
+
+export function createHlsPlayer(video, url, hlsConfig) {
+  if (!Hls.isSupported()) {
+    return undefined;
+  }
+
+  var player = new Hls(Object.assign({
+    liveDurationInfinity: true,
+    fragLoadingMaxRetry: 0,
+    manifestLoadingMaxRetry: 0,
+    levelLoadingMaxRetry: 0,
+    enableWorker: true
+  }, hlsConfig));
+  player.loadSource(url);
+  player.attachMedia(video);
+  return player;
+}
+/**
+ * 创建FLV对象
+ * @param {*} video
+ * @param {*} options
+ */
+
+export function createFlvPlayer(video, url, isLive, flvConfig) {
+  if (!Flvjs.isSupported()) {
+    return undefined;
+  }
+
+  var mediaDataSource = Object.assign({
+    type: 'flv',
+    url: url
+  }, flvConfig.mediaDataSource);
+  var config = Object.assign({
+    enableWorker: true,
+    // lazyLoad: false,
+    // Indicates how many seconds of data to be kept for lazyLoad.
+    // lazyLoadMaxDuration: 0,
+    // autoCleanupMaxBackwardDuration: 3,
+    // autoCleanupMinBackwardDuration: 2,
+    // autoCleanupSourceBuffer: true,
+    enableStashBuffer: false,
+    stashInitialSize: 128,
+    isLive: isLive !== null && isLive !== void 0 ? isLive : true
+  }, flvConfig.config);
+  var player = Flvjs.createPlayer(mediaDataSource, config);
+  player.attachMediaElement(video);
+  player.load();
+  return player;
+}
+export var playReload = function playReload(video, flv, hls, url) {
+  video.pause();
+  video.removeAttribute('src');
+
+  if (flv) {
+    flv.unload();
+    flv.load();
+    flv.play();
+  }
+
+  if (hls) {
+    hls.swapAudioCodec();
+    hls.recoverMediaError();
+    hls.stopLoad();
+    hls.startLoad();
+    hls.loadSource(url);
+    video.play();
+  }
+
+  if (!flv && !hls) {
+    video.setAttribute('src', url);
+    video.play();
+  }
+};
+export var playUnload = function playUnload(video, flv, hls) {
+  video.pause();
+
+  if (flv) {
+    flv.unload();
+    return;
+  }
+
+  if (hls) {
+    hls.stopLoad();
+    return;
+  }
+
+  video.removeAttribute('src');
+};
+/**
+ * 获取播放文件类型
+ * @param {*} url
+ */
+
+export function getVideoType(url) {
+  if (!url) {
+    return 'native';
+  }
+
+  return url.indexOf('.flv') > -1 ? 'flv' : url.indexOf('.m3u8') > -1 ? 'm3u8' : 'native';
+}
+export function timeStamp(second) {
+  // 转换为式分秒
+  var h = Math.round(second / 60 / 60 % 24);
+  var m = Math.round(second / 60 % 60);
+  var s = Math.round(second % 60);
+
+  if (h === 0) {
+    return "".concat(m < 10 ? '0' + m : m, ":").concat(s < 10 ? '0' + s : s);
+  }
+
+  return "".concat(h < 10 ? '0' + h : h, ":").concat(m < 10 ? '0' + m : m, ":").concat(s < 10 ? '0' + s : s);
+}
+/**
+ * 日期格式化
+ * @param {*} timetemp
+ */
+
+export function dateFormat(timetemp) {
+  var date = new Date(timetemp);
+  var YYYY = date.getFullYear();
+  var DD = date.getDate();
+  var MM = date.getMonth() + 1;
+  var hh = date.getHours();
+  var mm = date.getMinutes();
+  var ss = date.getSeconds();
+  return "".concat(YYYY, ".").concat(MM > 9 ? MM : '0' + MM, ".").concat(DD > 9 ? DD : '0' + DD, " ").concat(hh > 9 ? hh : '0' + hh, ".").concat(mm > 9 ? mm : '0' + mm, ".").concat(ss > 9 ? ss : '0' + ss);
+}
+/**
+ * 全屏
+ * @param {*} element
+ */
+
+export function fullscreen(element) {
+  element.requestFullscreen();
+}
+/**
+ * exitFullscreen 退出全屏
+ * @param  {Objct} element 选择器
+ */
+
+export function exitFullscreen() {
+  document.exitFullscreen();
+}
+/**
+ * 判读是否支持全屏
+ */
+
+export function fullscreenEnabled() {
+  return document.fullscreenEnabled;
+}
+/**
+ * [isFullscreen 判断浏览器是否全屏]
+ * @return [全屏则返回当前调用全屏的元素,不全屏返回false]
+ */
+
+export function isFullscreen(ele) {
+  if (!ele) {
+    return false;
+  }
+
+  return document.fullscreenElement === ele;
+}
+export function getRandom() {
+  return Math.random().toString(36).substr(2);
+}

package/es/Progress/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 interface IProgressComponentProps {
     status: 'over' | 'error' | 'loading';

package/es/Tree/BaseTree/demo.d.ts

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

package/es/Tree/BaseTree/index.d.ts

@@ -2,7 +2,7 @@
  * tree 基础组件支持各种自定义其他tree可用过它来拓展
  */
 import React from 'react';
-import { DataNode, TreeProps } from 'antd/lib/tree';
+import type { DataNode, TreeProps } from 'antd/lib/tree';
 import './index.less';
 export interface ITreeNodeProps {
     prefix?: (node: DataNode) => JSX.Element;
@@ -12,7 +12,7 @@ export interface ITreeNodeProps {
     nameKey?: string;
     RenderTreeTitle?: (node: DataNode) => JSX.Element;
 }
-export interface BaseTreeProps extends TreeProps {
+export interface BaseTreeProps extends Omit<TreeProps, 'icon'> {
     checkable?: boolean;
     className?: string;
     treeData?: DataNode[] | any[];

package/es/Tree/demo.d.ts

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

package/es/Tree/index.js

@@ -85,7 +85,7 @@ function TreeMode(_a) {
           focusKey: Date.now()
         });
       });
-      return null;
+      return;
     }
 
     switch (mode) {

package/es/UserSelect/demo.d.ts

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

package/es/WorkerFlow/Form/Approver.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeItem, WorkerFlowFormType } from '../interface';
 interface IApproverFormProps {
     form: WorkerFlowFormType[];

package/es/WorkerFlow/Form/Condition.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ConditionItemType, NodeItem, WorkerFlowFormType } from '../interface';
 interface IConditionFormProps {
     form: WorkerFlowFormType[];

package/es/WorkerFlow/Form/EmptyUserSet.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeUserType } from '../interface';
 interface IUserSelectProps {
     userList: NodeUserType[];

package/es/WorkerFlow/Form/FormAuth.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { WorkerFlowFormType } from '../interface';
 interface IFormAuthProps {
     form: WorkerFlowFormType[];

package/es/WorkerFlow/Form/GroupList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeUserType } from '../interface';
 interface IGroupListProps {
     list: [string, NodeUserType[]][];

package/es/WorkerFlow/Form/GroupSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeUserType } from '../interface';
 interface IUserSelectProps {
     userList: NodeUserType[];

package/es/WorkerFlow/Form/Handle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeItem, WorkerFlowFormType } from '../interface';
 interface IHandleFormProps {
     form: WorkerFlowFormType[];

package/es/WorkerFlow/Form/LevelGroupSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeUserType } from '../interface';
 interface ILevelGroupSelectProps {
     userList: NodeUserType[];

package/es/WorkerFlow/Form/Notifier.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeItem } from '../interface';
 interface INotifierFormProps {
     item?: NodeItem;

package/es/WorkerFlow/Form/UserAndGroupSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeUserType } from '../interface';
 interface IUserSelectProps {
     userList: NodeUserType[];

package/es/WorkerFlow/Form/UserSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeUserType } from '../interface';
 interface IUserSelectProps {
     userList: NodeUserType[];