@cloud-app-dev/vidc 4.0.15 → 4.1.0

package/es/Player/live_heart.js

@@ -1,13 +1,12 @@
-import _useRafInterval from "ahooks/es/useRafInterval";
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
-import _useDocumentVisibility from "ahooks/es/useDocumentVisibility";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useDocumentVisibility, useRafInterval, useUpdateEffect } from 'ahooks';
 import { useRef } from 'react';
 import Events from "./event/eventName";
 function useLiveHeart(_ref) {
   var api = _ref.api,
     event = _ref.event,
     isLive = _ref.isLive;
-  var documentVisibility = _useDocumentVisibility();
+  var documentVisibility = useDocumentVisibility();
   var cTimeRef = useRef(0);
   var run = function run() {
     var _api$getCurrentTime;
@@ -22,24 +21,24 @@ function useLiveHeart(_ref) {
       api.play();
     }
   };
-  _useUpdateEffect(function () {
+  useUpdateEffect(function () {
     return run();
   }, [documentVisibility]);
-  _useRafInterval(function () {
+  useRafInterval(function () {
     var _api$getCurrentTime2;
     return cTimeRef.current = (_api$getCurrentTime2 = api === null || api === void 0 ? void 0 : api.getCurrentTime()) !== null && _api$getCurrentTime2 !== void 0 ? _api$getCurrentTime2 : 0;
   }, 1 * 1000);
-  _useRafInterval(function () {
+  useRafInterval(function () {
     return run();
   }, 30 * 1000);
-  _useRafInterval(function () {
+  useRafInterval(function () {
     var _api$video;
     if (!api || !event) {
       return;
     }
     var cuurentTime = api.getCurrentTime();
     if (!!isLive && !((_api$video = api.video) !== null && _api$video !== void 0 && _api$video.paused) && cuurentTime === cTimeRef.current) {
-      event.emit(Events.ERROR);
+      event.emit(Events.ERROR, 'long time no play！');
     }
   }, 20 * 1000);
 }

package/es/Player/message.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import './style/message.less';
-declare function VideoMessage(): JSX.Element;
-export declare const NoSource: () => JSX.Element;
+declare function VideoMessage(): import("react/jsx-runtime").JSX.Element;
+export declare const NoSource: () => import("react/jsx-runtime").JSX.Element;
 export default VideoMessage;

package/es/Player/message.js

@@ -1,4 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,14 +11,22 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useContext, useMemo, useRef, useState } from 'react';
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, keyframes } from '@emotion/css';
+import { useContext, useMemo, useRef, useState } from 'react';
 import { Context } from "./context";
 import { useRegisterPlayerEvent, useVideoEvent } from "./event";
 import EventName from "./event/eventName";
 import IconFont from "./iconfont";
-import "./style/message.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var lmPlayerMessageMaskCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: -1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  background: transparent;\n  opacity: 0;\n  transition: all 0.5s;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"])));
+var lmPlayerLoadingIconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: -1;\n  font-size: 48px;\n  visibility: hidden;\n"])));
+var lmPlayerMaskLoadingAnimationCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 1;\n  background: rgb(0 0 0 / 60%);\n  opacity: 1;\n"])));
+var loadingAnimationFrames = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var lmPlayerLoadingAnimationCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  z-index: 9;\n  visibility: visible;\n  animation: ", " 1s linear infinite;\n"])), loadingAnimationFrames);
+var lmPlayerLoadfailCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  z-index: 9;\n  visibility: visible;\n"])));
+var lmPlayerMessageCss = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 10px;\n  font-size: 16px;\n  color: #fff;\n"])));
 function VideoMessage() {
   var _useContext = useContext(Context),
     api = _useContext.api;
@@ -33,7 +42,7 @@ function VideoMessage() {
   var message = useMemo(function () {
     if (state.status === 'fail') {
       console.warn("\u89C6\u9891\u9519\u8BEF\uFF0C\u8BF7\u624B\u52A8\u5237\u65B0\u91CD\u8BD5\uFF01");
-      return '请稍后重试！';
+      return '请稍后重试';
     }
     if (state.status === 'reload') {
       console.warn("\u7B2C".concat(state.errorTimer, "\u6B21\u91CD\u8FDE"));
@@ -113,19 +122,19 @@ function VideoMessage() {
   var loading = state.loading,
     status = state.status;
   return /*#__PURE__*/_jsxs("div", {
-    className: "lm-player-message-mask ".concat(loading || status === 'fail' ? 'lm-player-mask-loading-animation' : ''),
+    className: "".concat(lmPlayerMessageMaskCss, " ").concat(loading || status === 'fail' ? lmPlayerMaskLoadingAnimationCss : ''),
     children: [/*#__PURE__*/_jsx(IconFont, {
       type: status === 'fail' ? 'lm-player-YesorNo_No_Dark' : 'lm-player-Loading',
-      className: "".concat(loading && status !== 'fail' ? 'lm-player-loading-animation' : status === 'fail' ? 'lm-player-loadfail' : '', " lm-player-loading-icon")
+      className: "".concat(lmPlayerLoadingIconCss, " ").concat(loading && status !== 'fail' ? lmPlayerLoadingAnimationCss : status === 'fail' ? lmPlayerLoadfailCss : '')
     }), /*#__PURE__*/_jsx("span", {
-      className: "lm-player-message",
+      className: lmPlayerMessageCss,
       children: message
     })]
   });
 }
 export var NoSource = function NoSource() {
   return /*#__PURE__*/_jsx("div", {
-    className: "lm-player-message-mask lm-player-mask-loading-animation",
+    className: "".concat(lmPlayerMessageMaskCss, " ").concat(lmPlayerMaskLoadingAnimationCss),
     children: /*#__PURE__*/_jsx(IconFont, {
       style: {
         fontSize: 80

package/es/Player/player.d.ts

@@ -101,11 +101,13 @@ export interface ISinglePlayerProps {
 
   /**
    * 自定义flv参数配置
+   * @type FlvPlayerConfig
    */
   flvConfig?: FlvPlayerConfig;
 
   /**
    * 自定义hls参数配置
+   * @type HlsConfig
    */
   hlsConfig?: HlsConfig;
 

package/es/Player/segment_player.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { ISegmentPlayerProps } from './player';
 /**
  * @desc 主组件，负责片段整体逻辑控制
  * @param param0
  * @returns
  */
-declare function SegmentPlayer({ segments, begin, forwordRef, defaultIndex, onCanPlayerInit, customTimeLine, ...props }: ISegmentPlayerProps): JSX.Element;
+declare function SegmentPlayer({ segments, begin, forwordRef, defaultIndex, onCanPlayerInit, customTimeLine, ...props }: ISegmentPlayerProps): import("react/jsx-runtime").JSX.Element;
 export default SegmentPlayer;

package/es/Player/segment_player.js

@@ -1,6 +1,4 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import _useUpdate from "ahooks/es/useUpdate";
-import _useLatest from "ahooks/es/useLatest";
 var _excluded = ["segments", "begin", "forwordRef", "defaultIndex", "onCanPlayerInit", "customTimeLine"];
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
@@ -15,7 +13,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest, useUpdate } from 'ahooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRegisterPlayerEvent, useVideoEvent } from "./event";
 import Events from "./event/eventName";
 import SegmentTimeLine from "./segment_timeline";
@@ -123,8 +122,8 @@ function SegmentPlayer(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     state = _useState4[0],
     setState = _useState4[1];
-  var latestSegmentsRef = _useLatest(segments);
-  var update = _useUpdate();
+  var latestSegmentsRef = useLatest(segments);
+  var update = useUpdate();
   var ref = useRef(null);
   var playRef = forwordRef ? forwordRef : ref;
   var _ref2 = playRef.current || {},

package/es/Player/segment_timeline.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import type { ISegmentType } from './player';
-import './style/timeline.less';
 interface ITimeLineProps {
     index: number;
     segments: ISegmentType[];
@@ -8,5 +6,5 @@ interface ITimeLineProps {
     begin: number;
     seekTo: (time: number) => void;
 }
-declare function SegmentTimeLine({ index, segments, duration, begin, seekTo }: ITimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ index, segments, duration, begin, seekTo }: ITimeLineProps): import("react/jsx-runtime").JSX.Element;
 export default SegmentTimeLine;

package/es/Player/segment_timeline.js

@@ -1,4 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,15 +11,21 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import { Tooltip } from 'antd';
 import moment from 'dayjs';
 import React, { startTransition, useMemo, useState } from 'react';
 import useBarStatus from "./contraller_bar/useBarStatus";
-import "./style/timeline.less";
-import { useTimes } from "./timeline";
+import { bufferLineCss, currentLineCss, hideTimeLineCss, playerTimelineLayoutCss, useTimes } from "./timeline";
 import { FMT } from "./util";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var segmentLineBoxCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n"])));
+var segmentLineItemCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  background: rgb(0 0 0 / 100%);\n  box-sizing: border-box;\n  &:hover {\n    &::after {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 6;\n      width: 100%;\n      height: 100%;\n      border: 1px solid #fff;\n      content: ' ';\n    }\n  }\n"])));
+var segmentLineItemNoneCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 6;\n  cursor: not-allowed;\n  background: rgb(222 14 14 / 100%);\n"])));
+var segmentLineTipBoxCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  div {\n    padding: 2px 0;\n    margin: 0;\n  }\n"])));
+var segmentLineMarkCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 2px;\n  height: 100%;\n  pointer-events: none;\n  background-color: #fff;\n"])));
 function TipTitle(_ref) {
   var index = _ref.index,
     segments = _ref.segments,
@@ -53,7 +60,7 @@ function TipTitle(_ref) {
     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",
+    className: segmentLineTipBoxCss,
     children: [/*#__PURE__*/_jsx("div", {
       style: {
         fontWeight: 600
@@ -144,11 +151,14 @@ function SegmentTimeLine(_ref2) {
     });
   };
   return /*#__PURE__*/_jsx("div", {
-    className: "player-timeline-layout player-segment-timeline-layout ".concat(status === 0 ? 'hide-time-line' : ''),
+    className: "".concat(playerTimelineLayoutCss, " ").concat(status === 0 ? hideTimeLineCss : ''),
+    style: {
+      background: 'transparent'
+    },
     onMouseMove: onLineMouseOver,
     onMouseOut: onLineMouseOut,
     children: /*#__PURE__*/_jsxs("div", {
-      className: "segment-line-box",
+      className: segmentLineBoxCss,
       children: [segments.map(function (v, i) {
         return /*#__PURE__*/_jsx(Tooltip, {
           title: /*#__PURE__*/_jsx(TipTitle, {
@@ -159,7 +169,7 @@ function SegmentTimeLine(_ref2) {
             markTime: state.markTime
           }),
           children: /*#__PURE__*/_jsx("div", {
-            className: "segment-line-item ".concat(!v.url ? 'segment-line-item-none' : '', " ").concat(i === segments.length - 1 ? 'last-segment-line-item' : ''),
+            className: "".concat(segmentLineItemCss, " ").concat(!v.url ? segmentLineItemNoneCss : ''),
             onClick: function onClick(e) {
               return seekWithLine(e, i);
             },
@@ -169,17 +179,17 @@ function SegmentTimeLine(_ref2) {
           })
         }, "time-line-".concat(i));
       }), /*#__PURE__*/_jsx("div", {
-        className: "buffer-line",
+        className: bufferLineCss,
         style: {
           width: "".concat(bufferedPercent, "%")
         }
       }), /*#__PURE__*/_jsx("div", {
-        className: "current-line",
+        className: currentLineCss,
         style: {
           width: "".concat(playPercent, "%")
         }
       }), state.left !== -1 && /*#__PURE__*/_jsx("span", {
-        className: "segment-line-mark",
+        className: segmentLineMarkCss,
         style: {
           left: state.left
         }

package/es/Player/single_player.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { ExportPlayerType, ISinglePlayerProps } from './player';
-import './style/index.less';
 declare const SinglePlayer: React.ForwardRefExoticComponent<ISinglePlayerProps & React.RefAttributes<ExportPlayerType>>;
 export default SinglePlayer;

package/es/Player/single_player.js

@@ -1,9 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
-import _useMemoizedFn from "ahooks/es/useMemoizedFn";
-import _useLatest from "ahooks/es/useLatest";
-import _useToggle3 from "ahooks/es/useToggle";
 var _excluded = ["className", "url", "type", "hideContrallerBar", "isLive", "errorReloadTimer", "children", "onCanPlayerInit", "extActions"];
+var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -17,6 +14,9 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
+import { useLatest, useMemoizedFn, useToggle, useUpdateEffect } from 'ahooks';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { usePlayerApi } from "./api";
 import { Provider } from "./context";
@@ -31,9 +31,11 @@ import useLiveHeart from "./live_heart";
 import VideoMessage from "./message";
 import Timeline from "./timeline";
 import { createProxy, getVideoType, playUnload } from "./util";
-import "./style/index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var playerContainerCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: #000;\n  box-sizing: border-box;\n  .anticon {\n    color: #fff;\n  }\n"])));
+var playerMaskLayoutCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n"])));
+var videoCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  background: #000;\n"])));
 var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref) {
   var _props$reload;
   var className = _ref.className,
@@ -71,7 +73,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref
     _useState2 = _slicedToArray(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-  var _useToggle = _useToggle3('fill', 'contain'),
+  var _useToggle = useToggle('fill', 'contain'),
     _useToggle2 = _slicedToArray(_useToggle, 2),
     fit = _useToggle2[0],
     toggle = _useToggle2[1].toggle;
@@ -104,8 +106,8 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref
   var hasLink = useMemo(function () {
     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);
-  var flvRef = _useLatest(flv);
+  var hlsRef = useLatest(hls);
+  var flvRef = useLatest(flv);
 
   // 存储容器
   useEffect(function () {
@@ -123,15 +125,15 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref
   }, [url]);
 
   // 特殊接口实现 reload是可能被重写的,但是API只暴露原生的方法
-  var reload = _useMemoizedFn(function () {
+  var reload = useMemoizedFn(function () {
     rePlay();
     // playReload(video, event, flvRef.current, hlsRef.current, url);
   });
 
-  var unload = _useMemoizedFn(function () {
+  var unload = useMemoizedFn(function () {
     return playUnload(video, flvRef.current, hlsRef.current);
   });
-  var openFpsPlay = _useMemoizedFn(function () {
+  var openFpsPlay = useMemoizedFn(function () {
     setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
         isFpsPlay: true
@@ -139,7 +141,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref
     });
     api === null || api === void 0 ? void 0 : api.pause();
   });
-  var closeFpsPlay = _useMemoizedFn(function () {
+  var closeFpsPlay = useMemoizedFn(function () {
     setState(function (old) {
       return _objectSpread(_objectSpread({}, old), {}, {
         isFpsPlay: false
@@ -185,7 +187,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [video, state.container, playApi, playEvent, fit]);
-  _useUpdateEffect(function () {
+  useUpdateEffect(function () {
     return api && event && video ? onCanPlayerInit === null || onCanPlayerInit === void 0 ? void 0 : onCanPlayerInit() : undefined;
   }, [api, event, video]);
 
@@ -231,11 +233,12 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function SinglePlayer(_ref, ref
     isLive: isLive,
     isFpsPlay: state.isFpsPlay,
     children: /*#__PURE__*/_jsxs("div", {
-      className: "lm-player-container ".concat(className),
+      className: "".concat(playerContainerCss, " ").concat(className),
       ref: domRef,
       children: [/*#__PURE__*/_jsxs("div", {
-        className: "player-mask-layout",
+        className: playerMaskLayoutCss,
         children: [/*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({}, videoProps), {}, {
+          className: videoCss,
           style: {
             objectFit: fit,
             visibility: state.isFpsPlay ? 'hidden' : 'unset'

package/es/Player/timeline.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
-import './style/timeline.less';
+export declare const playerTimelineLayoutCss: string;
+export declare const hideTimeLineCss: string;
+export declare const bufferLineCss: string;
+export declare const currentLineCss: string;
 export declare function useTimes(): number[];
-declare function TimeLine(): JSX.Element;
+declare function TimeLine(): import("react/jsx-runtime").JSX.Element;
 export default TimeLine;

package/es/Player/timeline.js

@@ -1,4 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,13 +11,18 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import React, { useContext, useMemo, useState } from 'react';
 import { Context } from "./context";
 import useBarStatus from "./contraller_bar/useBarStatus";
 import { useVideoEvent } from "./event";
-import "./style/timeline.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var playerTimelineLayoutCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 28px;\n  left: 0;\n  z-index: 9;\n  display: flex;\n  width: 100%;\n  height: 12px;\n  cursor: pointer;\n  background: rgb(0 0 0 / 100%);\n  opacity: 0.8;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.1s;\n"])));
+export var hideTimeLineCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  bottom: 0;\n  height: 4px;\n"])));
+export var bufferLineCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  max-width: 100%;\n  pointer-events: none;\n  background-color: rgb(103 103 103);\n"])));
+export var currentLineCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  pointer-events: none;\n  background-color: rgb(70 97 255 / 100%);\n"])));
 export function useTimes() {
   var _useContext = useContext(Context),
     api = _useContext.api,
@@ -80,15 +86,15 @@ function TimeLine() {
     api === null || api === void 0 ? void 0 : api.seekTo(cTime);
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "player-timeline-layout ".concat(status === 0 ? 'hide-time-line' : ''),
+    className: "".concat(playerTimelineLayoutCss, " ").concat(status === 0 ? hideTimeLineCss : ''),
     onClick: seekWithLine,
     children: [/*#__PURE__*/_jsx("div", {
-      className: "buffer-line",
+      className: bufferLineCss,
       style: {
         width: "".concat(bufferedPercent, "%")
       }
     }), /*#__PURE__*/_jsx("div", {
-      className: "current-line",
+      className: currentLineCss,
       style: {
         width: "".concat(playPercent, "%")
       }

package/es/Player/util.d.ts

@@ -4,8 +4,8 @@ import type VideoEventInstance from './event';
 import type { FlvPlayerConfig } from './player';
 /**
  * 创建HLS对象
- * @param {*} video
- * @param {*} URL
+ * @param {HTMLVideoElement} video
+ * @param {string} url
  */
 export declare function createHlsPlayer(video: HTMLVideoElement, url?: string, isLive?: boolean, hlsConfig?: HlsConfig): Hls | undefined;
 /**

package/es/Player/util.js

@@ -13,8 +13,8 @@ import { likeGo } from "../utils";
 import Events from "./event/eventName";
 /**
  * 创建HLS对象
- * @param {*} video
- * @param {*} URL
+ * @param {HTMLVideoElement} video
+ * @param {string} url
  */
 export function createHlsPlayer(video, url, isLive, hlsConfig) {
   if (!Hls.isSupported() || !url) {

package/es/PlayerExt/demo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const App: () => JSX.Element;
+declare const App: () => import("react/jsx-runtime").JSX.Element;
 export default App;

package/es/PlayerExt/demo.js

@@ -10,8 +10,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, ConfigProvider, Input, Select } from 'antd';
 import React, { useState } from 'react';
-import { Button, ConfigProvider, Select, Input } from 'antd';
 import Player from "../Player/single_player";
 import ExtModel from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -122,7 +122,7 @@ function Demo() {
           width: 60,
           height: 32
         },
-        onClick: function onClick(e) {
+        onClick: function onClick() {
           return setState(function (old) {
             return _objectSpread(_objectSpread({}, old), {}, {
               url: ''
@@ -135,7 +135,7 @@ function Demo() {
           width: 60,
           height: 32
         },
-        onClick: function onClick(e) {
+        onClick: function onClick() {
           return setState(function (old) {
             return _objectSpread(_objectSpread({}, old), {}, {
               url: state.tempUrl

package/es/PlayerExt/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { ISegmentType } from 'src/Player/player';
-import './index.less';
-export declare type PlayModeType = 1 | 2;
+export type PlayModeType = 1 | 2;
 export interface IPluginProps {
     url?: string;
     children: JSX.Element;

package/es/PlayerExt/index.js

@@ -1,4 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,9 +11,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from '@emotion/css';
 import React, { useEffect, useMemo, useState } from 'react';
 import IconFont from "../Player/iconfont";
-import "./index.less";
+
+//模式1浏览器模式，2插件模式
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -27,6 +31,7 @@ export var LOCAL_PORT = ['15080', '15081', '15082', '15083', '15084', '15085', '
 export function getLocalPort() {
   return LOCAL_PORT[Math.floor(Math.random() * LOCAL_PORT.length)];
 }
+var classname = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  background-color: #000;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
 
 /**
  * @desc 转码插件模式下的url
@@ -73,7 +78,7 @@ function NeedInstallPlugin(_ref) {
   var pluginDownloadUrl = _ref.pluginDownloadUrl,
     retry = _ref.retry;
   return /*#__PURE__*/_jsx("div", {
-    className: "lm-player-ext-layout",
+    className: classname,
     children: /*#__PURE__*/_jsxs("div", {
       style: {
         marginTop: -60,
@@ -114,7 +119,7 @@ function NeedInstallPlugin(_ref) {
 }
 function Loading() {
   return /*#__PURE__*/_jsx("div", {
-    className: "lm-player-ext-layout",
+    className: "".concat(classname, " lm-player-ext-layout "),
     children: /*#__PURE__*/_jsxs("div", {
       style: {
         marginTop: -60,
@@ -135,7 +140,7 @@ function Loading() {
 }
 function Empty() {
   return /*#__PURE__*/_jsx("div", {
-    className: "lm-player-ext-layout",
+    className: "".concat(classname, " lm-player-ext-layout "),
     children: /*#__PURE__*/_jsx(IconFont, {
       type: "lm-player-PlaySource",
       style: {
@@ -197,7 +202,7 @@ export function ExtModel(_ref2) {
     return /*#__PURE__*/_jsx(Empty, {});
   }
   return /*#__PURE__*/_jsx("div", {
-    className: "lm-player-ext-layout",
+    className: "".concat(classname, " lm-player-ext-layout "),
     children: /*#__PURE__*/React.cloneElement(children, mode === 2 ? {
       url: playUrl,
       segments: playSegments

package/es/Progress/index.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
-import './index.less';
 interface IProgressComponentProps {
     status: 'over' | 'error' | 'loading';
 }
-declare function ProgressComponent({ status }: IProgressComponentProps): JSX.Element;
+declare function ProgressComponent({ status }: IProgressComponentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressComponent {
     var defaultProps: {
         status: string;