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

package/es/Player/event/index.js

@@ -0,0 +1,175 @@
+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; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+import { useEffect, useState } from 'react';
+
+var VideoEventInstance = /*#__PURE__*/function () {
+  function VideoEventInstance(video) {
+    _classCallCheck(this, VideoEventInstance);
+
+    this.video = video;
+    this.events = {};
+    this.playerEvents = {};
+  }
+
+  _createClass(VideoEventInstance, [{
+    key: "on",
+    value: function on(eventName, handle) {
+      this.events && this.events[eventName] ? this.events[eventName].listener.push(handle) : this.events[eventName] = {
+        type: eventName,
+        listener: [handle]
+      };
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(eventName, handle) {
+      if (this.video) {
+        this.playerEvents[eventName] ? this.playerEvents[eventName].push(handle) : this.playerEvents[eventName] = [handle];
+        this.video.addEventListener(eventName, handle, false);
+      }
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(eventName, handle) {
+      if (this.video) {
+        if (!this.playerEvents || !this.playerEvents[eventName]) {
+          return;
+        }
+
+        var index = this.playerEvents[eventName].findIndex(function (v) {
+          return v === handle;
+        });
+        index > -1 && this.playerEvents[eventName].splice(index, 1);
+        this.video.removeEventListener(eventName, handle, false);
+      }
+    }
+  }, {
+    key: "emit",
+    value: function emit(eventName) {
+      for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        data[_key - 1] = arguments[_key];
+      }
+
+      if (!this.events || !this.events[eventName]) {
+        return;
+      }
+
+      this.events[eventName].listener.forEach(function (v) {
+        v.apply(void 0, data);
+      });
+    }
+  }, {
+    key: "off",
+    value: function off(eventName, handle) {
+      if (!this.events || !this.events.eventName) {
+        return;
+      }
+
+      var index = this.events[eventName].listener.findIndex(function (v) {
+        return v === handle;
+      });
+      index > -1 && this.events[eventName].listener.splice(index, 1);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this = this;
+
+      Object.keys(this.playerEvents).forEach(function (key) {
+        _this.playerEvents[key].forEach(function (fn) {
+          _this.removeEventListener(key, fn);
+        });
+      });
+      this.playerEvents = {};
+      this.events = {};
+      this.video = null;
+    }
+  }]);
+
+  return VideoEventInstance;
+}();
+
+export function usePlayerEvent(video) {
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      event = _useState2[0],
+      setEvent = _useState2[1];
+
+  useEffect(function () {
+    if (!video) {
+      console.debug('wait create event...');
+      return undefined;
+    }
+
+    var event = new VideoEventInstance(video);
+    setEvent(event);
+    return function () {
+      return event.destroy();
+    };
+  }, [video]);
+  return event;
+}
+export function useVideoEvents(event, events) {
+  useEffect(function () {
+    if (!event || !events) {
+      return undefined;
+    }
+
+    events.forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          eventName = _ref2[0],
+          handle = _ref2[1];
+
+      event.addEventListener(eventName, handle);
+    });
+    return function () {
+      events.forEach(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            eventName = _ref4[0],
+            handle = _ref4[1];
+
+        event.removeEventListener(eventName, handle);
+      });
+    };
+  }, [event]);
+}
+export function useRegisterPlayerEvents(event, events) {
+  useEffect(function () {
+    if (!event || !events) {
+      return undefined;
+    }
+
+    events.forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          eventName = _ref6[0],
+          handle = _ref6[1];
+
+      event.on(eventName, handle);
+    });
+    return function () {
+      events.forEach(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+            eventName = _ref8[0],
+            handle = _ref8[1];
+
+        event.off(eventName, handle);
+      });
+    };
+  }, [event]);
+}
+export default VideoEventInstance;

package/es/Player/frontend_player.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ISinglePlayerProps } from './player';
+declare type OmitPlayerProps = 'customTimeLine' | 'onCanPlayerInit' | 'isLive' | 'reload' | 'type';
+interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, OmitPlayerProps> {
+    begin?: number;
+    end?: number;
+    onSeek(time: number): void;
+}
+/**
+ * @desc 主组件，负责片段整体逻辑控制
+ * @param param0
+ * @returns
+ */
+declare function FrontendPlayer({ url, begin, end, onSeek, ...props }: IFrontendPlayerProps): JSX.Element;
+export default FrontendPlayer;

package/es/Player/frontend_player.js

