@cloud-app-dev/vidc 4.0.19 → 4.0.21

package/es/Player/player.d.ts

@@ -0,0 +1,233 @@
+import type Flvjs from '@cloud-app-dev/mpegts.js';
+import type Hls from 'hls.js';
+import type { HlsConfig } from 'hls.js';
+import type React from 'react';
+import type Api from './api';
+import type VideoEventInstance from './event';
+
+export type FlvPlayerConfig = {
+  mediaDataSource: Flvjs.MediaDataSource;
+  config: Flvjs.Config;
+};
+
+export interface ISinglePlayerProps {
+  /**
+   * 视频播放地址
+   */
+  url?: string;
+
+  /**
+   * 容器类名
+   */
+  className?: string;
+  children?: React.ReactNode;
+
+  /**
+   * 同html video muted  静音
+   * @default true
+   */
+  muted?: boolean;
+  /**
+   * 同html video autoplay  自动播放
+   * @default true
+   */
+  autoPlay?: boolean;
+
+  /**
+   * 同html video playsinline  自动播放
+   * @default false
+   */
+  playsInline?: boolean;
+  /**
+   *同html video preload  预加载
+   */
+  preload?: string;
+  /**
+   * 视频封面
+   */
+  poster?: string;
+
+  /**
+   * 同html video loop  循环
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * 视频格式
+   * @default 'native'
+   */
+  type?: 'flv' | 'hls' | 'native';
+
+  /**
+   * 隐藏工具栏
+   * @default false
+   */
+  hideContrallerBar?: boolean;
+
+  /**
+   * 直播模式
+   * @default true
+   */
+  isLive?: boolean;
+
+  /**
+   * 工具栏右外侧拓展
+   */
+  rightExtContents?: React.ReactNode;
+  /**
+   * 工具栏右内侧拓展
+   */
+  rightMidExtContents?: React.ReactNode;
+  /**
+   * 工具栏左外侧拓展
+   */
+  leftExtContents?: React.ReactNode;
+  /**
+   * 工具栏左内侧拓展
+   */
+  leftMidExtContents?: React.ReactNode;
+
+  /**
+   * 自定义时间轴
+   */
+  customTimeLine?: React.ReactNode;
+
+  /**
+   * 错误重试次数
+   * @default 5
+   */
+  errorReloadTimer?: number;
+
+  /**
+   * 自定义flv参数配置
+   * @type FlvPlayerConfig
+   */
+  flvConfig?: FlvPlayerConfig;
+
+  /**
+   * 自定义hls参数配置
+   * @type HlsConfig
+   */
+  hlsConfig?: HlsConfig;
+
+  /**
+   * 自定义reload函数
+   */
+  reload?: () => void;
+
+  /**
+   * extaction
+   */
+  extActions?: { [key: string]: (...args: any) => void };
+
+  /**
+   * 视频可播放时执行钩子
+   */
+  onCanPlayerInit?: () => void;
+
+  /**
+   * 自定义video事件
+   */
+  videoEvents?: CustomEvent[];
+
+  /**
+   * 自定义播放器的事件
+   */
+  playerEvents?: CustomEvent[];
+
+  /**
+   * 开启单帧播放
+   */
+  oneFpsPlay?: boolean;
+
+  /**
+   * 获取视频针的频次 (ms)
+   */
+  fpsDelay?: number;
+
+  /**
+   * 视频每秒多少帧，用于控制逐帧播放
+   */
+  fps?: number;
+}
+
+export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive' | 'reload'> {
+  /**
+   * 前端录像开始时间
+   */
+  begin?: number;
+
+  /**
+   * 前端录像结束时间
+   */
+  end?: number;
+
+  /**
+   * 录像时间轴发生变化回调
+   */
+  onSeek?: (time: number) => void;
+
+  forwordRef?: React.MutableRefObject<ExportPlayerType>;
+}
+
+export interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url'> {
+  /**
+   * 云录像片段信息
+   */
+  segments?: ISegmentType[];
+
+  /**
+   * 云录像开始时间
+   */
+  begin?: number;
+
+  forwordRef?: React.MutableRefObject<ExportPlayerType>;
+
+  defaultIndex?: number;
+}
+
+export const SinglePlayer: React.FunctionComponent<ISinglePlayerProps>;
+export const FrontendPlayer: React.FunctionComponent<IFrontendPlayerProps>;
+export const SegmentPlayer: React.FunctionComponent<ISegmentPlayerProps>;
+
+export type EventInfo = {
+  type: string;
+  listener: ((...args: any) => void)[];
+};
+
+export type ExportPlayerType = {
+  video: HTMLVideoElement;
+  container: HTMLElement;
+  api: Api;
+  event: VideoEventInstance;
+  plugins: [Flvjs.Player, Hls];
+  fit?: string;
+  setIndex?: (i: number) => void;
+  seekTo?: (i: number) => void;
+  reload?: () => void;
+};
+
+export interface ISegmentType {
+  id?: string;
+  /**
+   * 视频片段地址
+   */
+  url?: string;
+
+  /**
+   * 片段开始时间
+   */
+  beginTime: number;
+
+  /**
+   * 片段结束时间
+   */
+  endTime: number;
+
+  style?: any;
+}
+
+export const ISegmentTypeDemo: React.FC<ISegmentType>;
+
+export type CustomEvent = [string, () => void];

