@cloud-app-dev/vidc 2.1.0-alpha.8 → 2.2.0-alpha.2

package/es/{RefDrawer/index.js → Player/contraller_bar/useBarStatus.js}

@@ -10,62 +10,43 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useContext, useImperativeHandle, useMemo, useState } from 'react';
-import Drawer from '../Drawer';
-import ConfigContext from '../ConfigContext';
-
-function RefDrawer(_, ref) {
-  var context = useContext(ConfigContext.Context);
-  var root = useMemo(function () {
-    return (context === null || context === void 0 ? void 0 : context.root) || document.body;
-  }, [context === null || context === void 0 ? void 0 : context.root]);
+import { useEffect, useState } from 'react';
+import EventName from '../event/eventName';
 
+function useBarStatus(event) {
   var _useState = useState({
-    content: null,
-    visible: false,
-    title: '',
-    onOk: undefined,
-    width: undefined,
-    className: undefined
+    status: 1
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1];
+      setState = _useState2[1]; // 监听
+
 
-  var open = function open(options) {
-    setState(function (old) {
-      return Object.assign(Object.assign(Object.assign({}, old), options), {
-        visible: true
+  useEffect(function () {
+    var show = function show() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          status: 1
+        });
       });
-    });
-  };
+    };
 
-  var close = function close() {
-    setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
-        visible: false
+    var hide = function hide() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          status: 0
+        });
       });
-    });
-  };
+    };
 
-  useImperativeHandle(ref, function () {
-    return {
-      open: open,
-      close: close
+    event.on(EventName.SHOW_CONTRALLER, show);
+    event.on(EventName.HIDE_CONTRALLER, hide);
+    return function () {
+      event.off(EventName.SHOW_CONTRALLER, show);
+      event.off(EventName.HIDE_CONTRALLER, hide);
     };
-  }, [state]);
-  return /*#__PURE__*/React.createElement(Drawer, {
-    visible: state.visible,
-    onOk: state.onOk,
-    onClose: close,
-    destroyOnClose: true,
-    title: state.title,
-    width: state.width,
-    className: state.className,
-    getContainer: function getContainer() {
-      return root;
-    }
-  }, state.content);
+  }, []);
+  return state.status;
 }
 
-export default /*#__PURE__*/React.forwardRef(RefDrawer);
+export default useBarStatus;

package/es/Player/demo.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => JSX.Element;
+export default App;

package/es/Player/demo.js

@@ -0,0 +1,269 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import "antd/lib/input/style";
+import _Input from "antd/lib/input";
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+
+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, { useState } from 'react';
+import Player from './single_player';
+import SegmentPlayer from './segment_player';
+import FrontendPlayer from './frontend_player';
+var options = [{
+  value: '',
+  label: '自动'
+}, {
+  value: 'flv',
+  label: 'FLV'
+}, {
+  value: 'hls',
+  label: 'HLS'
+}];
+var options2 = [{
+  value: 1,
+  label: '直播'
+}, {
+  value: 0,
+  label: '录像'
+}];
+
+function Demo1() {
+  var _useState = useState({
+    type: undefined,
+    isLive: 1,
+    url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
+    tempUrl: ''
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, "\u6807\u51C6\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 10,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(_Select, {
+    value: state.type || '',
+    onChange: function onChange(val) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          type: val
+        });
+      });
+    }
+  }, options.map(function (v) {
+    return /*#__PURE__*/React.createElement(_Select.Option, {
+      key: v.label,
+      value: v.value
+    }, v.label);
+  })), /*#__PURE__*/React.createElement(_Input, {
+    style: {
+      flex: 1,
+      height: 32
+    },
+    type: "text",
+    placeholder: "\u8BF7\u8F93\u5165\u89C6\u9891\u5730\u5740",
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          tempUrl: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement(_Select, {
+    value: state.isLive,
+    onChange: function onChange(val) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          isLive: val
+        });
+      });
+    }
+  }, options2.map(function (v) {
+    return /*#__PURE__*/React.createElement(_Select.Option, {
+      key: v.label,
+      value: v.value
+    }, v.label);
+  })), /*#__PURE__*/React.createElement(_Button, {
+    style: {
+      width: 60,
+      height: 32
+    },
+    onClick: function onClick(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          url: state.tempUrl
+        });
+      });
+    }
+  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(Player, {
+    type: state.type,
+    url: state.url,
+    isLive: !!state.isLive
+  }));
+}
+
+function Demo2() {
+  var _useState3 = useState({
+    isLive: 1,
+    segments: [{
+      duration: 60,
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+    }, {
+      duration: 60
+    }, {
+      duration: 60,
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=1'
+    }, {
+      duration: 60
+    }, {
+      duration: 60,
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=2'
+    }, {
+      duration: 60
+    }, {
+      duration: 60,
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=3'
+    }, {
+      duration: 60
+    }, {
+      duration: 60,
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=4'
+    }, {
+      duration: 60
+    }, {
+      duration: 60,
+      url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4?date=5'
+    }],
+    tempUrl: ''
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, " Sements\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 10,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    style: {
+      flex: 1,
+      height: 32
+    },
+    type: "text",
+    placeholder: "\u8BF7\u8F93\u5165\u89C6\u9891\u7247\u6BB5JSON",
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          tempUrl: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement(_Button, {
+    style: {
+      width: 60,
+      height: 32
+    },
+    onClick: function onClick(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          segments: JSON.parse(state.tempUrl)
+        });
+      });
+    }
+  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(SegmentPlayer, {
+    begin: Date.now(),
+    segments: state.segments,
+    isLive: false
+  }));
+}
+
+function Demo3() {
+  var _useState5 = useState({
+    url: 'http://192.168.101.161:18090/flv/vod/2b9cb54836e136630_34/187981bd526bdf548.flv?origin_url=sdk%3A%2F%2Fadmin%3Aabc12345%40192.168.14.3%3A8000%2Fcam%2Fplayback%3Ffactory%3Dhikvision%26channel%3D34%26subType%3D0%26startTime%3D1652889636%26endTime%3D1652890200',
+    tempUrl: '',
+    begin: 1652889636,
+    end: 1652890200
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      state = _useState6[0],
+      setState = _useState6[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      marginTop: 20
+    }
+  }, /*#__PURE__*/React.createElement("h3", null, " \u524D\u7AEF\u5F55\u50CF\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 10,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    style: {
+      flex: 1,
+      height: 32
+    },
+    type: "text",
+    placeholder: "\u8BF7\u8F93\u5165\u524D\u7AEF\u5F55\u50CF\u5730\u5740",
+    onChange: function onChange(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          tempUrl: e.target.value
+        });
+      });
+    }
+  }), /*#__PURE__*/React.createElement(_Button, {
+    style: {
+      width: 60,
+      height: 32
+    },
+    onClick: function onClick(e) {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          url: state.tempUrl
+        });
+      });
+    }
+  }, "\u64AD\u653E")), /*#__PURE__*/React.createElement(FrontendPlayer, {
+    begin: state.begin,
+    end: state.end,
+    url: state.url,
+    onSeek: function onSeek(time) {
+      return console.log(time);
+    }
+  }));
+}
+
+var App = function App() {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement(Demo1, null), /*#__PURE__*/React.createElement(Demo2, null), /*#__PURE__*/React.createElement(Demo3, null));
+};
+
+export default App;

