@cloud-app-dev/vidc 3.0.18 → 3.0.20

package/es/Player/util.js

@@ -153,4 +153,11 @@ export function tryCatch(fn) {
     }, _callee, null, [[0, 5]]);
   }));
 }
-export var FMT = 'YYYY-MM-DD HH:mm:ss';
+export var FMT = 'YYYY-MM-DD HH:mm:ss';
+export function getDomStyleValue(dom, styleKey) {
+  if (!dom) {
+    return '';
+  }
+
+  return window.getComputedStyle(dom).getPropertyValue(styleKey);
+}

package/es/ScreenPlayer/LiveTools.js

@@ -18,6 +18,7 @@ import IconFont from '../Player/iconfont';
 import ScreenSelect from './ScreenSelect';
 import DisableMark from '../DisableMark';
 import useFullscreen from '../useFullscreen';
+import Volume from '../Player/contraller_bar/volume';
 
 function LiveTools(_ref) {
   var containerRef = _ref.containerRef,
@@ -79,9 +80,8 @@ function LiveTools(_ref) {
     className: "player-tools-left"
   }, /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item"
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-volume-close",
-    title: "\u97F3\u91CF"
+  }, /*#__PURE__*/React.createElement(Volume, {
+    api: player === null || player === void 0 ? void 0 : player.api
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item"
   }, /*#__PURE__*/React.createElement(IconFont, {
@@ -102,12 +102,8 @@ function LiveTools(_ref) {
       });
     }
   }, /*#__PURE__*/React.createElement(IconFont, {
-    style: {
-      top: 2,
-      position: 'relative',
-      left: 1
-    },
     type: "lm-player-S_Device_shezhi",
+    className: "icon-chajian",
     title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
   })), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
