@cloud-app-dev/vidc 3.2.16 → 3.2.18

package/es/Player/message.js

@@ -16,11 +16,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useMemo, useRef, useContext } from 'react';
-import IconFont from "./iconfont";
+import React, { useContext, useMemo, useRef, useState } from 'react';
+import { Context } from "./context";
 import { useRegisterPlayerEvent, useVideoEvent } from "./event";
 import EventName from "./event/eventName";
-import { Context } from "./context";
+import IconFont from "./iconfont";
 import "./style/message.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,7 +38,7 @@ function VideoMessage() {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var timeRef = useRef(null);
+  var timeRef = useRef();
   var message = useMemo(function () {
     if (state.status === 'fail') {
       console.warn("\u89C6\u9891\u9519\u8BEF\uFF0C\u8BF7\u624B\u52A8\u5237\u65B0\u91CD\u8BD5\uFF01");
@@ -117,7 +117,7 @@ function VideoMessage() {
         loading: false
       });
     });
-    api.pause();
+    api === null || api === void 0 ? void 0 : api.pause();
   };
 
   useVideoEvent('loadstart', openLoading);

package/es/Player/segment_player.js

@@ -25,10 +25,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import SinglePlayer from "./single_player";
-import SegmentTimeLine from "./segment_timeline";
-import Events from "./event/eventName";
 import { useRegisterPlayerEvent, useVideoEvent } from "./event";
