@cloud-app-dev/vidc 3.2.17 → 3.2.18

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);
   }
 }

package/es/Player/style/slider.less

@@ -1,75 +1,78 @@
 .slider-layout {
+  position: relative;
+  display: flex;
   width: 100%;
   height: 100%;
   user-select: none;
-  display: flex;
   justify-content: center;
   align-items: center;
-  position: relative;
+
   .slider-content {
+    position: relative;
     width: 100%;
     height: 2px;
-    position: relative;
-    transition: height 0.2s;
-    cursor: pointer;
     overflow: hidden;
+    cursor: pointer;
+    transition: height .2s;
   }
+
   .slider-other-content {
-    width: 100%;
-    height: 2px;
     position: absolute;
-    left: 0;
     top: 50%;
-    transform: translateY(-50%);
-    transition: height 0.2s;
-    cursor: pointer;
+    left: 0;
     z-index: 9;
+    width: 100%;
+    height: 2px;
     pointer-events: none;
+    cursor: pointer;
+    transform: translateY(-50%);
+    transition: height .2s;
   }
 
   .slider-max-line {
-    width: 100%;
-    height: 100%;
-    background-color: #000;
     position: absolute;
-    left: 0;
     top: 0;
+    left: 0;
     z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
     border-radius: 4px;
   }
+
   .slider-visibel-line {
     position: absolute;
-    height: 100%;
-    background: #5b7eac;
-    width: 100%;
-    height: 100%;
-    left: 0;
     top: 0;
+    left: 0;
     z-index: 3;
+    width: 100%;
+    height: 100%;
     cursor: pointer;
+    background: #5b7eac;
     border-radius: 4px;
   }
+
   .slider-current-line {
     position: absolute;
-    height: 100%;
-    background-color: #ffaa00;
-    width: 100%;
-    height: 100%;
-    left: 0;
     top: 0;
+    left: 0;
     z-index: 3;
+    width: 100%;
+    height: 100%;
+    background-color: #fa0;
     border-radius: 4px;
   }
+
   .drag-change-icon {
     position: absolute;
+    top: -3px;
     width: 6px;
     height: 6px;
-    border-radius: 50%;
     margin-left: -3px;
-    border: 1px solid #fff;
-    background-color: #ffaa00;
-    top: -3px;
     pointer-events: all;
+    background-color: #fa0;
+    border: 1px solid #fff;
+    border-radius: 50%;
     box-sizing: content-box;
   }
   
@@ -78,26 +81,26 @@
     .slider-other-content {
       height: 4px;
     }
+
     .drag-change-icon {
+      top: -4px;
       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%);
+  left: 0;
+  z-index: 99;
+  padding: 2px 4px;
   font-size: 12px;
   color: #fff;
-  border-radius: 4px;
-  z-index: 6;
-  padding: 2px 4px;
   white-space: nowrap;
-  z-index: 99;
+  background: rgb(0 0 0 / 60%);
+  border-radius: 4px;
+  transform: translate(-50%,-100%);
 }