@@ -116,13 +112,8 @@ function LiveTools(_ref) {
       marginRight: 6
     }
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-tingzhi",
-    title: "\u505C\u6B62",
-    style: {
-      fontSize: 14,
-      position: 'relative',
-      top: 1
-    }
+    type: "lm-player-close",
+    title: "\u5173\u95ED"
   })), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
   }, /*#__PURE__*/React.createElement("div", {
@@ -133,19 +124,8 @@ function LiveTools(_ref) {
     }
   }, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-Pause_Main",
-    title: "\u6682\u505C",
-    style: {
-      fontSize: 22,
-      position: 'relative',
-      top: -2
-    }
+    title: "\u6682\u505C"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    style: {
-      fontSize: 17,
-      position: 'relative',
-      left: 2,
-      top: 2
-    },
     type: "lm-player-bofang",
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {

package/es/ScreenPlayer/RecordTools.js

@@ -1,5 +1,7 @@
-import _useInterval from "ahooks/es/useInterval";
+import _useRafInterval from "ahooks/es/useRafInterval";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useUpdate from "ahooks/es/useUpdate";
+import _useToggle3 from "ahooks/es/useToggle";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -19,6 +21,7 @@ import ScreenSelect from './ScreenSelect';
 import TimeSelect from './TimeSelect';
 import TimeMode from './TimeMode';
 import useFullscreen from '../useFullscreen';
+import Volume from '../Player/contraller_bar/volume';
 
 function RecordTools(_ref) {
   var containerRef = _ref.containerRef,
@@ -43,6 +46,11 @@ function RecordTools(_ref) {
       isFullscreen = _useFullscreen2[0],
       toggleFullscreen = _useFullscreen2[1].toggleFullscreen;
 
+  var _useToggle = _useToggle3(false),
+      _useToggle2 = _slicedToArray(_useToggle, 2),
+      isFpsPlay = _useToggle2[0],
+      toggle = _useToggle2[1].toggle;
+
   var update = _useUpdate(); // 播放状态控制
 
 
@@ -66,11 +74,17 @@ function RecordTools(_ref) {
   };
 
   var player = getPlayerItem();
+
+  _useUpdateEffect(function () {
+    var player = getPlayerItem();
+    isFpsPlay ? player.api.openFpsPlay() : player.api.closeFpsPlay();
+  }, [isFpsPlay]);
   /**
    * 定时获取play状态
    */
 
-  _useInterval(function () {
+
+  _useRafInterval(function () {
     return update();
   }, 2000);
 
@@ -80,9 +94,8 @@ function RecordTools(_ref) {
     className: "player-tools-left"
   }, /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item"
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-volume-close",
-    title: "\u97F3\u91CF"
+  }, /*#__PURE__*/React.createElement(Volume, {
+    api: player === null || player === void 0 ? void 0 : player.api
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item"
   }, /*#__PURE__*/React.createElement(IconFont, {
@@ -109,13 +122,21 @@ function RecordTools(_ref) {
       });
     }
   }, /*#__PURE__*/React.createElement(IconFont, {
-    style: {
-      top: 2,
-      position: 'relative',
-      left: 1
-    },
     type: "lm-player-S_Device_shezhi",
+    style: mode === 2 ? {
+      color: 'var(--primary)'
+    } : null,
+    className: "icon-chajian",
     title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "player-tools-item",
+    onClick: toggle
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-zhuzhenplay",
+    style: isFpsPlay ? {
+      color: 'var(--primary)'
+    } : null,
+    title: "\u9010\u5E27\u64AD\u653E"
   })), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
   }, /*#__PURE__*/React.createElement("div", {
@@ -140,12 +161,6 @@ function RecordTools(_ref) {
       fontSize: 22
     }
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    style: {
-      fontSize: 17,
-      position: 'relative',
-      left: 2,
-      top: 2
-    },
     type: "lm-player-bofang",
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {

package/es/ScreenPlayer/ScreenSelect.js

@@ -12,10 +12,10 @@ function ScreenSelect(_ref) {
     return ScreenType.find(function (v) {
       return v.name === screenNum;
     }).icon;
-  }, []);
+  }, [screenNum]);
   return /*#__PURE__*/React.createElement(CustomRenderSelect, {
     value: screenNum,
-    dropdownClassName: "custom-select-dropdown ",
+    popupClassName: "custom-select-dropdown ",
     customRender: function customRender() {
       return /*#__PURE__*/React.createElement("span", {
         className: "select-current-screen-item"

package/es/ScreenPlayer/TimeMode.js

@@ -10,7 +10,7 @@ function TimeMode(_ref) {
     value: timeMode,
     onChange: onChange,
     className: "time-mode-select",
-    dropdownClassName: "custom-select-dropdown",
+    popupClassName: "custom-select-dropdown",
     placement: "topLeft"
   }, TimeModeLibs.map(function (item) {
     return /*#__PURE__*/React.createElement(_Select.Option, {

package/es/ScreenPlayer/index.css

@@ -35,6 +35,12 @@
   color: var(--gray1);
   margin: 0 20px;
 }
+.split-screen-player-wrapper .icon-chajian {
+  position: relative;
+  top: 1px;
+  left: 1px;
+  font-size: 22px !important;
+}
 .split-screen-player-wrapper .player-tools {
   height: 42px;
   background-color: var(--gray12);
@@ -46,11 +52,13 @@
 }
 .split-screen-player-wrapper .player-tools .player-tools-left,
 .split-screen-player-wrapper .player-tools .player-tools-right {
-  min-width: 35%;
-  display: flex;
-  align-items: center;
+  width: 35%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 32px);
+  grid-gap: 10px;
 }
 .split-screen-player-wrapper .player-tools .player-tools-right {
+  display: flex;
   justify-content: flex-end;
   margin-right: 0;
   margin-left: 4px;
@@ -69,10 +77,10 @@
   width: 32px;
   height: 32px;
   color: var(--gray1);
-  text-align: center;
   cursor: pointer;
-  margin-right: 10px;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .split-screen-player-wrapper .player-tools .player-tools-item .lm-player-iconfont {
   font-size: 20px;
@@ -88,8 +96,9 @@
   color: var(--gray1);
   text-align: center;
   cursor: pointer;
-  margin-right: 6px;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .split-screen-player-wrapper .player-tools .select-current-screen-item .lm-player-iconfont {
   font-size: 20px;

package/es/ScreenPlayer/utils.js

@@ -2,22 +2,22 @@ export var ScreenType = [{
   name: 1,
   width: '100%',
   height: '100%',
-  icon: 'lm-player-fenping16'
+  icon: 'lm-player-fenping1'
 }, {
   name: 4,
   width: '50%',
   height: '50%',
-  icon: 'lm-player-fenping16'
+  icon: 'lm-player-fenping4'
 }, {
   name: 6,
   width: '33.33333333%',
   height: '50%',
-  icon: 'lm-player-fenping16'
+  icon: 'lm-player-fenping6'
 }, {
   name: 9,
   width: '33.33333333%',
   height: '33.33333333%',
-  icon: 'lm-player-fenping16'
+  icon: 'lm-player-fenping9'
 }, {
   name: 16,
   width: '25%',

package/icon-fix.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+
+function readFile(path) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(path, 'utf8', function (err, data) {
+      err ? reject(err) : resolve(data);
+    });
+  });
+}
+
+function writeFile(path, data) {
+  return new Promise((resolve, reject) => {
+    fs.writeFile(path, data, 'utf-8', function (err) {
+      err ? reject(err) : resolve();
+    });
+  });
+}
+
+async function run() {
+  try {
+    const url = path.resolve(__dirname, './src/Player/style/iconfont.js');
+    const str = await readFile(url);
+    const newStr = str.replace(/fill="\S+"/g, '');
+    await writeFile(url, newStr);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+run();

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.18",
+  "version": "3.0.20",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/es/Map/SinglePoint/Marker/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { MapPoint } from '../../interface';
-export interface IDragMarkerProps {
-    point: MapPoint;
-}
-declare function DragMarker({ point }: IDragMarkerProps): JSX.Element;
-export default DragMarker;

package/es/Map/SinglePoint/Marker/index.js

@@ -1,29 +0,0 @@
-import { mapContext } from '../../Context';
-import React, { useContext, useEffect } from 'react';
-import useMarker from '../../useMarker';
-import { createMapCenterIcon } from '../../icon';
-import useMapType from '../../hook/useMapType';
-
-function DragMarker(_ref) {
-  var point = _ref.point;
-
-  var _useContext = useContext(mapContext),
-      instance = _useContext.instance;
-
-  var type = useMapType();
-  var marker = useMarker({
-    map: instance.map,
-    center: type.leaflet ? [point.latitude, point.longitude] : [point.longitude, point.latitude],
-    createIcon: function createIcon() {
-      return createMapCenterIcon();
-    }
-  });
-  useEffect(function () {
-    if (!marker) {
-      return;
-    }
-  }, [marker]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
-}
-
-export default DragMarker;

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;
-}