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

package/es/Player/single_player.js

@@ -0,0 +1,185 @@
+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, { useEffect, useMemo, useRef, useState, useImperativeHandle } from 'react';
+import { usePlayerApi } from './api';
+import { usePlayerEvent, useRegisterPlayerEvents, useVideoEvents } from './event';
+import ContrallerBar from './contraller_bar';
+import ContrallerEvent from './contraller_bar/contraller_event';
+import LiveHeart from './live_heart';
+import VideoMessage from './message';
+import ErrorEvent from './event/errorEvent';
+import { getVideoType, playReload, playUnload } from './util';
+import Timeline from './timeline';
+import "./style/index.css";
+var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+
+  var className = _a.className,
+      url = _a.url,
+      type = _a.type,
+      hideContrallerBar = _a.hideContrallerBar,
+      isLive = _a.isLive,
+      errorReloadTimer = _a.errorReloadTimer,
+      children = _a.children,
+      props = __rest(_a, ["className", "url", "type", "hideContrallerBar", "isLive", "errorReloadTimer", "children"]);
+
+  var autoPlay = props.autoPlay,
+      preload = props.preload,
+      muted = props.muted,
+      poster = props.poster,
+      playsInline = props.playsInline,
+      loop = props.loop;
+  var rightExtContents = props.rightExtContents,
+      rightMidExtContents = props.rightMidExtContents,
+      leftExtContents = props.leftExtContents,
+      leftMidExtContents = props.leftMidExtContents,
+      customTimeLine = props.customTimeLine;
+  var flvConfig = props.flvConfig,
+      hlsConfig = props.hlsConfig,
+      videoEvents = props.videoEvents,
+      playerEvents = props.playerEvents;
+
+  var _useState = useState({
+    container: null
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var vType = useMemo(function () {
+    return type || getVideoType(url);
+  }, [url]);
+  var domRef = useRef(null);
+  var video = useMemo(function () {
+    return state.container ? state.container.querySelector('video') : undefined;
+  }, [state.container]); // 生成事件对象
+
+  var event = usePlayerEvent(video); // 注册外部自定义事件
+
+  useVideoEvents(event, videoEvents);
+  useRegisterPlayerEvents(event, playerEvents);
+
+  var _usePlayerApi = usePlayerApi(url, vType, isLive, state.container, flvConfig.mediaDataSource.segments, flvConfig, hlsConfig),
+      _usePlayerApi2 = _slicedToArray(_usePlayerApi, 2),
+      api = _usePlayerApi2[0],
+      _usePlayerApi2$ = _slicedToArray(_usePlayerApi2[1], 3),
+      _ = _usePlayerApi2$[0],
+      flv = _usePlayerApi2$[1],
+      hls = _usePlayerApi2$[2]; // 判断是否有链接传入
+
+
+  var hasLink = useMemo(function () {
+    return !!url || !!flvConfig.mediaDataSource.segments && vType === 'flv';
+  }, [url, flvConfig.mediaDataSource.segments]); // 存储容器
+
+  useEffect(function () {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        container: domRef.current
+      });
+    });
+  }, []); // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
+
+  var reload = function reload() {
+    return playReload(video, flv, hls, url);
+  };
+
+  var unload = function unload() {
+    return playUnload(video, flv, hls);
+  }; // 合并api
+
+
+  var playApi = useMemo(function () {
+    return Object.assign(Object.assign({}, api), {
+      reload: reload,
+      unload: unload
+    });
+  }, [api]); // ref暴露接口
+
+  useImperativeHandle(ref, function () {
+    return {
+      video: video,
+      container: state.container,
+      api: playApi,
+      event: event,
+      plugins: [flv, hls]
+    };
+  }, [api, event, video]);
+  useEffect(function () {
+    if (api && event && video) {
+      props.onCanPlayerInit && props.onCanPlayerInit();
+    }
+  }, [api, event, video]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm-player-container ".concat(className),
+    ref: domRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-mask-layout"
+  }, /*#__PURE__*/React.createElement("video", {
+    autoPlay: autoPlay,
+    preload: preload,
+    muted: muted,
+    poster: poster,
+    controls: false,
+    playsInline: playsInline,
+    loop: loop
+  })), api && event && hasLink && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VideoMessage, {
+    api: playApi,
+    event: event
+  }), !hideContrallerBar && /*#__PURE__*/React.createElement(ContrallerEvent, {
+    event: event,
+    container: state.container
+  }, /*#__PURE__*/React.createElement(ContrallerBar, {
+    api: playApi,
+    event: event,
+    isLive: isLive,
+    container: state.container,
+    rightExtContents: rightExtContents,
+    rightMidExtContents: rightMidExtContents,
+    leftExtContents: leftExtContents,
+    leftMidExtContents: leftMidExtContents,
+    reload: (_b = props.reload) !== null && _b !== void 0 ? _b : reload,
+    hideTimeProgress: !!customTimeLine
+  })), !isLive ? customTimeLine ? customTimeLine : /*#__PURE__*/React.createElement(Timeline, {
+    api: playApi,
+    event: event
+  }) : null, /*#__PURE__*/React.createElement(ErrorEvent, {
+    unload: unload,
+    flv: flv,
+    hls: hls,
+    api: playApi,
+    event: event,
+    reload: reload,
+    errorReloadTimer: errorReloadTimer
+  }), isLive && /*#__PURE__*/React.createElement(LiveHeart, {
+    api: playApi
+  })), children);
+});
+SinglePlayer.defaultProps = {
+  isLive: true,
+  errorReloadTimer: 5,
+  muted: true,
+  autoPlay: true,
+  playsInline: false,
+  preload: 'auto',
+  loop: false,
+  hideContrallerBar: false,
+  className: '',
+  flvConfig: {
+    mediaDataSource: {},
+    config: {}
+  },
+  hlsConfig: {}
+};
+export default /*#__PURE__*/React.memo(SinglePlayer);