package/es/Player/event/browserTabEvent.d.ts

@@ -0,0 +1,9 @@
+declare function visibilityState(): any;
+declare function addEventListener(listener: () => void): void;
+declare function removeEventListener(listener: () => void): void;
+declare const _default: {
+    addEventListener: typeof addEventListener;
+    removeEventListener: typeof removeEventListener;
+    visibilityState: typeof visibilityState;
+};
+export default _default;

package/es/Player/event/browserTabEvent.js

@@ -0,0 +1,57 @@
+function getHiddenProp() {
+  var prefixes = ['webkit', 'moz', 'ms', 'o']; // 如果hidden 属性是原生支持的，我们就直接返回
+
+  if ('hidden' in document) {
+    return 'hidden';
+  } // 其他的情况就循环现有的浏览器前缀，拼接我们所需要的属性
+
+
+  for (var i = 0; i < prefixes.length; i++) {
+    // 如果当前的拼接的前缀在 document对象中存在 返回即可
+    if (prefixes[i] + 'Hidden' in document) {
+      return prefixes[i] + 'Hidden';
+    }
+  } // 其他的情况 直接返回null
+
+
+  return undefined;
+}
+
+function getVisibilityState() {
+  var prefixes = ['webkit', 'moz', 'ms', 'o'];
+
+  if ('visibilityState' in document) {
+    return 'visibilityState';
+  }
+
+  for (var i = 0; i < prefixes.length; i++) {
+    if (prefixes[i] + 'VisibilityState' in document) {
+      return prefixes[i] + 'VisibilityState';
+    }
+  } // 找不到返回 null
+
+
+  return null;
+}
+
+function visibilityState() {
+  return document[getVisibilityState()];
+}
+
+function addEventListener(listener) {
+  var visProp = getHiddenProp();
+  var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
+  document.addEventListener(evtname, listener, false);
+}
+
+function removeEventListener(listener) {
+  var visProp = getHiddenProp();
+  var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
+  document.removeEventListener(evtname, listener, false);
+}
+
+export default {
+  addEventListener: addEventListener,
+  removeEventListener: removeEventListener,
+  visibilityState: visibilityState
+};

package/es/Player/event/errorEvent.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type VideoEventInstance from '.';
+import type Api from '../api';
+import flvjs from 'flv.zv.js';
+import Hls from 'hls.js';
+interface IErrorEventProps {
+    event: VideoEventInstance;
+    api: Api;
+    errorReloadTimer: number;
+    flv: flvjs.Player;
+    hls: Hls;
+    reload: () => void;
+    unload: () => void;
+}
+declare function ErrorEvent({ event, api, reload, unload, errorReloadTimer, flv, hls }: IErrorEventProps): JSX.Element;
+export default ErrorEvent;

package/es/Player/event/errorEvent.js

