@cloud-app-dev/vidc 3.0.17 → 3.0.19

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -1,129 +0,0 @@
-import { ISegmentType } from '../Player/player';
-export interface ITimeSliderOptions {
-    hours_per_ruler?: number;
-    start_timestamp?: number;
-    timecell?: TimeCellItem[];
-    current_timestamp?: number;
-    onTimeChange?: (time: number, outTimeline?: boolean) => void;
-    onHoursPerChange?: (hour: number) => void;
-}
-export declare type TimeCellItem = ISegmentType;
-export default class TimeSlider {
-    canvas: HTMLCanvasElement;
-    options: ITimeSliderOptions;
-    canvansW: number;
-    canVansH: number;
-    minutes_per_step: number[];
-    graduation_step: number;
-    hours_per_ruler: number;
-    start_timestamp: number;
-    distance_between_gtitle: number;
-    zoom: number;
-    g_isMousedown: boolean;
-    g_isMousemove: boolean;
-    g_mousedownCursor: number;
-    current_timestamp: number;
-    timecell: TimeCellItem[];
-    domLeft: number;
-    constructor(canvas: HTMLCanvasElement, options: ITimeSliderOptions);
-    get ctx(): CanvasRenderingContext2D;
-    init(start_timestamp: number, timecell: TimeCellItem[], redrawFlag: boolean): void;
-    drawCurrentLine(): void;
-    drawCellBg(): void;
-    get_line_sizes(start_timestamp: number): {
-        num_steps: number;
-        px_offset: number;
-        ms_per_step: number;
-        px_per_step: number;
-        min_per_step: number;
-        medium_step: number;
-        ms_offset: number;
-        px_per_ms: number;
-    };
-    add_graduations(start_timestamp: number): void;
-    ms_to_next_step(timestamp: number, step: number): number;
-    /**
-     * 返回时间轴上刻度的时间
-     * @param {*} datetime new Date 格式
-     */
-    graduation_title(datetime: Date): string;
-    /**
-     * 绘制线
-     * @param {*} beginX
-     * @param {*} beginY
-     * @param {*} endX
-     * @param {*} endY
-     * @param {*} color
-     * @param {*} width
-     */
-    drawLine(beginX: number, beginY: number, endX: number, endY: number, color: string, width: number): void;
-    /**
-     * 添加录像段
-     * @param {*} cells 录像数组
-     */
-    add_cells(cells: TimeCellItem[]): void;
-    /**
-     * 绘制录像块
-     * @param {*} cell cell包括beginTime ms;endTime ms;style
-     */
-    draw_cell(cell: TimeCellItem): void;
-    /**·
-     * 时间轴事件
-     */
-    add_events(): void;
-    remove_events(): void;
-    destory(): void;
-    /**
-     * 拖动/点击 mousedown事件
-     */
-    mousedownFunc: (e: MouseEvent) => void;
-    /**
-     * 鼠标移出隐藏时间 mouseout事件
-     * @param {*} e
-     */
-    mouseoutFunc: () => void;
-    /**
-     * 拖动/鼠标hover显示 mousemove事件
-     */
-    mousemoveFunc: (e: MouseEvent) => void;
-    /**
-     * 拖动/鼠标hover显示
-     */
-    mousemoveFunc2: (e: MouseEvent) => void;
-    /**
-     * 点击 mouseup事件
-     */
-    mouseupFunc: (e: MouseEvent) => void;
-    /**
-     * 拖动停止 mouseup事件
-     */
-    mouseupFunc2: () => void;
-    /**
-     * 返回 2018-01-01 10:00:00 格式时间
-     * @param {*} time
-     */
-    changeTime(time: number): string;
-    /**
-     * 设置时间，让这个时间点跳到中间红线处
-     *  @param {*} time 单位ms
-     */
-    set_time_to_middle(time: number): void;
-    /**
-     * 返回点击或者拖动的时间点
-     */
-    returnMouseupTime(callback: (time: number) => void): void;
-    /**
-     * 滚轮放大缩小，以时间轴中心为准 mousewheel事件
-     */
-    mousewheelFunc: (event: any) => void;
-    drawHourChange(hour: number): void;
-    /**
-     * 获取鼠标posx
-     * @param {*} e
-     */
-    get_cursor_x_position: (e: MouseEvent) => number;
-    /**
-     * 清除canvas 每次重新绘制需要先清除
-     */
-    clearCanvas(): void;
-}

package/es/ScreenPlayer/TimeSlider.js