package/es/Player/style/bar.css

@@ -0,0 +1,37 @@
+.contraller-bar-layout {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: rgba(29, 33, 53, 0.8);
+  height: 28px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  z-index: 10;
+  justify-content: space-between;
+  opacity: 1;
+  transition: opacity 0.3s;
+}
+.contraller-bar-layout.hide-contraller-bar {
+  opacity: 0;
+}
+.contraller-bar-layout .contraller-bar-item {
+  float: left;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  justify-content: center;
+  align-items: center;
+}
+.contraller-bar-layout .contraller-bar-item .lm-player-iconfont {
+  cursor: pointer;
+}
+.contraller-bar-layout .contraller-bar-item .lm-player-iconfont:hover {
+  color: #ffaa00;
+}
+.contraller-bar-layout .video-time-progress {
+  float: left;
+  line-height: 28px;
+  color: #fff;
+  font-size: 10px;
+}

package/es/Player/style/iconfont.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'lm-player-iconfont';
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
+}
+.lm-player-iconfont {
+  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-volume-close:before {
+  content: '\e602';
+}
+.lm-player-volume-normal-fuben:before {
+  content: '\e604';
+}
+.lm-player-volume-max:before {
+  content: '\e605';
+}
+.lm-player-Pause_Main:before {
+  content: '\e652';
+}
+.lm-player-Play_Main:before {
+  content: '\e654';
+}
+.lm-player-ZoomIn_Main:before {
+  content: '\e663';
+}
+.lm-player-ZoomDefault_Main:before {
+  content: '\e664';
+}
+.lm-player-ZoomOut_Main:before {
+  content: '\e665';
+}
+.lm-player-Refresh_Main:before {
+  content: '\e687';
+}
+.lm-player-ExitFull_Main:before {
+  content: '\e68e';
+}
+.lm-player-Full_Main:before {
+  content: '\e690';
+}
+.lm-player-PlaySource:before {
+  content: '\e6cd';
+}
+.lm-player-YesorNo_No_Dark:before {
+  content: '\e6dd';
+}
+.lm-player-SearchBox:before {
+  content: '\e706';
+}
+.lm-player-PrevFast:before {
+  content: '\e71f';
+}
+.lm-player-NextFast_Light:before {
+  content: '\e720';
+}

package/es/Player/style/index.css

@@ -0,0 +1,22 @@
+.lm-player-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #000;
+  box-sizing: border-box;
+}
+.lm-player-container .lm-player-iconfont {
+  color: #fff;
+}
+.lm-player-container .player-mask-layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.lm-player-container .player-mask-layout > video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: #000;
+}

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;