+import Events from "./event/eventName";
+import SegmentTimeLine from "./segment_timeline";
+import SinglePlayer from "./single_player";
 /**
  * @desc 计算第一个url
  * @param segments
@@ -62,17 +62,15 @@ function getFirstUrlIndex(segments) {
  * @desc 片段索引控制
  * @param event
  * @param segments
- * @param deps
  * @returns
  */
 
 
 function usePlayIndex(event, segments) {
   var defaultIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var deps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
 
   var _useState = useState({
-    index: getFirstUrlIndex(segments, defaultIndex)
+    index: getFirstUrlIndex(segments !== null && segments !== void 0 ? segments : [], defaultIndex)
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
@@ -80,7 +78,7 @@ function usePlayIndex(event, segments) {
 
 
   useEffect(function () {
-    var index = getFirstUrlIndex(segments, 0);
+    var index = getFirstUrlIndex(segments !== null && segments !== void 0 ? segments : [], 0);
     setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
         index: index
@@ -89,9 +87,9 @@ function usePlayIndex(event, segments) {
   }, [segments]); // 索引不存在播放地址，自动跳转下一段
 
   useEffect(function () {
-    var _segments$state$index;
+    var _segments$state$index, _segments$length;
 
-    if (!((_segments$state$index = segments[state.index]) !== null && _segments$state$index !== void 0 && _segments$state$index.url) && state.index < segments.length - 1) {
+    if (!(segments !== null && segments !== void 0 && (_segments$state$index = segments[state.index]) !== null && _segments$state$index !== void 0 && _segments$state$index.url) && state.index < ((_segments$length = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _segments$length !== void 0 ? _segments$length : 0) - 1) {
       setState(function (old) {
         return _objectSpread(_objectSpread({}, old), {}, {
           index: old.index + 1
@@ -102,8 +100,10 @@ function usePlayIndex(event, segments) {
 
   var endHandle = function endHandle() {
     return setState(function (old) {
+      var _segments$length2;
+
       return _objectSpread(_objectSpread({}, old), {}, {
-        index: old.index + 1 < segments.length ? old.index + 1 : old.index
+        index: old.index + 1 < ((_segments$length2 = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _segments$length2 !== void 0 ? _segments$length2 : 0) ? old.index + 1 : old.index
       });
     });
   };
@@ -163,16 +163,16 @@ function SegmentPlayer(_ref) {
     }, 0);
   }, [segments]);
 
-  var _usePlayIndex = usePlayIndex(event, segments, defaultIndex, [segments, defaultIndex]),
+  var _usePlayIndex = usePlayIndex(event, segments, defaultIndex),
       index = _usePlayIndex.index,
       setIndex = _usePlayIndex.setIndex;
 
   var url = useMemo(function () {
-    return segments[index] ? segments[index].url : undefined;
+    return segments !== null && segments !== void 0 && segments[index] ? segments[index].url : undefined;
   }, [segments, index]); // 重置reload
 
   var reload = function reload() {
-    var _playRef$current$plug, _playRef$current;
+    var _playRef$current$plug, _playRef$current, _playRef$current2, _playRef$current3, _playRef$current4;
 
     var _ref3 = (_playRef$current$plug = (_playRef$current = playRef.current) === null || _playRef$current === void 0 ? void 0 : _playRef$current.plugins) !== null && _playRef$current$plug !== void 0 ? _playRef$current$plug : [],
         _ref4 = _slicedToArray(_ref3, 2),
@@ -183,17 +183,18 @@ function SegmentPlayer(_ref) {
       hls.recoverMediaError();
     }
 
-    playRef.current.event.emit(Events.RELOAD);
-    playRef.current.event.emit(Events.CLEAR_ERROR_TIMER);
+    (_playRef$current2 = playRef.current) === null || _playRef$current2 === void 0 ? void 0 : _playRef$current2.event.emit(Events.RELOAD);
+    (_playRef$current3 = playRef.current) === null || _playRef$current3 === void 0 ? void 0 : _playRef$current3.event.emit(Events.CLEAR_ERROR_TIMER);
     setIndex(0);
-    playRef.current.api.reload();
+    (_playRef$current4 = playRef.current) === null || _playRef$current4 === void 0 ? void 0 : _playRef$current4.api.reload();
   }; // time 毫秒的时间戳
 
 
   var seekTo = function seekTo(time) {
-    var _playRef$current$plug2, _playRef$current2;
+    var _latestSegmentsRef$cu, _playRef$current$plug2, _playRef$current5, _cSegments$index;
 
-    var index = latestSegmentsRef.current.findIndex(function (v) {
+    var cSegments = (_latestSegmentsRef$cu = latestSegmentsRef.current) !== null && _latestSegmentsRef$cu !== void 0 ? _latestSegmentsRef$cu : [];
+    var index = cSegments.findIndex(function (v) {
       return time >= v.beginTime && time < v.endTime;
     });
 
@@ -201,7 +202,7 @@ function SegmentPlayer(_ref) {
       return;
     }
 
-    var _ref5 = (_playRef$current$plug2 = (_playRef$current2 = playRef.current) === null || _playRef$current2 === void 0 ? void 0 : _playRef$current2.plugins) !== null && _playRef$current$plug2 !== void 0 ? _playRef$current$plug2 : [],
+    var _ref5 = (_playRef$current$plug2 = (_playRef$current5 = playRef.current) === null || _playRef$current5 === void 0 ? void 0 : _playRef$current5.plugins) !== null && _playRef$current$plug2 !== void 0 ? _playRef$current$plug2 : [],
         _ref6 = _slicedToArray(_ref5, 2),
         hls = _ref6[1];
 
@@ -210,7 +211,7 @@ function SegmentPlayer(_ref) {
       hls.recoverMediaError();
     }
 
-    var currentTime = time - latestSegmentsRef.current[index].beginTime;
+    var currentTime = time - ((_cSegments$index = cSegments[index]) === null || _cSegments$index === void 0 ? void 0 : _cSegments$index.beginTime);
     setIndex(index);
     setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
@@ -221,6 +222,8 @@ function SegmentPlayer(_ref) {
 
 
   useEffect(function () {
+    var _playRef$current6;
+
     if (state.seekTime === 0) {
       return;
     }
@@ -230,15 +233,19 @@ function SegmentPlayer(_ref) {
         seekTime: 0
       });
     });
-    playRef.current.video.currentTime = state.seekTime; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    if ((_playRef$current6 = playRef.current) !== null && _playRef$current6 !== void 0 && _playRef$current6.video) {
+      playRef.current.video.currentTime = state.seekTime;
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [state.seekTime]);
   var hasReady = api && event;
   var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/_jsx(SegmentTimeLine, {
-    begin: begin,
+    begin: begin !== null && begin !== void 0 ? begin : 0,
     seekTo: seekTo,
     index: index,
-    segments: segments,
-    duration: duration
+    segments: segments !== null && segments !== void 0 ? segments : [],
+    duration: duration !== null && duration !== void 0 ? duration : 0
   });
   var onInit = useCallback(function () {
     update();

package/es/Player/segment_timeline.js

@@ -19,21 +19,86 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import moment from 'moment';
 import React, { startTransition, useMemo, useState } from 'react';
-import { useTimes } from "./timeline";
 import useBarStatus from "./contraller_bar/useBarStatus";
-import moment from 'moment';
-import { FMT } from "./util";
 import "./style/timeline.less";
+import { useTimes } from "./timeline";
+import { FMT } from "./util";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
-function SegmentTimeLine(_ref) {
+function TipTitle(_ref) {
   var index = _ref.index,
       segments = _ref.segments,
-      duration = _ref.duration,
       begin = _ref.begin,
-      seekTo = _ref.seekTo;
+      current = _ref.current,
+      markTime = _ref.markTime;
+
+  var _useMemo = useMemo(function () {
+    if (index === 0) {
+      var _start = begin;
+
+      var _end = begin + (segments[0].endTime - segments[0].beginTime);
+
+      return {
+        start: moment(_start).format(FMT),
+        end: moment(_end).format(FMT)
+      };
+    }
+
+    var indexDuration = segments.map(function (v) {
+      return v.endTime - v.beginTime;
+    }).reduce(function (a, b, i) {
+      return i >= index ? a : a + b;
+    }, 0);
+    var start = begin + indexDuration;
+    var end = start + (segments[index].endTime - segments[index].beginTime);
+    return {
+      start: moment(start).format(FMT),
+      end: moment(end).format(FMT)
+    };
+  }, [index, segments, begin]),
+      start = _useMemo.start,
+      end = _useMemo.end;
+
+  var hasUrl = useMemo(function () {
+    var _segments$index;
+
+    return (_segments$index = segments[index]) !== null && _segments$index !== void 0 && _segments$index.url ? true : false;
+  }, [index, segments]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "segment-line-tip-box",
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        fontWeight: 600
+      },
+      children: "\u5F55\u50CF\u7247\u6BB5\u4FE1\u606F"
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u5F00\u59CB\uFF1A", start]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u7ED3\u675F\uFF1A", end]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u5F53\u524D\uFF1A", moment(current).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u72B6\u6001\uFF1A", /*#__PURE__*/_jsx("span", {
+        style: {
+          color: hasUrl ? 'green' : 'red'
+        },
+        children: hasUrl ? '正常' : '缺失'
+      })]
+    })]
+  });
+}
+
+function SegmentTimeLine(_ref2) {
+  var index = _ref2.index,
+      segments = _ref2.segments,
+      duration = _ref2.duration,
+      begin = _ref2.begin,
+      seekTo = _ref2.seekTo;
 
   var _useState = useState({
     time: 0,
@@ -148,69 +213,4 @@ function SegmentTimeLine(_ref) {
   });
 }
 
-function TipTitle(_ref2) {
-  var index = _ref2.index,
-      segments = _ref2.segments,
-      begin = _ref2.begin,
-      current = _ref2.current,
-      markTime = _ref2.markTime;
-
-  var _useMemo = useMemo(function () {
-    if (index === 0) {
-      var _start = begin;
-
-      var _end = begin + (segments[0].endTime - segments[0].beginTime);
-
-      return {
-        start: moment(_start).format(FMT),
-        end: moment(_end).format(FMT)
-      };
-    }
-
-    var indexDuration = segments.map(function (v) {
-      return v.endTime - v.beginTime;
-    }).reduce(function (a, b, i) {
-      return i >= index ? a : a + b;
-    }, 0);
-    var start = begin + indexDuration;
-    var end = start + (segments[index].endTime - segments[index].beginTime);
-    return {
-      start: moment(start).format(FMT),
-      end: moment(end).format(FMT)
-    };
-  }, [index, segments, begin]),
-      start = _useMemo.start,
-      end = _useMemo.end;
-
-  var hasUrl = useMemo(function () {
-    var _segments$index;
-
-    return (_segments$index = segments[index]) !== null && _segments$index !== void 0 && _segments$index.url ? true : false;
-  }, [index, segments]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "segment-line-tip-box",
-    children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        fontWeight: 600
-      },
-      children: "\u5F55\u50CF\u7247\u6BB5\u4FE1\u606F"
-    }), /*#__PURE__*/_jsxs("div", {
-      children: ["\u5F00\u59CB\uFF1A", start]
-    }), /*#__PURE__*/_jsxs("div", {
-      children: ["\u7ED3\u675F\uFF1A", end]
-    }), /*#__PURE__*/_jsxs("div", {
-      children: ["\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)]
-    }), /*#__PURE__*/_jsxs("div", {
-      children: ["\u5F53\u524D\uFF1A", moment(current).format(FMT)]
-    }), /*#__PURE__*/_jsxs("div", {
-      children: ["\u72B6\u6001\uFF1A", /*#__PURE__*/_jsx("span", {
-        style: {
-          color: hasUrl ? 'green' : 'red'
-        },
-        children: hasUrl ? '正常' : '缺失'
-      })]
-    })]
-  });
-}
-
 export default SegmentTimeLine;

package/es/Player/single_player.js

@@ -25,23 +25,23 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useEffect, useMemo, useRef, useState, useImperativeHandle } from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { usePlayerApi } from "./api";
-import { usePlayerEvent, useRegisterPlayerEvents, useVideoEvents } from "./event";
-import EventName from "./event/eventName";
+import { Provider } from "./context";
 import ContrallerBar from "./contraller_bar";
 import ContrallerEvent from "./contraller_bar/contraller_event";
+import Empty from "./empty";
+import { usePlayerEvent, useRegisterPlayerEvents, useVideoEvents } from "./event";
+import useErrorEvent from "./event/errorEvent";
+import EventName from "./event/eventName";
+import FPSPlay from "./fps_play";
 import useLiveHeart from "./live_heart";
 import VideoMessage from "./message";
-import useErrorEvent from "./event/errorEvent";
-import { getVideoType, playReload, playUnload } from "./util";
 import Timeline from "./timeline";
-import FPSPlay from "./fps_play";
-import { Provider } from "./context";
+import { getVideoType, playReload, playUnload } from "./util";
 import "./style/index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _props$reload;
 
@@ -76,7 +76,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       fps = props.fps;
 
   var _useState = useState({
-    container: null,
+    container: undefined,
     isFpsPlay: false
   }),
       _useState2 = _slicedToArray(_useState, 2),
@@ -94,7 +94,9 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [url, type]);
   var domRef = useRef(null);
   var video = useMemo(function () {
-    return state.container ? state.container.querySelector('video') : undefined;
+    var _state$container$quer;
+
+    return state.container ? (_state$container$quer = state.container.querySelector('video')) !== null && _state$container$quer !== void 0 ? _state$container$quer : undefined : undefined;
   }, [state.container]); // 生成事件对象
 
   var event = usePlayerEvent(video); // 注册外部自定义事件
@@ -102,7 +104,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useVideoEvents(event, videoEvents);
   useRegisterPlayerEvents(event, playerEvents);
 
-  var _usePlayerApi = usePlayerApi(url, vType, isLive, state.container, flvConfig.mediaDataSource.segments, flvConfig, hlsConfig),
+  var _usePlayerApi = usePlayerApi(url, vType, isLive, state.container, flvConfig === null || flvConfig === void 0 ? void 0 : flvConfig.mediaDataSource.segments, flvConfig, hlsConfig),
       _usePlayerApi2 = _slicedToArray(_usePlayerApi, 2),
       api = _usePlayerApi2[0],
       _usePlayerApi2$ = _slicedToArray(_usePlayerApi2[1], 3),
@@ -111,8 +113,8 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 
   var hasLink = useMemo(function () {
-    return !!url || !!flvConfig.mediaDataSource.segments && vType === 'flv';
-  }, [url, flvConfig.mediaDataSource.segments, vType]);
+    return !!url || !!(flvConfig !== null && flvConfig !== void 0 && flvConfig.mediaDataSource.segments) && vType === 'flv';
+  }, [url, flvConfig === null || flvConfig === void 0 ? void 0 : flvConfig.mediaDataSource.segments, vType]);
 
   var hlsRef = _useLatest(hls);
 
@@ -145,7 +147,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         isFpsPlay: true
       });
     });
-    api.pause();
+    api === null || api === void 0 ? void 0 : api.pause();
   };
 
   var closeFpsPlay = function closeFpsPlay() {
@@ -154,7 +156,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         isFpsPlay: false
       });
     });
