@cloud-app-dev/vidc 2.3.0 → 3.0.0

package/es/ScreenPlayer/TimeSlider.js

@@ -0,0 +1,528 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+import moment from 'moment';
+var canvasbg = 'rgba(69, 72, 76, 0.5)';
+var currentColor = '#248ffa';
+var normalLineColor = '#ffffff';
+var hoverLineColor = '#248ffa';
+var minPerStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
+var minStepSize = 20;
+
+var TimeSlider = /*#__PURE__*/function () {
+  function TimeSlider(canvas, options) {
+    var _this = this;
+
+    _classCallCheck(this, TimeSlider);
+
+    var _a, _b, _c, _d; //min/格
+
+
+    this.minutes_per_step = minPerStep; //刻度间最小宽度，单位px
+
+    this.graduation_step = minStepSize; //时间轴显示24小时
+
+    this.hours_per_ruler = 24; // 当前刻度开始
+
+    this.start_timestamp = new Date().getTime() - 12 * 60 * 60 * 1000;
+    this.distance_between_gtitle = 80;
+    this.zoom = 24; ////拖动mousedown标记
+
+    this.g_isMousedown = false; //拖动mousemove标记
+
+    this.g_isMousemove = false; //选中当前时间
+
+    this.current_timestamp = new Date().getTime();
+    this.timecell = [];
+    this.domLeft = 0;
+    /**
+     * 拖动/点击 mousedown事件
+     */
+
+    this.mousedownFunc = function (e) {
+      _this.g_isMousedown = true;
+      _this.g_mousedownCursor = _this.get_cursor_x_position(e); //记住mousedown的位置
+
+      document.addEventListener('mousemove', _this.mousemoveFunc);
+      document.addEventListener('mouseup', _this.mouseupFunc2);
+    };
+    /**
+     * 鼠标移出隐藏时间 mouseout事件
+     * @param {*} e
+     */
+
+
+    this.mouseoutFunc = function () {
+      _this.clearCanvas();
+
+      _this.init(_this.start_timestamp, _this.timecell, true);
+    };
+    /**
+     * 拖动/鼠标hover显示 mousemove事件
+     */
+
+
+    this.mousemoveFunc = function (e) {
+      if (_this.g_isMousedown) {
+        var pos_x = _this.get_cursor_x_position(e);
+
+        var px_per_ms = _this.canvansW / (_this.hours_per_ruler * 60 * 60 * 1000); // px/ms
+
+        _this.clearCanvas();
+
+        var diff_x = pos_x - _this.g_mousedownCursor;
+        _this.start_timestamp = _this.start_timestamp - Math.round(diff_x / px_per_ms);
+
+        _this.init(_this.start_timestamp, _this.timecell, true);
+
+        _this.g_isMousemove = true;
+        _this.g_mousedownCursor = pos_x;
+      }
+    };
+    /**
+     * 拖动/鼠标hover显示
+     */
+
+
+    this.mousemoveFunc2 = function (e) {
+      if (!_this.g_isMousedown) {
+        var pos_x = _this.get_cursor_x_position(e);
+
+        var px_per_ms = _this.canvansW / (_this.hours_per_ruler * 60 * 60 * 1000); // px/ms
+
+        _this.clearCanvas();
+
+        var time = _this.start_timestamp + pos_x / px_per_ms;
+
+        _this.init(_this.start_timestamp, _this.timecell, true);
+
+        _this.drawLine(pos_x, 0, pos_x, 40, hoverLineColor, 1);
+
+        _this.ctx.fillStyle = hoverLineColor;
+
+        _this.ctx.fillText(_this.changeTime(time), pos_x - 50, 50);
+      }
+    };
+    /**
+     * 拖动/点击 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 {
+        // click 事件
+        _this.g_isMousedown = false;
+
+        var posx = _this.get_cursor_x_position(e); //鼠标距离 px
+
+
+        var ms_per_px = _this.zoom * 3600 * 1000 / _this.canvansW; // ms/px
+
+        var current_timestamp = _this.start_timestamp + posx * ms_per_px;
+
+        var timecellItem = _this.timecell.find(function (v) {
+          return current_timestamp >= v.beginTime && current_timestamp < v.endTime;
+        });
+
+        if (timecellItem && !timecellItem.url) {
+          // 无录像轴 不让点击
+          return;
+        }
+
+        _this.current_timestamp = _this.start_timestamp + posx * ms_per_px;
+
+        _this.set_time_to_middle(_this.current_timestamp);
+
+        _this.options.onTimeChange && _this.options.onTimeChange(_this.current_timestamp);
+      }
+
+      document.removeEventListener('mousemove', _this.mousemoveFunc);
+    };
+    /**
+     * 拖动/点击 mouseup事件
+     */
+
+
+    this.mouseupFunc2 = function () {
+      if (_this.g_isMousemove) {
+        //拖动 事件
+        _this.g_isMousemove = false;
+        _this.g_isMousedown = false; // this.returnTime = this.start_timestamp + (this.hours_per_ruler * 3600 * 1000) / 2;
+      }
+
+      document.removeEventListener('mousemove', _this.mousemoveFunc);
+      document.removeEventListener('mouseup', _this.mouseupFunc2);
+    };
+    /**
+     * 滚轮放大缩小，以时间轴中心为准 mousewheel事件
+     */
+
+
+    this.mousewheelFunc = function (event) {
+      if (event && event.preventDefault) {
+        event.preventDefault();
+      } else {
+        window.event.returnValue = false;
+        return;
+      }
+
+      var e = window.event || event;
+      var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+      var middle_time = _this.start_timestamp + _this.hours_per_ruler * 3600 * 1000 / 2; //ms 记住当前中间的时间
+
+      if (delta < 0) {
+        _this.zoom = _this.zoom + 4;
+
+        if (_this.zoom >= 24) {
+          _this.zoom = 24; //放大最大24小时
+        }
+
+        _this.hours_per_ruler = _this.zoom;
+      } else if (delta > 0) {
+        // 放大
+        _this.zoom = _this.zoom - 4;
+
+        if (_this.zoom <= 1) {
+          _this.zoom = 1; //缩小最小1小时
+        }
+
+        _this.hours_per_ruler = _this.zoom;
+      }
+
+      _this.clearCanvas();
+
+      _this.start_timestamp = middle_time - _this.hours_per_ruler * 3600 * 1000 / 2; //start_timestamp = 当前中间的时间 - zoom/2
+
+      _this.init(_this.start_timestamp, _this.timecell, true);
+    };
+    /**
+     * 获取鼠标posx
+     * @param {*} e
+     */
+
+
+    this.get_cursor_x_position = function (e) {
+      var posx = 0;
+
+      if (!e) {
+        e = window.event;
+      }
+
+      if (e.pageX || e.pageY) {
+        posx = e.pageX - _this.domLeft;
+      } else if (e.clientX || e.clientY) {
+        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+      }
+
+      return posx;
+    };
+
+    var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+        left = _canvas$getBoundingCl.left;
+
+    this.canvas = canvas;
+    this.options = options;
+    this.canvansW = this.canvas.width = this.canvas.clientWidth;
+    this.canVansH = this.canvas.height = this.canvas.clientHeight;
+    this.hours_per_ruler = (_a = this.options.hours_per_ruler) !== null && _a !== void 0 ? _a : this.hours_per_ruler;
+    this.start_timestamp = (_b = this.options.start_timestamp) !== null && _b !== void 0 ? _b : this.start_timestamp;
+    this.current_timestamp = (_c = this.options.current_timestamp) !== null && _c !== void 0 ? _c : this.current_timestamp;
+    this.timecell = (_d = this.options.timecell) !== null && _d !== void 0 ? _d : this.timecell;
+    this.domLeft = left;
+    this.init(this.start_timestamp, this.timecell, false);
+  }
+
+  _createClass(TimeSlider, [{
+    key: "ctx",
+    get: function get() {
+      var _a;
+
+      return (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+    }
+  }, {
+    key: "init",
+    value: function init(start_timestamp, timecell, redrawFlag) {
+      this.timecell = timecell;
+      this.start_timestamp = start_timestamp;
+      this.drawCellBg();
+      this.add_cells(timecell);
+      this.add_graduations(start_timestamp);
+
+      if (!redrawFlag) {
+        //只有第一次进入才需要添加事件
+        this.add_events();
+      }
+
+      this.drawCurrentLine();
+    }
+  }, {
+    key: "drawCurrentLine",
+    value: function drawCurrentLine() {
+      var time = this.current_timestamp;
+      var range = [this.start_timestamp, this.start_timestamp + this.hours_per_ruler * 3600 * 1000];
+
+      if (time < range[0] || time > range[1]) {
+        return;
+      }
+
+      var ms_current = time - this.start_timestamp;
+      var px_per_ms = this.canvansW / (this.hours_per_ruler * 60 * 60 * 1000); // px/ms
+
+      var left = px_per_ms * ms_current;
+      this.ctx.fillStyle = currentColor;
+      this.ctx.fillText(this.changeTime(time), left - 50, 50);
+      this.drawLine(left, 0, left, 34, currentColor, 2); //中间当前点线
+    }
+  }, {
+    key: "drawCellBg",
+    value: function drawCellBg() {
+      this.ctx.fillStyle = canvasbg;
+      this.ctx.fillRect(0, 0, this.canvansW, 15);
+    }
+  }, {
+    key: "get_line_sizes",
+    value: function get_line_sizes(start_timestamp) {
+      var px_per_min = this.canvansW / (this.hours_per_ruler * 60); // px/min
+
+      var px_per_ms = this.canvansW / (this.hours_per_ruler * 60 * 60 * 1000); // px/ms
+
+      var px_per_step = this.graduation_step; // px/格 默认最小值20px
+
+      var min_per_step = px_per_step / px_per_min; // min/格
+
+      for (var i = 0; i < this.minutes_per_step.length; i++) {
+        if (min_per_step <= this.minutes_per_step[i]) {
+          //让每格时间在minutes_per_step规定的范围内
+          min_per_step = this.minutes_per_step[i];
+          px_per_step = px_per_min * min_per_step;
+          break;
+        }
+      }
+
+      var medium_step = 30;
+
+      for (var i = 0; i < this.minutes_per_step.length; i++) {
+        if (this.distance_between_gtitle / px_per_min <= this.minutes_per_step[i]) {
+          medium_step = this.minutes_per_step[i];
+          break;
+        }
+      }
+
+      var num_steps = this.canvansW / px_per_step; //总格数
+
+      var ms_offset = this.ms_to_next_step(start_timestamp, min_per_step * 60 * 1000); //开始的偏移时间 ms
+
+      var px_offset = ms_offset * px_per_ms; //开始的偏移距离 px
+
+      var ms_per_step = px_per_step / px_per_ms; // ms/step
+
+      return {
+        num_steps: num_steps,
+        px_offset: px_offset,
+        ms_per_step: ms_per_step,
+        px_per_step: px_per_step,
+        min_per_step: min_per_step,
+        medium_step: medium_step,
+        ms_offset: ms_offset,
+        px_per_ms: px_per_ms
+      };
+    }
+  }, {
+    key: "add_graduations",
+    value: function add_graduations(start_timestamp) {
+      var _this$get_line_sizes = this.get_line_sizes(start_timestamp),
+          num_steps = _this$get_line_sizes.num_steps,
+          px_offset = _this$get_line_sizes.px_offset,
+          px_per_step = _this$get_line_sizes.px_per_step,
+          ms_per_step = _this$get_line_sizes.ms_per_step,
+          medium_step = _this$get_line_sizes.medium_step,
+          ms_offset = _this$get_line_sizes.ms_offset;
+
+      var graduation_left, graduation_time, lineH;
+
+      for (var i = 0; i < num_steps; i++) {
+        graduation_left = px_offset + i * px_per_step; // 距离=开始的偏移距离+格数*px/格
+
+        graduation_time = start_timestamp + ms_offset + i * ms_per_step; //时间=左侧开始时间+偏移时间+格数*ms/格
+
+        var date = new Date(graduation_time);
+
+        if (date.getUTCHours() == 0 && date.getUTCMinutes() == 0) {
+          lineH = 15;
+          var big_date = this.graduation_title(date);
+          this.ctx.fillStyle = normalLineColor;
+          this.ctx.fillText(big_date, graduation_left - 12, 34);
+        } else if (graduation_time / (60 * 1000) % medium_step == 0) {
+          lineH = 15;
+          var middle_date = this.graduation_title(date);
+          this.ctx.fillStyle = normalLineColor;
+          this.ctx.fillText(middle_date, graduation_left - (middle_date.length > 5 ? 24 : 12), 34);
+        } else {
+          lineH = 10;
+        }
+
+        this.drawLine(graduation_left, 0, graduation_left, lineH, normalLineColor, 1);
+      }
+    }
+  }, {
+    key: "ms_to_next_step",
+    value: function ms_to_next_step(timestamp, step) {
+      var remainder = timestamp % step;
+      return remainder ? step - remainder : 0;
+    }
+    /**
+     * 返回时间轴上刻度的时间
+     * @param {*} datetime new Date 格式
+     */
+
+  }, {
+    key: "graduation_title",
+    value: function graduation_title(datetime) {
+      var h = datetime.getHours();
+      var m = datetime.getMinutes();
+      var s = datetime.getMilliseconds();
+
+      if (h == 0 && m == 0 && s == 0) {
+        return moment(datetime).format('YYYY.MM.DD');
+      }
+
+      return moment(datetime).format('HH:mm');
+    }
+    /**
+     * 绘制线
+     * @param {*} beginX
+     * @param {*} beginY
+     * @param {*} endX
+     * @param {*} endY
+     * @param {*} color
+     * @param {*} width
+     */
+
+  }, {
+    key: "drawLine",
+    value: function drawLine(beginX, beginY, endX, endY, color, width) {
+      this.ctx.beginPath();
+      this.ctx.moveTo(beginX, beginY);
+      this.ctx.lineTo(endX, endY);
+      this.ctx.strokeStyle = color;
+      this.ctx.lineWidth = width;
+      this.ctx.stroke();
+    }
+    /**
+     * 添加录像段
+     * @param {*} cells 录像数组
+     */
+
+  }, {
+    key: "add_cells",
+    value: function add_cells(cells) {
+      var _this2 = this;
+
+      cells.forEach(function (cell) {
+        return _this2.draw_cell(cell);
+      });
+    }
+    /**
+     * 绘制录像块
+     * @param {*} cell cell包括beginTime ms;endTime ms;style
+     */
+
+  }, {
+    key: "draw_cell",
+    value: function draw_cell(cell) {
+      var _a;
+
+      var px_per_ms = this.canvansW / (this.hours_per_ruler * 60 * 60 * 1000); // px/ms
+
+      var beginX = (cell.beginTime - this.start_timestamp) * px_per_ms;
+      var cell_width = (cell.endTime - cell.beginTime) * px_per_ms;
+      this.ctx.fillStyle = cell.url ? ((_a = cell.style) === null || _a === void 0 ? void 0 : _a.background) || hoverLineColor : '#f32d37';
+      this.ctx.fillRect(beginX, 0, cell_width, 15);
+    }
+    /**
+     * 时间轴事件
+     */
+
+  }, {
+    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('mouseout', this.mouseoutFunc);
+    }
+  }, {
+    key: "remove_events",
+    value: function remove_events() {
+      this.canvas.removeEventListener('mousewheel', this.mousewheelFunc);
+      this.canvas.removeEventListener('mousedown', this.mousedownFunc);
+      this.canvas.removeEventListener('mousemove', this.mousemoveFunc2);
+      this.canvas.removeEventListener('mouseup', this.mouseupFunc);
+      this.canvas.removeEventListener('mouseout', this.mouseoutFunc);
+    }
+  }, {
+    key: "destory",
+    value: function destory() {
+      this.remove_events();
+      this.canvas = null;
+      this.options = null;
+      this.timecell = null;
+    }
+    /**
+     * 返回 2018-01-01 10:00:00 格式时间
+     * @param {*} time
+     */
+
+  }, {
+    key: "changeTime",
+    value: function changeTime(time) {
+      return moment(time).format('YYYY-MM-DD HH:mm:ss');
+    }
+    /**
+     * 设置时间，让这个时间点跳到中间红线处
+     *  @param {*} time 单位ms
+     */
+
+  }, {
+    key: "set_time_to_middle",
+    value: function set_time_to_middle(time) {
+      this.clearCanvas();
+      this.start_timestamp = time - this.hours_per_ruler * 60 * 60 * 1000 / 2;
+      this.init(this.start_timestamp, this.timecell, true);
+    }
+    /**
+     * 返回点击或者拖动的时间点
+     */
+
+  }, {
+    key: "returnMouseupTime",
+    value: function returnMouseupTime(callback) {
+      if (this.current_timestamp != null) {
+        if (callback) {
+          callback(this.current_timestamp);
+        }
+      }
+    }
+    /**
+     * 清除canvas 每次重新绘制需要先清除
+     */
+
+  }, {
+    key: "clearCanvas",
+    value: function clearCanvas() {
+      this.ctx.clearRect(0, 0, 1500, 150);
+    }
+  }]);
+
+  return TimeSlider;
+}();
+
+export { TimeSlider as default };