package/es/Player/segment_player.d.ts

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

package/es/Player/segment_player.js

@@ -0,0 +1,228 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["segments", "begin", "forwordRef", "defaultIndex", "onCanPlayerInit", "customTimeLine"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useLatest, useUpdate } from 'ahooks';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRegisterPlayerEvent, useVideoEvent } from "./event";
+import Events from "./event/eventName";
+import SegmentTimeLine from "./segment_timeline";
+import SinglePlayer from "./single_player";
+
+/**
+ * @desc 计算第一个url
+ * @param segments
+ * @param defaultIndex
+ * @returns
+ */
+function getFirstUrlIndex(segments) {
+  var defaultIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!(Array.isArray(segments) && segments.length > 0)) {
+    return defaultIndex;
+  }
+  if (segments[defaultIndex].url) {
+    return defaultIndex;
+  } else {
+    var i = defaultIndex + 1;
+    if (i > segments.length) {
+      return i;
+    }
+    return getFirstUrlIndex(segments, i);
+  }
+}
+
+/**
+ * @desc 片段索引控制
+ * @param event
+ * @param segments
+ * @returns
+ */
+function usePlayIndex(event, segments) {
+  var defaultIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var _useState = useState({
+      index: getFirstUrlIndex(segments !== null && segments !== void 0 ? segments : [], defaultIndex)
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  // 片段发生变化重新开始计算索引
+  useEffect(function () {
+    var index = getFirstUrlIndex(segments !== null && segments !== void 0 ? segments : [], 0);
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        index: index
+      });
+    });
+  }, [segments]);
+
+  // 索引不存在播放地址，自动跳转下一段
+  useEffect(function () {
+    var _segments$state$index, _segments$length;
+    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
+        });
+      });
+    }
+  }, [segments, state.index]);
+
+  // 监听片段播放状态，自动跳转下一个片段
+  var endHandle = function endHandle() {
+    return setState(function (old) {
+      var _segments$length2;
+      return _objectSpread(_objectSpread({}, old), {}, {
+        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
+      });
+    });
+  };
+  useVideoEvent('ended', endHandle, event);
+  useRegisterPlayerEvent(Events.PLAY_ENDED, endHandle, event);
+  return {
+    index: state.index,
+    setIndex: function setIndex(i) {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          index: i
+        });
+      });
+    }
+  };
+}
+
+/**
+ * @desc 主组件，负责片段整体逻辑控制
+ * @param param0
+ * @returns
+ */
+function SegmentPlayer(_ref) {
+  var segments = _ref.segments,
+    begin = _ref.begin,
+    forwordRef = _ref.forwordRef,
+    defaultIndex = _ref.defaultIndex,
+    onCanPlayerInit = _ref.onCanPlayerInit,
+    customTimeLine = _ref.customTimeLine,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState3 = useState({
+      seekTime: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var latestSegmentsRef = useLatest(segments);
+  var update = useUpdate();
+  var ref = useRef(null);
+  var playRef = forwordRef ? forwordRef : ref;
+  var _ref2 = playRef.current || {},
+    api = _ref2.api,
+    event = _ref2.event;
+  var duration = useMemo(function () {
+    return segments === null || segments === void 0 ? void 0 : segments.map(function (v) {
+      return (v.endTime - v.beginTime) / 1000;
+    }).reduce(function (a, b) {
+      return a + b;
+    }, 0);
+  }, [segments]);
+  var _usePlayIndex = usePlayIndex(event, segments, defaultIndex),
+    index = _usePlayIndex.index,
+    setIndex = _usePlayIndex.setIndex;
+  var url = useMemo(function () {
+    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, _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),
+      hls = _ref4[1];
+    if (hls) {
+      hls.swapAudioCodec();
+      hls.recoverMediaError();
+    }
+    (_playRef$current2 = playRef.current) === null || _playRef$current2 === void 0 || _playRef$current2.event.emit(Events.RELOAD);
+    (_playRef$current3 = playRef.current) === null || _playRef$current3 === void 0 || _playRef$current3.event.emit(Events.CLEAR_ERROR_TIMER);
+    setIndex(0);
+    (_playRef$current4 = playRef.current) === null || _playRef$current4 === void 0 || _playRef$current4.api.reload();
+  };
+
+  // time 毫秒的时间戳
+  var seekTo = function seekTo(time) {
+    var _latestSegmentsRef$cu, _playRef$current$plug2, _playRef$current5, _cSegments$index;
+    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;
+    });
+    if (index === -1) {
+      return;
+    }
+    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];
+    if (hls) {
+      hls.swapAudioCodec();
+      hls.recoverMediaError();
+    }
+    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), {}, {
+        seekTime: currentTime / 1000
+      });
+    });
+  };
+
+  // 处理seek 后index变化后 cuurenttime变化的过程
+  useEffect(function () {
+    var _playRef$current6;
+    if (state.seekTime === 0) {
+      return;
+    }
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        seekTime: 0
+      });
+    });
+    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__*/React.createElement(SegmentTimeLine, {
+    begin: begin !== null && begin !== void 0 ? begin : 0,
+    seekTo: seekTo,
+    index: index,
+    segments: segments !== null && segments !== void 0 ? segments : [],
+    duration: duration !== null && duration !== void 0 ? duration : 0
+  });
+  var onInit = useCallback(function () {
+    update();
+    onCanPlayerInit === null || onCanPlayerInit === void 0 || onCanPlayerInit();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(SinglePlayer, _extends({
+    ref: playRef,
+    url: url,
+    isLive: false,
+    onCanPlayerInit: onInit,
+    reload: reload,
+    extActions: {
+      setIndex: setIndex,
+      seekTo: seekTo
+    },
+    customTimeLine: hasReady ? timeline : /*#__PURE__*/React.createElement(React.Fragment, null)
+  }, props));
+}
+export default SegmentPlayer;

package/es/Player/segment_timeline.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ISegmentType } from './player';
+import './style/timeline.less';
+interface ITimeLineProps {
+    index: number;
+    segments: ISegmentType[];
+    duration: number;
+    begin: number;
+    seekTo: (time: number) => void;
+}
+declare function SegmentTimeLine({ index, segments, duration, begin, seekTo }: ITimeLineProps): React.JSX.Element;
+export default SegmentTimeLine;