-    api.play();
+    api === null || api === void 0 ? void 0 : api.play();
   }; // 合并api,加上代理
 
 
@@ -219,7 +221,6 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     unload: unload,
     flv: flvRef.current,
     hls: hlsRef.current,
-    api: playApi,
     event: event,
     reload: reload,
     errorReloadTimer: errorReloadTimer
@@ -277,11 +278,6 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     })
   });
 });
-
-function Empty() {
-  return /*#__PURE__*/_jsx(_Fragment, {});
-}
-
 SinglePlayer.defaultProps = {
   isLive: true,
   errorReloadTimer: 5,

package/es/Player/style/bar.less

@@ -2,21 +2,23 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  background: rgba(29, 33, 53, 0.8);
-  height: 28px;
-  width: 100%;
+  z-index: 10;
   display: flex;
+  width: 100%;
+  height: 28px;
+  background: rgb(29 33 53 / 80%);
+  opacity: 1;
   align-items: center;
-  z-index: 10;
   justify-content: space-between;
-  opacity: 1;
-  transition: opacity 0.3s;
+  transition: opacity .3s;
+
   &.hide-contraller-bar {
     opacity: 0;
   }
+
   .contraller-bar-item {
-    float: left;
     display: flex;
+    float: left;
     width: 28px;
     height: 28px;
     justify-content: center;
@@ -24,16 +26,18 @@
 
     .lm-player-iconfont {
       cursor: pointer;
+
       &:hover {
         color: var(--primary);
       }
     }
   }
+
   .video-time-progress {
     float: left;
+    padding: 0 6px;
+    font-size: 10px;
     line-height: 28px;
     color: #fff;
-    font-size: 10px;
-    padding: 0 6px;
   }
 }

package/es/Player/style/index.less

@@ -1,24 +1,28 @@
 .lm-player-container {
+  position: relative;
   width: 100%;
   height: 100%;
-  position: relative;
   background: #000;
   box-sizing: border-box;
+
   .lm-player-iconfont {
     color: #fff;
   }
+
   .fps-play-canvas {
-    width: 100%;
-    height: 100%;
     position: absolute;
-    left: 0;
     top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     background-color: #000;
   }
+
   .player-mask-layout {
     width: 100%;
     height: 100%;
     overflow: hidden;
+
     & > video {
       display: block;
       width: 100%;

package/es/Player/style/message.less

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