package/es/ScreenPlayer/demo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function (): JSX.Element;

package/es/ScreenPlayer/demo.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LivePlayer from './Live';
+var list = [{
+  url: 'https://6a75ef90-6-server.antelopecloud.cn/flv_live?app=live&token=542449336_3356491776_1691734783_0e329cf89f3333a17ccaf8533466a577',
+  type: 'flv'
+}, {
+  url: 'https://6a75ef90-2-server.antelopecloud.cn/flv_live?app=live&token=542453242_3356491776_1691734590_6fb5b57fd5095ff2e6ff331fe605a593',
+  type: 'flv'
+}, {
+  url: 'https://6a75ef90-2-server.antelopecloud.cn/flv_live?app=live&token=542453302_3356491776_1691735024_3bb73732b5e0a857b70248a179804801',
+  type: 'flv'
+}, {
+  url: 'https://6a75ef90-0-server.antelopecloud.cn/flv_live?app=live&token=557997490_3356491776_1691725056_86b4dd8105fea7b1180408a63d17b37b',
+  type: 'flv'
+}];
+export default function () {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 1200,
+      height: 800
+    }
+  }, /*#__PURE__*/React.createElement(LivePlayer, {
+    list: list
+  }));
+}

package/es/ScreenPlayer/demo2.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function App(): JSX.Element;