@@ -0,0 +1,90 @@
+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, useState } from 'react';
+import SinglePlayer from './single_player';
+import FrontendTimeLine from './frontend_timeline';
+/**
+ * @desc 主组件，负责片段整体逻辑控制
+ * @param param0
+ * @returns
+ */
+
+function FrontendPlayer(_a) {
+  var url = _a.url,
+      begin = _a.begin,
+      end = _a.end,
+      onSeek = _a.onSeek,
+      props = __rest(_a, ["url", "begin", "end", "onSeek"]);
+
+  var _useState = useState({
+    forceKey: Date.now()
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var playerRef = useRef(null);
+
+  var _ref = playerRef.current || {},
+      api = _ref.api,
+      event = _ref.event; // 秒级别转换毫秒
+
+
+  var beginTemp = useMemo(function () {
+    return begin ? String(begin).length === 10 ? Math.floor(begin * 1000) : begin : begin;
+  }, []);
+  var endTemp = useMemo(function () {
+    return end ? String(end).length === 10 ? Math.floor(end * 1000) : end : end;
+  }, []);
+  var duration = useMemo(function () {
+    return (endTemp - beginTemp) / 1000;
+  }, [beginTemp, endTemp]); //单位s 秒
+  // 重置reload
+
+  var reload = function reload() {
+    onSeek(beginTemp);
+    playerRef.current.api.reload();
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        forceKey: Date.now()
+      });
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({
+    ref: playerRef,
+    url: url,
+    type: "flv",
+    reload: reload,
+    isLive: false,
+    onCanPlayerInit: function onCanPlayerInit() {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          forceKey: Date.now()
+        });
+      });
+    },
+    customTimeLine: api && event ? /*#__PURE__*/React.createElement(FrontendTimeLine, {
+      end: endTemp,
+      onSeek: onSeek,
+      key: state.forceKey,
+      begin: beginTemp,
+      api: api,
+      event: event,
+      duration: duration
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null)
+  }, props));
+}
+
+export default FrontendPlayer;

package/es/Player/frontend_timeline.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type Api from './api';
+import type VideoEventInstance from './event';
+import './style/timeline.less';
+interface ITimeLineProps {
+    api: Api;
+    event: VideoEventInstance;
+    duration: number;
+    begin: number;
+    end: number;
+    onSeek(time: number): void;
+}
+declare function FrontendTimeLine({ api, event, duration, begin, end, onSeek }: ITimeLineProps): JSX.Element;
+export default FrontendTimeLine;

package/es/Player/frontend_timeline.js

@@ -0,0 +1,138 @@
+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, startTransition } from 'react';
+import useBarStatus from './contraller_bar/useBarStatus';
+import { useTimes } from './timeline';
+import { dateFormat } from './util';
+import "./style/timeline.css";
+
+function FrontendTimeLine(_ref) {
+  var api = _ref.api,
+      event = _ref.event,
+      duration = _ref.duration,
+      begin = _ref.begin,
+      end = _ref.end,
+      onSeek = _ref.onSeek;
+
+  var _useState = useState({
+    time: 0,
+    markTime: 0,
+    left: -1,
+    visible: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var status = useBarStatus(event);
+
+  var _useTimes = useTimes(api, event),
+      _useTimes2 = _slicedToArray(_useTimes, 1),
+      currentTime = _useTimes2[0];
+
+  var rTime = useMemo(function () {
+    return state.time + currentTime;
+  }, [state.time, currentTime]);
+  useEffect(function () {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        time: 0
+      });
+    });
+  }, [begin]);
+  var playPercent = useMemo(function () {
+    return rTime / duration * 100;
+  }, [rTime]);
+  var cTime = useMemo(function () {
+    return begin + rTime * 1000;
+  }, [begin, rTime]);
+  var seekWithLine = useCallback(function (e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    var current = e.pageX - rect.left;
+    var cTime = current / rect.width * duration;
+    onSeek && onSeek(begin + cTime * 1000); //时间轴进度条rTime是要加上currentTime,这里要减去一下，包装交互一致性
+
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        time: cTime - currentTime
+      });
+    });
+  }, [api, duration, begin, onSeek, currentTime]);
+  var onLineMouseOver = useCallback(function (e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    var left = e.pageX - rect.left;
+    var mTime = left / rect.width * duration;
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        left: left,
+        markTime: begin + mTime * 1000
+      });
+    });
+  }, [begin]);
+  var onLineMouseOut = useCallback(function (e) {
+    startTransition(function () {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          left: -1
+        });
+      });
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "player-timeline-layout frontend-player-timeline-layout ".concat(status === 0 ? 'hide-time-line' : ''),
+    onClick: seekWithLine,
+    onMouseMove: onLineMouseOver,
+    onMouseOut: onLineMouseOut
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "current-line",
+    style: {
+      width: "".concat(playPercent, "%")
+    }
+  }), /*#__PURE__*/React.createElement(TipTitle, {
+    end: end,
+    begin: begin,
+    left: state.left,
+    current: cTime,
+    markTime: state.markTime
+  }), state.left !== -1 && /*#__PURE__*/React.createElement("span", {
+    className: "frontend-line-mark",
+    style: {
+      left: state.left
+    }
+  }));
+}
+
+function TipTitle(_ref2) {
+  var end = _ref2.end,
+      begin = _ref2.begin,
+      left = _ref2.left,
+      current = _ref2.current,
+      markTime = _ref2.markTime;
+
+  if (left === -1) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "frontend-line-tip-box",
+    style: {
+      left: left
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600
+    }
+  }, "\u5F55\u50CF\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", null, "\u5F00\u59CB\uFF1A", dateFormat(begin)), /*#__PURE__*/React.createElement("div", null, "\u7ED3\u675F\uFF1A", dateFormat(end)), /*#__PURE__*/React.createElement("div", null, "\u523B\u5EA6\uFF1A", dateFormat(markTime)), /*#__PURE__*/React.createElement("div", null, "\u5F53\u524D\uFF1A", dateFormat(current)));
+}
+
+export default FrontendTimeLine;