package/es/Player/segment_timeline.js

@@ -0,0 +1,173 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 { FMT } from "./util";
+function TipTitle(_ref) {
+  var index = _ref.index,
+    segments = _ref.segments,
+    begin = _ref.begin,
+    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__*/React.createElement("div", {
+    className: "segment-line-tip-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 600
+    }
+  }, "\u5F55\u50CF\u7247\u6BB5\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", null, "\u5F00\u59CB\uFF1A", start), /*#__PURE__*/React.createElement("div", null, "\u7ED3\u675F\uFF1A", end), /*#__PURE__*/React.createElement("div", null, "\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u5F53\u524D\uFF1A", moment(current).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u72B6\u6001\uFF1A", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: hasUrl ? 'green' : 'red'
+    }
+  }, 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,
+      markTime: 0,
+      left: -1,
+      visible: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var status = useBarStatus();
+  var _useTimes = useTimes(),
+    _useTimes2 = _slicedToArray(_useTimes, 2),
+    currentTime = _useTimes2[0],
+    buffered = _useTimes2[1];
+  var indexDuration = useMemo(function () {
+    return segments.map(function (v) {
+      return (v.endTime - v.beginTime) / 1000;
+    }).reduce(function (a, b, i) {
+      return i >= index ? a : a + b;
+    }, 0);
+  }, [index, segments]);
+  var playPercent = useMemo(function () {
+    return (currentTime + indexDuration) / duration * 100;
+  }, [currentTime, duration, indexDuration]);
+  var bufferedPercent = useMemo(function () {
+    return (buffered + indexDuration) / duration * 100;
+  }, [buffered, duration, indexDuration]);
+  var seekWithLine = function seekWithLine(e, i) {
+    if (!segments[i].url) {
+      return;
+    }
+    var ele = e.currentTarget;
+    var rect = ele.getBoundingClientRect();
+    var current = e.pageX - rect.left;
+    var item = segments[i - 1];
+    var pTime = item ? item.endTime : begin;
+    var duration = segments[i].endTime - segments[i].beginTime;
+    var currentTime = current / rect.width * duration;
+    seekTo(Math.round(currentTime + pTime));
+  };
+  var onLineMouseOver = function onLineMouseOver(e) {
+    var rect = e.currentTarget.getBoundingClientRect();
+    var left = e.pageX - rect.left;
+    var mTime = left / rect.width * duration;
+    setState(function (old) {
+      return _objectSpread(_objectSpread({}, old), {}, {
+        left: left,
+        markTime: begin + mTime * 1000
+      });
+    });
+  };
+  var onLineMouseOut = function onLineMouseOut() {
+    return startTransition(function () {
+      return setState(function (old) {
+        return _objectSpread(_objectSpread({}, old), {}, {
+          left: -1
+        });
+      });
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "player-timeline-layout player-segment-timeline-layout ".concat(status === 0 ? 'hide-time-line' : ''),
+    onMouseMove: onLineMouseOver,
+    onMouseOut: onLineMouseOut
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "segment-line-box"
+  }, segments.map(function (v, i) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: "time-line-".concat(i),
+      title: /*#__PURE__*/React.createElement(TipTitle, {
+        segments: segments,
+        index: i,
+        begin: begin,
+        current: currentTime * 1000 + begin,
+        markTime: state.markTime
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "segment-line-item ".concat(!v.url ? 'segment-line-item-none' : '', " ").concat(i === segments.length - 1 ? 'last-segment-line-item' : ''),
+      onClick: function onClick(e) {
+        return seekWithLine(e, i);
+      },
+      style: {
+        width: "".concat((v.endTime / 1000 - v.beginTime / 1000) / duration * 100, "%")
+      }
+    }));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "buffer-line",
+    style: {
+      width: "".concat(bufferedPercent, "%")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "current-line",
+    style: {
+      width: "".concat(playPercent, "%")
+    }
+  }), state.left !== -1 && /*#__PURE__*/React.createElement("span", {
+    className: "segment-line-mark",
+    style: {
+      left: state.left
+    }
+  })));
+}
+export default SegmentTimeLine;

package/es/Player/single_player.d.ts

@@ -0,0 +1,5 @@
+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;