@vtx/player 0.0.30 → 1.0.0

package/lib/history-control-v2/style/index.less

@@ -0,0 +1,437 @@
+.vtx-history-control-v2 {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .player-grid-container {
+        display: grid;
+        flex-grow: 1;
+        grid-gap: 1px;
+        height: 0;
+        background-color: rgba(0, 0, 0, 0.8);
+
+        &._1 {
+            grid-template-rows: 1fr;
+            grid-template-columns: 1fr;
+        }
+
+        &._4 {
+            grid-template-rows: 1fr 1fr;
+            grid-template-columns: 1fr 1fr;
+        }
+        &._9 {
+            grid-template-rows: 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+        &._16 {
+            grid-template-rows: 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+        &._25 {
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        }
+        &._6 {
+            grid-template-rows: 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 3;
+                grid-row-start: 1;
+                grid-row-end: 3;
+            }
+        }
+        &._8 {
+            grid-template-rows: 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 4;
+                grid-row-start: 1;
+                grid-row-end: 4;
+            }
+        }
+        &._10 {
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 3;
+                grid-row-start: 1;
+                grid-row-end: 4;
+            }
+        }
+        &._13 {
+            grid-template-rows: 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 3;
+                grid-row-start: 1;
+                grid-row-end: 3;
+            }
+        }
+        &._14 {
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 3;
+                grid-row-start: 1;
+                grid-row-end: 4;
+            }
+            :nth-child(2) {
+                grid-column-start: 3;
+                grid-column-end: 5;
+            }
+        }
+        &._17 {
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 4;
+                grid-row-start: 1;
+                grid-row-end: 4;
+            }
+        }
+        &._22 {
+            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            :nth-child(1) {
+                grid-column-start: 1;
+                grid-column-end: 3;
+                grid-row-start: 1;
+                grid-row-end: 3;
+            }
+        }
+        .grid-item-container {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            min-height: 0;
+            background-color: #2b3d51;
+            align-items: center;
+            &.emptyImg {
+                background-image: url('../images/empty.png');
+                background-repeat: no-repeat;
+                background-position: center;
+            }
+            &.active {
+                box-shadow: 0 0 0 1px #52c41a;
+            }
+            > .content {
+                width: 100%;
+                height: calc(100% - 26px);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+    .bottom-controls {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 33px;
+        padding: 0 12px;
+        background-color: #243241;
+        .right {
+            margin-left: auto;
+
+            > div {
+                height: 24px;
+            }
+        }
+        .split-line {
+            margin-top: 6px;
+            width: 1px;
+            background-color: rgba(255, 255, 255, 0.1);
+            height: 14px;
+        }
+        .controls-icon-hover {
+            color: rgba(255, 255, 255, 0.65);
+            display: flex;
+            align-items: center;
+            padding-top: 2px;
+            .hover-hide {
+                display: inline-block;
+                vertical-align: 0.1em;
+                font-size: 12px;
+            }
+            .hover-show {
+                display: none;
+                vertical-align: 0.1em;
+                font-size: 12px;
+            }
+            &:hover {
+                .hover-hide {
+                    display: none;
+                }
+                .hover-show {
+                    display: inline-block;
+                    color: #1890ff;
+                    vertical-align: 0.2em;
+                }
+            }
+        }
+    }
+
+    .collapse-controls {
+        bottom: 32px;
+        width: 100%;
+        background-color: #131d27;
+
+        .action-bar {
+            display: flex;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        .collapse-panel-container {
+            .panels {
+                padding: 12px 20px;
+                margin: 0 14px 14px;
+                background-color: #141414;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                border-radius: 2px;
+                .time-panel {
+                    position: relative;
+
+                    .time-line-icon {
+                        position: absolute;
+                        top: -10px;
+                    }
+
+                    .segments {
+                        position: relative;
+                        height: 24px;
+                        overflow: hidden;
+                        .timeline {
+                            position: absolute;
+                            top: 0;
+                            bottom: 0;
+                            border: 0;
+                            width: 1px;
+                            background: #1890ff;
+                            z-index: 1;
+                        }
+                        .segment {
+                            position: absolute;
+                            height: 24px;
+                            background-color: rgba(186, 231, 255, 1);
+                            border-left: 1px solid #141414;
+                        }
+                    }
+
+                    .time-axis {
+                        position: relative;
+                        width: 100%;
+
+                        .split-lines {
+                            height: 30px;
+
+                            &::before {
+                                position: absolute;
+                                top: -1px;
+                                width: 100%;
+                                height: 1px;
+                                content: '';
+                                background-color: rgba(255, 255, 255, 0.65);
+                            }
+
+                            .line {
+                                position: absolute;
+                                color: white;
+
+                                .number {
+                                    position: absolute;
+                                    color: rgba(255, 255, 255, 0.65);
+                                    transform: translate(-50%, 6px);
+                                }
+
+                                &::before {
+                                    position: absolute;
+                                    width: 1px;
+                                    height: 8px;
+                                    content: '';
+                                    background-color: rgba(255, 255, 255, 0.65);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .panels-left {
+                    width: 200px;
+                    color: #fff;
+                    .panels-left-title {
+                        padding: 0 5px;
+                        height: 39px;
+                        justify-content: start;
+                        align-items: center;
+                        display: flex;
+                        background-color: #242424;
+                    }
+                    .panels-left-wrap {
+                        height: 100px;
+                        overflow: auto;
+                        &::-webkit-scrollbar {
+                            width: 6px;
+                            height: 6px;
+                        }
+
+                        &::-webkit-scrollbar-track {
+                            background: transparent;
+                            border-radius: 5px;
+                        }
+
+                        &::-webkit-scrollbar-thumb {
+                            background: rgba(255, 255, 255, 0.45);
+                            border-radius: 5px;
+                        }
+
+                        &::-webkit-scrollbar-corner {
+                            background-color: transparent;
+                        }
+
+                        &::-webkit-scrollbar-thumb:hover {
+                            background: rgba(255, 255, 255, 0.65);
+                        }
+                    }
+                    .panels-left-content {
+                        line-height: 37px;
+                        height: 37px;
+                        padding: 0 5px;
+                        cursor: pointer;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        &:hover {
+                            background-color: #102641;
+                        }
+                    }
+                    .panels-left-content-active {
+                        background: #102641;
+                    }
+                }
+            }
+        }
+    }
+
+    .player-container {
+        flex-grow: 1;
+        width: 100%;
+        height: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .vtx-spin {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.history-url-table {
+    border-right: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+
+    .ant-table {
+        background: var(--table-bg);
+
+        .ant-table-container {
+            &::before {
+                display: none;
+            }
+
+            &::after {
+                display: none;
+            }
+
+            .ant-table-header {
+                table {
+                    border-collapse: collapse;
+
+                    thead {
+                        th {
+                            padding: 8px;
+                            color: rgba(255, 255, 255, 0.85);
+                            white-space: no-wrap;
+                            background-color: rgba(255, 255, 255, 0.07);
+                            border: 1px solid #383838;
+
+                            &::before {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .ant-table-body {
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(255, 255, 255, 0.45);
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-corner {
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb:hover {
+                    background: rgba(255, 255, 255, 0.65);
+                }
+
+                table {
+                    border-collapse: collapse;
+
+                    tbody {
+                        tr {
+                            td {
+                                padding: 6px 8px;
+                                font-size: 14px;
+                                color: rgba(255, 255, 255, 0.65);
+                                white-space: nowrap;
+                                background-color: transparent;
+                                border: 1px solid #383838;
+                            }
+
+                            &.active {
+                                td {
+                                    background-color: #102641;
+                                }
+                            }
+                        }
+                    }
+
+                    .play-btn {
+                        height: fit-content;
+                        padding: 0 8px;
+                        font-size: 14px;
+                        color: rgba(255, 255, 255, 0.65);
+                        background: rgba(255, 255, 255, 0.078);
+                        border: 1px solidrgba(255, 255, 255, 0.2);
+                        border-radius: 2px;
+
+                        &.active {
+                            color: #177ddc;
+                            border-color: #177ddc;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/lib/history-control-v2/utils.d.ts

@@ -0,0 +1,19 @@
+import { IChannel, IUrlsTableItemType } from './interface';
+import { GetHistoryUrlResp } from '../api/types';
+/** 默认播放器参数 */
+export declare const DEFAULT_PLAY_PARAMS: IChannel;
+export declare const DEFAULT_GRID = 1;
+export declare const DEFAULT_ACTIVE = 0;
+export declare const DEFAULT_CHANNELS: IChannel[];
+/**
+ * 获取历史回放表格数据
+ * @param data
+ * @returns
+ */
+export declare const getChannelData: (data: GetHistoryUrlResp, origin: any) => IChannel;
+/**
+ * 获取历史回放表格数据
+ * @param data
+ * @returns
+ */
+export declare const getUrlTableData: (data: GetHistoryUrlResp) => IUrlsTableItemType[];

package/lib/history-control-v2/utils.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUrlTableData = exports.getChannelData = exports.DEFAULT_PLAY_PARAMS = exports.DEFAULT_GRID = exports.DEFAULT_CHANNELS = exports.DEFAULT_ACTIVE = void 0;
+
+var _utils = require("../utils");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+/** 默认播放器参数 */
+var DEFAULT_PLAY_PARAMS = {
+  channelNum: '',
+  videoChannelId: '',
+  tagId: '',
+  index: -1,
+  url: '',
+  startTime: '',
+  endTime: '',
+  deviceId: '',
+  deviceName: '',
+  channelName: '',
+  tableList: [],
+  segmentData: {
+    list: []
+  }
+};
+exports.DEFAULT_PLAY_PARAMS = DEFAULT_PLAY_PARAMS;
+var DEFAULT_GRID = 1;
+exports.DEFAULT_GRID = DEFAULT_GRID;
+var DEFAULT_ACTIVE = 0;
+exports.DEFAULT_ACTIVE = DEFAULT_ACTIVE;
+
+var DEFAULT_CHANNELS = _toConsumableArray(Array(25)).map(function (item, index) {
+  return {
+    channelIndex: index,
+    // 通道号
+    channelNum: '',
+    // 用来判断在下面列表的位置
+    index: -1,
+    // 如果没有 就不播放
+    url: '',
+    segmentData: {
+      list: []
+    }
+  };
+});
+/**
+ * 获取历史回放表格数据
+ * @param data
+ * @returns
+ */
+
+
+exports.DEFAULT_CHANNELS = DEFAULT_CHANNELS;
+
+var getChannelData = function getChannelData(data, origin) {
+  var _a, _b, _c, _d, _e, _f;
+
+  var segmentData = {
+    list: data.list,
+    start: (0, _moment["default"])(origin === null || origin === void 0 ? void 0 : origin.beginTime).startOf('day'),
+    end: (0, _moment["default"])(origin === null || origin === void 0 ? void 0 : origin.endTime).endOf('day')
+  };
+  var result = {
+    deviceId: data.deviceId,
+    deviceName: data.deviceName,
+    channelNum: data.channelNum,
+    channelName: data.channelName,
+    tagId: (origin === null || origin === void 0 ? void 0 : origin.tagId) || '',
+    url: ((_b = (_a = data.list) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.playbackUrl) || data.totalTimeUrl,
+    videoChannelId: data.videoChannelId,
+    tableList: getUrlTableData(data),
+    segmentData: segmentData,
+    index: (origin === null || origin === void 0 ? void 0 : origin.tagId) ? -1 : 0,
+    startTime: ((_d = (_c = data.list) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.beginTime) || origin.beginTime,
+    endTime: ((_f = (_e = data.list) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.endTime) || origin.endTime,
+    hasLabel: data.hasLabel
+  };
+  return result;
+};
+/**
+ * 获取历史回放表格数据
+ * @param data
+ * @returns
+ */
+
+
+exports.getChannelData = getChannelData;
+
+var getUrlTableData = function getUrlTableData(data) {
+  var _a;
+
+  var result = (_a = data.list) === null || _a === void 0 ? void 0 : _a.map(function (item, i) {
+    var beginTime = (0, _moment["default"])(item.beginTime);
+    var endTime = (0, _moment["default"])(item.endTime);
+    var totalSeconds = (0, _moment["default"])(endTime).diff((0, _moment["default"])(beginTime), 'seconds');
+    return {
+      index: i + 1,
+      deviceId: data.deviceId,
+      channelName: data.channelName,
+      deviceName: data.deviceName,
+      channelNum: data.channelNum,
+      videoChannelId: data.videoChannelId,
+      beginTime: beginTime.format(_utils.TimeFormat.params),
+      endTime: endTime.format(_utils.TimeFormat.params),
+      size: (0, _utils.bytesToMegaBytes)(item.size),
+      duration: (0, _utils.secondsToString)(totalSeconds),
+      downloadUrl: '',
+      url: item.playbackUrl || data.url
+    };
+  });
+  return result || [];
+};
+
+exports.getUrlTableData = getUrlTableData;
+//# sourceMappingURL=utils.js.map

package/lib/history-control-v2/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["DEFAULT_PLAY_PARAMS","channelNum","videoChannelId","tagId","index","url","startTime","endTime","deviceId","deviceName","channelName","tableList","segmentData","list","DEFAULT_GRID","DEFAULT_ACTIVE","DEFAULT_CHANNELS","Array","map","item","channelIndex","getChannelData","data","origin","_a","_b","_c","_d","_e","_f","start","moment","beginTime","startOf","end","endOf","result","playbackUrl","totalTimeUrl","getUrlTableData","hasLabel","i","totalSeconds","diff","format","TimeFormat","params","size","bytesToMegaBytes","duration","secondsToString","downloadUrl"],"sources":["history-control-v2/utils.js"],"sourcesContent":["import { TimeFormat, bytesToMegaBytes, secondsToString } from '../utils';\nimport moment from 'moment';\n/** 默认播放器参数 */\nexport const DEFAULT_PLAY_PARAMS = {\n    channelNum: '',\n    videoChannelId: '',\n    tagId: '',\n    index: -1,\n    url: '',\n    startTime: '',\n    endTime: '',\n    deviceId: '',\n    deviceName: '',\n    channelName: '',\n    tableList: [],\n    segmentData: {\n        list: []\n    }\n};\nexport const DEFAULT_GRID = 1;\nexport const DEFAULT_ACTIVE = 0;\nexport const DEFAULT_CHANNELS = [...Array(25)].map((item, index) => {\n    return {\n        channelIndex: index,\n        // 通道号\n        channelNum: '',\n        // 用来判断在下面列表的位置\n        index: -1,\n        // 如果没有 就不播放\n        url: '',\n        segmentData: {\n            list: []\n        }\n    };\n});\n/**\n * 获取历史回放表格数据\n * @param data\n * @returns\n */\nexport const getChannelData = (data, origin) => {\n    var _a, _b, _c, _d, _e, _f;\n    const segmentData = {\n        list: data.list,\n        start: moment(origin === null || origin === void 0 ? void 0 : origin.beginTime).startOf('day'),\n        end: moment(origin === null || origin === void 0 ? void 0 : origin.endTime).endOf('day'),\n    };\n    const result = {\n        deviceId: data.deviceId,\n        deviceName: data.deviceName,\n        channelNum: data.channelNum,\n        channelName: data.channelName,\n        tagId: (origin === null || origin === void 0 ? void 0 : origin.tagId) || '',\n        url: ((_b = (_a = data.list) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.playbackUrl) || data.totalTimeUrl,\n        videoChannelId: data.videoChannelId,\n        tableList: getUrlTableData(data),\n        segmentData,\n        index: (origin === null || origin === void 0 ? void 0 : origin.tagId) ? -1 : 0,\n        startTime: ((_d = (_c = data.list) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.beginTime) || origin.beginTime,\n        endTime: ((_f = (_e = data.list) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.endTime) || origin.endTime,\n        hasLabel: data.hasLabel,\n    };\n    return result;\n};\n/**\n * 获取历史回放表格数据\n * @param data\n * @returns\n */\nexport const getUrlTableData = (data) => {\n    var _a;\n    const result = (_a = data.list) === null || _a === void 0 ? void 0 : _a.map((item, i) => {\n        const beginTime = moment(item.beginTime);\n        const endTime = moment(item.endTime);\n        const totalSeconds = moment(endTime).diff(moment(beginTime), 'seconds');\n        return {\n            index: i + 1,\n            deviceId: data.deviceId,\n            channelName: data.channelName,\n            deviceName: data.deviceName,\n            channelNum: data.channelNum,\n            videoChannelId: data.videoChannelId,\n            beginTime: beginTime.format(TimeFormat.params),\n            endTime: endTime.format(TimeFormat.params),\n            size: bytesToMegaBytes(item.size),\n            duration: secondsToString(totalSeconds),\n            downloadUrl: '',\n            url: item.playbackUrl || data.url,\n        };\n    });\n    return result || [];\n};\n"],"mappings":"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"}

package/lib/history-player/index.d.ts

@@ -12,11 +12,11 @@ interface VtxPlayerProps {
     /** 视频流格式，如果为空则根据url自行判断 */
     type?: VideoType;
     /** 是否使用代理播放 */
-    enableAgent: boolean;
+    enableAgent?: boolean;
     /** 开始时间，格式为：YYYY-MM-DD HH:mm:ss */
-    startTime: string;
+    startTime: string | number;
     /** 结束时间，格式为：YYYY-MM-DD HH:mm:ss  */
-    endTime: string;
+    endTime: string | number;
     /** 宽度 */
     width?: number;
     /** 高度 */
@@ -25,12 +25,20 @@ interface VtxPlayerProps {
     captureName?: string;
     /** 控制条bottom */
     controlBottom?: number;
+    /** 控制条显示 */
+    controlVisible?: boolean | undefined;
     /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss speed:播放速率 */
     onTimeChange?: (time: string, speed: number) => void;
+    /** 截图回调 */
+    screenshot?: (url: string) => void;
     /** 是否展示信息 */
     showInfo?: boolean | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     /** 信息 */
     info?: Array<Array<string>>;
+    /** 额外的按钮 */
+    extraButton?: React.ReactNode;
+    /** 当前播放的位置 默认为0 */
+    activeIndex?: number;
 }
 export declare const HistoryPlayer: React.ForwardRefExoticComponent<VtxPlayerProps & React.RefAttributes<HistoryPlayerHandle>>;
 export default HistoryPlayer;