@cloud-app-dev/vidc 3.0.11 → 3.0.14

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -1,59 +1,40 @@
-import _useUnmount from "ahooks/es/useUnmount";
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useThrottleFn2 from "ahooks/es/useThrottleFn";
-import _useSize from "ahooks/es/useSize";
 import moment from 'moment';
-import React, { useEffect, useRef } from 'react';
-import TimeSlider from './TimeSlider';
+import React, { useMemo, useRef } from 'react';
+import useTimeSlider from './useTimeSlider';
 
 function SegmentTimeLine(_ref) {
   var begin = _ref.begin,
-      timeCell = _ref.timeCell,
+      segments = _ref.segments,
       onTimeChange = _ref.onTimeChange,
       timeMode = _ref.timeMode,
       updateState = _ref.updateState;
   var ref = useRef();
-  var timeSliderRef = useRef();
-
-  var size = _useSize(ref);
 
   var _useThrottleFn = _useThrottleFn2(onTimeChange, {
     wait: 300
   }),
       run = _useThrottleFn.run;
 
-  useEffect(function () {
-    var time = begin !== null && begin !== void 0 ? begin : moment().set({
+  var time = useMemo(function () {
+    return begin !== null && begin !== void 0 ? begin : moment().set({
       hours: 0,
       minutes: 0,
       seconds: 0
     }).valueOf();
-    timeSliderRef.current = new TimeSlider(ref.current, {
-      onTimeChange: run,
-      start_timestamp: time - timeMode / 2 * 3600 * 1000,
-      current_timestamp: time,
-      timecell: timeCell,
-      hours_per_ruler: timeMode,
-      onHoursPerChange: function onHoursPerChange(hour) {
-        return updateState({
-          timeMode: hour
-        });
-      }
-    });
-  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run]);
-  /**
-   * hour变化更新时间轴而不是重绘
-   */
-
-  _useUpdateEffect(function () {
-    return timeSliderRef.current.drawHourChange(timeMode);
-  }, [timeMode]);
-
-  _useUnmount(function () {
-    timeSliderRef.current.destory();
-    timeSliderRef.current = null;
+  }, [begin]);
+  useTimeSlider(ref, {
+    begin: time - timeMode / 2 * 3600 * 1000,
+    currentTime: time,
+    onTimeChange: run,
+    segments: segments,
+    hoursPer: timeMode,
+    onHoursPerChange: function onHoursPerChange(hour) {
+      return updateState({
+        timeMode: hour
+      });
+    }
   });
-
   return /*#__PURE__*/React.createElement("div", {
     className: "record-time-line"
   }, /*#__PURE__*/React.createElement("canvas", {

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -91,11 +91,11 @@ export default class TimeSlider {
      */
     mousemoveFunc2: (e: MouseEvent) => void;
     /**
-     * 拖动/点击 mouseup事件
+     * 点击 mouseup事件
      */
     mouseupFunc: (e: MouseEvent) => void;
     /**
-     * 拖动/点击 mouseup事件
+     * 拖动停止 mouseup事件
      */
     mouseupFunc2: () => void;
     /**

package/es/ScreenPlayer/TimeSlider.js

@@ -48,8 +48,9 @@ var TimeSlider = /*#__PURE__*/function () {
       _this.g_isMousedown = true;
       _this.g_mousedownCursor = _this.get_cursor_x_position(e); //记住mousedown的位置
 
-      document.addEventListener('mousemove', _this.mousemoveFunc);
-      document.addEventListener('mouseup', _this.mouseupFunc2);
+      document.addEventListener('mousemove', _this.mousemoveFunc); //拖动
+
+      document.addEventListener('mouseup', _this.mouseupFunc2); //停止拖动
     };
     /**
      * 鼠标移出隐藏时间 mouseout事件
@@ -112,16 +113,14 @@ var TimeSlider = /*#__PURE__*/function () {
       }
     };
     /**
-     * 拖动/点击 mouseup事件
+     * 点击 mouseup事件
      */
 
 
     this.mouseupFunc = function (e) {
-      if (_this.g_isMousemove) {
-        //拖动 事件
-        _this.g_isMousemove = false;
-        _this.g_isMousedown = false; // this.returnTime = this.start_timestamp + (this.hours_per_ruler * 3600 * 1000) / 2;
-      } else {
+      var _a, _b;
+
+      if (!_this.g_isMousemove) {
         // click 事件
         _this.g_isMousedown = false;
 
@@ -142,13 +141,11 @@ var TimeSlider = /*#__PURE__*/function () {
 
         _this.set_time_to_middle(_this.current_timestamp);
 
-        _this.options.onTimeChange && _this.options.onTimeChange(current_timestamp, outTimeline);
+        (_b = (_a = _this.options).onTimeChange) === null || _b === void 0 ? void 0 : _b.call(_a, current_timestamp, outTimeline);
       }
-
-      document.removeEventListener('mousemove', _this.mousemoveFunc);
     };
     /**
-     * 拖动/点击 mouseup事件
+     * 拖动停止 mouseup事件
      */
 
 
@@ -204,7 +201,9 @@ var TimeSlider = /*#__PURE__*/function () {
       }
 
       _nextTick(function () {
-        return _this.options.onHoursPerChange && _this.options.onHoursPerChange(_this.hours_per_ruler);
+        var _a, _b;
+
+        return (_b = (_a = _this.options).onHoursPerChange) === null || _b === void 0 ? void 0 : _b.call(_a, _this.hours_per_ruler);
       });
 
       _this.clearCanvas();
@@ -466,10 +465,14 @@ var TimeSlider = /*#__PURE__*/function () {
   }, {
     key: "add_events",
     value: function add_events() {
-      this.canvas.addEventListener('mousewheel', this.mousewheelFunc);
-      this.canvas.addEventListener('mousedown', this.mousedownFunc);
-      this.canvas.addEventListener('mousemove', this.mousemoveFunc2);
-      this.canvas.addEventListener('mouseup', this.mouseupFunc);
+      this.canvas.addEventListener('mousewheel', this.mousewheelFunc); // 调整刻度范围
+
+      this.canvas.addEventListener('mousedown', this.mousedownFunc); // 触发 拖动或者点击标记
+
+      this.canvas.addEventListener('mousemove', this.mousemoveFunc2); //hover 提示当前刻度时间
+
+      this.canvas.addEventListener('mouseup', this.mouseupFunc); // 点击触发
+
       this.canvas.addEventListener('mouseout', this.mouseoutFunc);
     }
   }, {
@@ -484,6 +487,7 @@ var TimeSlider = /*#__PURE__*/function () {
   }, {
     key: "destory",
     value: function destory() {
+      this.clearCanvas();
       this.remove_events();
       this.canvas = null;
       this.options = null;

package/es/ScreenPlayer/demo.js

@@ -3,16 +3,16 @@ import _ConfigProvider from "antd/lib/config-provider";
 import React from 'react';
 import LivePlayer from './Live';
 var list = [{
-  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693469173_b34efba891f35a66b227642f66272534',
+  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693558509_61374ba6efe326a4cb8b6bae86917a25',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693469173_b34efba891f35a66b227642f66272534',
+  url: 'https://6a75ef89-1-server.antelopecloud.cn/flv_live?app=live&token=542446501_3356491776_1693535295_37062417b87df4be7dd5c02b01d87248',
   type: 'flv'
 }, {
   url: 'https://6a75ef90-1-server.antelopecloud.cn/flv_live?app=live&token=542453821_3356491776_1693535323_3a90f54c141b9a246d5679678ebafe90',
   type: 'flv'
 }, {
-  url: 'https://6a75ef88-6-server.antelopecloud.cn/flv_live?app=live&token=542449206_3356491776_1693535342_803846974f04eb02e8115d10432d062f',
+  url: 'https://6a75ef90-6-server.antelopecloud.cn/flv_live?app=live&token=542449206_3356491776_1693535342_803846974f04eb02e8115d10432d062f',
   type: 'flv'
 }];
 export default function App() {

package/es/ScreenPlayer/index.css

@@ -42,6 +42,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  position: relative;
 }
 .split-screen-player-wrapper .player-tools .player-tools-left,
 .split-screen-player-wrapper .player-tools .player-tools-right {

package/es/ScreenPlayer/useTimeSlider.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { ISegmentType } from '../Player/player';
+export interface ITimeSliderOptions {
+    hoursPer?: number;
+    begin?: number;
+    segments?: TimeCellItem[];
+    currentTime?: number;
+    onTimeChange?: (time: number, outTimeline?: boolean) => void;
+    onHoursPerChange?: (hour: number) => void;
+}
+export declare type ITimeSliderState = {
+    hoursPer: number;
+    begin: number;
+    currentTime: number;
+    hover: {
+        x: number;
+        time: number;
+    };
+};
+export declare type TimeCellItem = ISegmentType;
+declare function useTimeSlider(canvasRef: React.MutableRefObject<HTMLCanvasElement>, { hoursPer, begin, currentTime, segments, onTimeChange, onHoursPerChange }: ITimeSliderOptions): void;
+export default useTimeSlider;