@@ -0,0 +1,120 @@
+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."); }
+
+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, { useState, useEffect, useRef } from 'react';
+import EventName from './eventName';
+import flvjs from 'flv.zv.js';
+import Hls from 'hls.js';
+
+function ErrorEvent(_ref) {
+  var event = _ref.event,
+      api = _ref.api,
+      reload = _ref.reload,
+      unload = _ref.unload,
+      errorReloadTimer = _ref.errorReloadTimer,
+      flv = _ref.flv,
+      hls = _ref.hls;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      errorTimer = _useState2[0],
+      setErrorTime = _useState2[1];
+
+  var errorInfo = useRef(null);
+  var reloadTimer = useRef(null);
+  useEffect(function () {
+    var errorHandle = function errorHandle() {
+      var _console;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      if (args[2] && args[2].msg && args[2].msg.includes('Unsupported audio')) {
+        return;
+      }
+
+      (_console = console).error.apply(_console, args);
+
+      errorInfo.current = args;
+      setErrorTime(errorTimer + 1);
+    };
+
+    var reloadSuccess = function reloadSuccess() {
+      if (errorTimer > 0) {
+        console.warn('视频重连成功！');
+        event.emit(EventName.RELOAD_SUCCESS);
+        clearErrorTimer();
+      }
+    };
+
+    var clearErrorTimer = function clearErrorTimer() {
+      return setErrorTime(0);
+    };
+
+    if (flv) {
+      flv.on(flvjs.Events.ERROR, errorHandle);
+    }
+
+    if (hls) {
+      hls.on(Hls.Events.ERROR, errorHandle);
+    }
+
+    event.on(EventName.ERROR, errorHandle);
+    event.addEventListener('error', errorHandle); //获取video状态清除错误状态
+
+    event.addEventListener('canplay', reloadSuccess);
+    return function () {
+      //PS 对象销毁时事件自动回收
+      // if (flv) {
+      //   flv.off(flvjs.Events.ERROR, errorHandle);
+      // }
+      // if (hls) {
+      //   hls.off(Hls.Events.ERROR, errorHandle);
+      // }
+      event.off(EventName.ERROR, errorHandle);
+      event.removeEventListener('error', errorHandle);
+      event.removeEventListener('canplay', reloadSuccess);
+    };
+  }, [event, flv, hls, errorTimer]);
+  useEffect(function () {
+    if (errorTimer === 0) {
+      return undefined;
+    }
+
+    if (errorTimer > errorReloadTimer) {
+      unload();
+      event.emit(EventName.RELOAD_FAIL);
+      return undefined;
+    }
+
+    console.warn("\u89C6\u9891\u64AD\u653E\u51FA\u9519\uFF0C\u6B63\u5728\u8FDB\u884C\u91CD\u8FDE".concat(errorTimer));
+    reloadTimer.current = setTimeout(function () {
+      event.emit.apply(event, [EventName.ERROR_RELOAD, errorTimer].concat(_toConsumableArray(errorInfo.current)));
+      reload();
+    }, 2 * 1000);
+    return function () {
+      clearTimeout(reloadTimer.current);
+    };
+  }, [errorTimer, api, event, flv, hls]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+export default ErrorEvent;

package/es/Player/event/eventName.d.ts

@@ -0,0 +1,3 @@
+import type { EventName } from '../player';
+declare const Events: EventName;
+export default Events;

package/es/Player/event/eventName.js

@@ -0,0 +1,15 @@
+var Events = {
+  RELOAD: 'reload',
+  RELOAD_FAIL: 'reloadFail',
+  RELOAD_SUCCESS: 'reloadSuccess',
+  ERROR: 'error',
+  ERROR_RELOAD: 'errorRload',
+  HISTORY_PLAY_END: 'historyPlayEnd',
+  SEEK: 'seek',
+  TRANSFORM: 'transform',
+  CHANGE_PLAY_INDEX: 'changePlayIndex',
+  HIDE_CONTRALLER: 'hideContraller',
+  SHOW_CONTRALLER: 'showContraller',
+  CLEAR_ERROR_TIMER: 'clearErrorTimer'
+};
+export default Events;

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

@@ -0,0 +1,22 @@
+import type { CustomEvent, EventInfo } from '../player';
+declare class VideoEventInstance {
+    video: HTMLVideoElement;
+    events: {
+        [key: string]: EventInfo;
+    };
+    playerEvents: {
+        [key: string]: (() => void)[];
+    };
+    constructor(video: HTMLVideoElement);
+    on(eventName: string, handle: () => void): void;
+    addEventListener(eventName: string, handle: () => void): void;
+    removeEventListener(eventName: string, handle: () => void): void;
+    emit(eventName: string, ...data: any): void;
+    off(eventName: string, handle: () => void): void;
+    destroy(): void;
+}
+declare type PlayEvent = VideoEventInstance;
+export declare function usePlayerEvent(video: HTMLVideoElement): PlayEvent;
+export declare function useVideoEvents(event: VideoEventInstance, events: CustomEvent[]): void;
+export declare function useRegisterPlayerEvents(event: VideoEventInstance, events: CustomEvent[]): void;
+export default VideoEventInstance;