@cloud-app-dev/vidc 2.3.0 → 3.0.0

package/es/ScreenPlayer/RecordTools.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ExportPlayerType } from '../Player/player';
+import { PlayModeType } from '../PlayerExt';
+interface IToolsProps {
+    containerRef: React.MutableRefObject<HTMLDivElement>;
+    updateState: (state: {
+        screenNum?: number;
+        mode?: PlayModeType;
+    }) => void;
+    screenNum: number;
+    mode: PlayModeType;
+    getPlayerItem: () => ExportPlayerType | undefined;
+    fit?: string;
+    toggleFit?: () => void;
+}
+declare function RecordTools({ containerRef, updateState, screenNum, getPlayerItem, mode, fit, toggleFit }: IToolsProps): JSX.Element;
+export default RecordTools;

package/es/ScreenPlayer/RecordTools.js

@@ -0,0 +1,102 @@
+import _useFullscreen3 from "ahooks/es/useFullscreen";
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React from 'react';
+import { ScreenType } from './utils';
+
+function RecordTools(_ref) {
+  var containerRef = _ref.containerRef,
+      updateState = _ref.updateState,
+      screenNum = _ref.screenNum,
+      getPlayerItem = _ref.getPlayerItem,
+      mode = _ref.mode,
+      fit = _ref.fit,
+      toggleFit = _ref.toggleFit;
+
+  var _useFullscreen = _useFullscreen3(containerRef),
+      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+      isFullscreen = _useFullscreen2[0],
+      toggleFullscreen = _useFullscreen2[1].toggleFullscreen; // 播放状态控制
+
+
+  var playToggle = function playToggle() {
+    var player = getPlayerItem();
+    player ? player.video.paused ? player.api.play() : player.api.pause() : undefined;
+  }; // 重连
+
+
+  var reload = function reload() {
+    var player = getPlayerItem();
+    player ? player.reload ? player.reload() : player.api.reload() : undefined;
+  };
+
+  var snapshot = function snapshot() {
+    var player = getPlayerItem();
+    return player ? player.api.snapshot() : undefined;
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "player-tools"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "split-num"
+  }, ScreenType.map(function (item) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "".concat(item.name),
+      style: {
+        padding: 6
+      },
+      onClick: function onClick() {
+        return updateState({
+          screenNum: item.name
+        });
+      }
+    }, item.name);
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: toggleFullscreen
+  }, isFullscreen ? '退出' : '全屏'), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: function onClick() {
+      return updateState({
+        mode: mode === 1 ? 2 : 1
+      });
+    }
+  }, "\u5207\u6362", mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: playToggle
+  }, "\u64AD\u653E/\u6682\u505C"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: reload
+  }, "\u91CD\u8FDE"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: toggleFit
+  }, fit === 'fill' ? '自适应' : '填充'), /*#__PURE__*/React.createElement("span", {
+    style: {
+      padding: 6
+    },
+    onClick: snapshot
+  }, "\u622A\u56FE")));
+}
+
+export default RecordTools;

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ISegmentType } from '../Player/player';
+interface ISegmentTimeLineProps {
+    begin?: number;
+    timeCell?: ISegmentType[];
+    onTimeChange?: (time: number) => void;
+    disabled?: boolean;
+}
+declare function SegmentTimeLine({ begin, timeCell, disabled, onTimeChange }: ISegmentTimeLineProps): JSX.Element;
+export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -0,0 +1,40 @@
+import _useThrottleFn2 from "ahooks/es/useThrottleFn";
+import _useSize from "ahooks/es/useSize";
+import React, { useEffect, useRef } from 'react';
+import TimeSlider from './TimeSlider';
+
+function SegmentTimeLine(_ref) {
+  var begin = _ref.begin,
+      timeCell = _ref.timeCell,
+      disabled = _ref.disabled,
+      onTimeChange = _ref.onTimeChange;
+  var ref = useRef();
+
+  var size = _useSize(ref);
+
+  var _useThrottleFn = _useThrottleFn2(onTimeChange, {
+    wait: 300
+  }),
+      run = _useThrottleFn.run;
+
+  useEffect(function () {
+    var timeLine = new TimeSlider(ref.current, {
+      onTimeChange: run,
+      start_timestamp: begin ? begin - 12 * 3600 * 1000 : begin,
+      current_timestamp: begin,
+      timecell: timeCell
+    });
+    return function () {
+      return timeLine.destory();
+    };
+  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "record-time-line"
+  }, !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "time-line-mask"
+  }), /*#__PURE__*/React.createElement("canvas", {
+    ref: ref
+  }));
+}
+
+export default SegmentTimeLine;

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -0,0 +1,127 @@
+import { ISegmentType } from '../Player/player';
+export interface ITimeSliderOptions {
+    hours_per_ruler?: number;
+    start_timestamp?: number;
+    timecell?: TimeCellItem[];
+    current_timestamp?: number;
+    onTimeChange?: (time: 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;
+    /**
+     * 获取鼠标posx
+     * @param {*} e
+     */
+    get_cursor_x_position: (e: MouseEvent) => number;
+    /**
+     * 清除canvas 每次重新绘制需要先清除
+     */
+    clearCanvas(): void;
+}