package/es/Player/iconfont.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './style/iconfont.less';
+interface IPlayerIconFontProps extends React.AllHTMLAttributes<HTMLLIElement> {
+    type: string;
+    className: string;
+}
+declare function IconFont({ type, className, ...props }: IPlayerIconFontProps): JSX.Element;
+declare namespace IconFont {
+    var defaultProps: {
+        className: string;
+    };
+}
+export default IconFont;

package/es/Player/iconfont.js

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import React from 'react';
+import "./style/iconfont.css";
+
+function IconFont(_a) {
+  var type = _a.type,
+      className = _a.className,
+      props = __rest(_a, ["type", "className"]);
+
+  return /*#__PURE__*/React.createElement("i", Object.assign({
+    className: "lm-player-iconfont ".concat(type, " ").concat(className)
+  }, props));
+}
+
+IconFont.defaultProps = {
+  className: ''
+};
+export default IconFont;

package/es/Player/index.d.ts

@@ -0,0 +1,8 @@
+import SegmentPlayer from './segment_player';
+import FrontendPlayer from './frontend_player';
+declare const _default: {
+    SinglePlayer: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./player").ISinglePlayerProps & import("react").RefAttributes<import("./player").ExportPlayerType>>>;
+    FrontendPlayer: typeof FrontendPlayer;
+    SegmentPlayer: typeof SegmentPlayer;
+};
+export default _default;

package/es/Player/index.js

@@ -0,0 +1,8 @@
+import SinglePlayer from './single_player';
+import SegmentPlayer from './segment_player';
+import FrontendPlayer from './frontend_player';
+export default {
+  SinglePlayer: SinglePlayer,
+  FrontendPlayer: FrontendPlayer,
+  SegmentPlayer: SegmentPlayer
+};

package/es/Player/live_heart.d.ts

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

package/es/Player/live_heart.js

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import BrowserTab from './event/browserTabEvent';
+
+function LiveHeart(_ref) {
+  var api = _ref.api;
+  useEffect(function () {
+    var browserTabChange = function browserTabChange() {
+      if (BrowserTab.visibilityState() !== 'visible') {
+        return;
+      }
+
+      var current = api.getCurrentTime();
+      var buffered = api.getSecondsLoaded();
+
+      if (buffered - current > 5) {
+        console.warn("\u5F53\u524D\u5EF6\u65F6\u8FC7\u5927current->".concat(current, " buffered->").concat(buffered, ", \u57FA\u4E8E\u89C6\u9891\u5F53\u524D\u7F13\u5B58\u65F6\u95F4\u66F4\u65B0\u5F53\u524D\u64AD\u653E\u65F6\u95F4 updateTime -> ").concat(buffered - 2));
+        api.seekTo(buffered - 2 > 0 ? buffered - 2 : 0);
+      }
+    };
+
+    BrowserTab.addEventListener(browserTabChange);
+    return function () {
+      BrowserTab.removeEventListener(browserTabChange);
+    };
+  }, [api]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+export default LiveHeart;

package/es/Player/message.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import Api from './api';
+import VideoEventInstance from './event';
+import './style/message.less';
+interface IVideoMessageProps {
+    event: VideoEventInstance;
+    api: Api;
+}
+declare function VideoMessage({ event, api }: IVideoMessageProps): JSX.Element;
+export declare const NoSource: () => JSX.Element;
+export default VideoMessage;