@@ -1,556 +0,0 @@
-import _nextTick from "@cloud-app-dev/utils/es/nextTick";
-
-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 hours = [1, 6, 12, 24];
-var currentColor = '#FF000A';
-var normalLineColor = '#ffffff';
-var hoverLineColor = '#319BFF';
-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); // const px_per_ms = this.canvansW / (this.hours_per_ruler * 60 * 60 * 1000); // px/ms
-        // const current_timestamp = this.start_timestamp + pos_x / px_per_ms;
-
-
-        var ms_per_px = _this.hours_per_ruler * 3600 * 1000 / _this.canvansW; // ms/px
-
-        var current_timestamp = _this.start_timestamp + pos_x * ms_per_px;
-
-        _this.clearCanvas();
-
-        _this.init(_this.start_timestamp, _this.timecell, true);
-
-        _this.drawLine(pos_x, 20, pos_x, _this.canVansH, hoverLineColor, 1);
-
-        _this.ctx.fillStyle = hoverLineColor;
-        _this.ctx.font = '10px Arial';
-
-        _this.ctx.fillText(_this.changeTime(current_timestamp), pos_x - 50, 12);
-      }
-    };
-    /**
-     * 点击 mouseup事件
-     */
-
-
-    this.mouseupFunc = function (e) {
-      var _a, _b;
-
-      if (!_this.g_isMousemove) {
-        // click 事件
-        _this.g_isMousedown = false;
-
-        var pos_x = _this.get_cursor_x_position(e); //鼠标距离 px
-
-
-        var ms_per_px = _this.hours_per_ruler * 3600 * 1000 / _this.canvansW; // ms/px
-
-        var current_timestamp = _this.start_timestamp + pos_x * ms_per_px;
-
-        var timecellItem = _this.timecell.find(function (v) {
-          return current_timestamp >= v.beginTime && current_timestamp < v.endTime;
-        }); // 当前片段没有录像的时候
-
-
-        var outTimeline = timecellItem && !timecellItem.url;
-        _this.current_timestamp = current_timestamp;
-
-        _this.set_time_to_middle(_this.current_timestamp);
-
-        (_b = (_a = _this.options).onTimeChange) === null || _b === void 0 ? void 0 : _b.call(_a, current_timestamp, outTimeline);
-      }
-    };
-    /**
-     * 拖动停止 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) {
-        // 缩小
-        var index = hours.indexOf(_this.zoom);
-
-        if (index === hours.length - 1) {
-          _this.zoom = hours[index];
-        } else {
-          _this.zoom = hours[index + 1];
-        }
-
-        _this.hours_per_ruler = _this.zoom;
-      } else if (delta > 0) {
-        // 放大
-        var _index = hours.indexOf(_this.zoom);
-
-        if (_index === 0) {
-          _this.zoom = hours[0];
-        } else {
-          _this.zoom = hours[_index - 1];
-        }
-
-        _this.hours_per_ruler = _this.zoom;
-      }
-
-      _nextTick(function () {
-        var _a, _b;
-
-        return (_b = (_a = _this.options).onHoursPerChange) === null || _b === void 0 ? void 0 : _b.call(_a, _this.hours_per_ruler);
-      });
-
-      _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.zoom = 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 = '#ffffff';
-      this.ctx.font = '12px Arial';
-      this.ctx.fillText(this.changeTime(time), left - 64, 14);
-      this.drawLine(left, 20, left, this.canVansH, 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 = 10;
-          var big_date = this.graduation_title(date);
-          this.ctx.fillStyle = normalLineColor;
-          this.ctx.font = '10px Arial';
-          this.ctx.fillText(big_date, graduation_left - 12, 30);
-        } else if (graduation_time / (60 * 1000) % medium_step === 0) {
-          lineH = 10;
-          var middle_date = this.graduation_title(date);
-          this.ctx.fillStyle = normalLineColor;
-          this.ctx.font = '10px Arial';
-          this.ctx.fillText(middle_date, graduation_left - (middle_date.length > 5 ? 24 : 12), 30);
-        } else {
-          lineH = 5;
-        }
-
-        this.drawLine(graduation_left, this.canVansH - lineH, graduation_left, this.canVansH, normalLineColor, 2);
-      }
-    }
-  }, {
-    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 : '#242C3D';
-      this.ctx.fillRect(beginX, this.canVansH - 10, cell_width + 1, this.canVansH);
-    }
-    /**·
-     * 时间轴事件
-     */
-
-  }, {
-    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); //hover 提示当前刻度时间
-
-      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.clearCanvas();
-      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);
-        }
-      }
-    }
-  }, {
-    key: "drawHourChange",
-    value: function drawHourChange(hour) {
-      var middle_time = this.start_timestamp + this.hours_per_ruler * 3600 * 1000 / 2; //ms 记住当前中间的时间
-
-      this.hours_per_ruler = this.zoom = hour;
-      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);
-    }
-    /**
-     * 清除canvas 每次重新绘制需要先清除
-     */
-
-  }, {
-    key: "clearCanvas",
-    value: function clearCanvas() {
-      this.ctx.clearRect(0, 0, 1500, 150);
-    }
-  }]);
-
-  return TimeSlider;
-}();
-
-export { TimeSlider as default };