@vtx/player 1.3.11 → 1.4.0

package/lib/bill-player/style/index.less

@@ -1,31 +1,30 @@
-
 .bill-dark {
     .ant-tabs-tab-btn {
-        color: rgba(255,255,255,0.65);
+        color: rgba(255, 255, 255, 0.65);
     }
     .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-        color: #95FFF9;
+        color: #95fff9;
     }
     .ant-tabs-ink-bar {
-        background: #95FFF9;
+        background: #95fff9;
     }
     .control-container {
-        background: rgba(0,59,64,0.3);
+        background: rgba(0, 59, 64, 0.3);
         border-radius: 2px 2px 2px 2px;
-        border: 1px solid rgba(255,255,255,0.2);
+        border: 1px solid rgba(255, 255, 255, 0.2);
 
         .header {
             color: #fff;
-            border: 1px solid rgba(255,255,255,0.2);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .list {
             .ant-checkbox-wrapper {
-                color: #95FFF9;
+                color: #95fff9;
             }
             .ant-checkbox-checked .ant-checkbox-inner {
-                background-color: #95FFF9;
-                border-color: #95FFF9;
+                background-color: #95fff9;
+                border-color: #95fff9;
             }
             .ant-checkbox-checked .ant-checkbox-inner::after {
                 border-color: #000;
@@ -34,60 +33,163 @@
 
         .form {
             .ant-form-item-label > label {
-                color: rgba(255,255,255,0.65);
+                color: rgba(255, 255, 255, 0.65);
             }
             .time-radio-group {
                 .ant-radio-wrapper {
-                    color: rgba(255,255,255,0.65);
+                    color: rgba(255, 255, 255, 0.65);
                 }
                 .ant-radio-checked .ant-radio-inner {
-                    border-color: #95FFF9;
+                    border-color: #95fff9;
                 }
                 .ant-radio-inner::after {
-                    background: #95FFF9;
+                    background: #95fff9;
                 }
             }
             .ant-picker {
                 background: transparent;
             }
             .ant-picker-input > input {
-                color: rgba(255,255,255,0.65);
+                color: rgba(255, 255, 255, 0.65);
             }
             .ant-picker-suffix {
-                color: rgba(255,255,255,0.65);
+                color: rgba(255, 255, 255, 0.65);
             }
-            .ant-picker:hover,.ant-picker-focused {
-                border-color: #95FFF9;
+            .ant-picker:hover,
+            .ant-picker-focused {
+                border-color: #95fff9;
             }
             .ant-select-selector {
                 background-color: transparent;
-                color: rgba(255,255,255,0.65);
+                color: rgba(255, 255, 255, 0.65);
             }
             .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
-                border-color: #95FFF9;
+                border-color: #95fff9;
             }
             .ant-btn-primary {
-                color: rgba(0,0,0,0.65);
-                border-color: #95FFF9;
-                background: #95FFF9;
+                color: rgba(0, 0, 0, 0.65);
+                border-color: #95fff9;
+                background: #95fff9;
             }
 
             // 日历面板
             .date-dark {
                 :global {
-
                 }
             }
             // 下拉
             .select-dark {
                 :global {
-
                 }
             }
         }
     }
 }
+.blue-body {
+    font-size: #fff;
+    height: 100%;
+    background: #02355b;
+}
+.bludColor {
+    background: linear-gradient(0deg, #2a55e9 0%, #0dbafe 100%) !important;
+    -webkit-background-clip: text !important;
+    color: transparent !important;
+}
+.blue {
+    .control-container {
+        background: rgba(3, 177, 252, 0.1) !important;
+        border-radius: 2px 2px 2px 2px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .header {
+            color: #fff;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
 
+        .list {
+            .ant-checkbox-wrapper {
+                color: #0d517c;
+            }
+            .ant-checkbox-checked .ant-checkbox-inner {
+                background-color: #0d517c;
+                border-color: #0d517c;
+            }
+            .ant-checkbox-checked .ant-checkbox-inner::after {
+                border-color: #000;
+            }
+            .ant-checkbox-inner::after {
+                border-color: #03b1fc !important;
+            }
+            .ant-checkbox-wrapper-checked {
+                span {
+                    .bludColor();
+                }
+                .ant-checkbox-inner {
+                    border: 1px solid #0faffb !important;
+                }
+            }
+        }
+
+        .form {
+            .ant-form-item-label > label {
+                color: rgba(255, 255, 255, 0.65);
+            }
+            .time-radio-group {
+                .ant-radio-wrapper {
+                    color: rgba(255, 255, 255, 0.65);
+                }
+                .ant-radio-checked .ant-radio-inner {
+                    border-color: #0d517c;
+                }
+                .ant-radio-inner::after {
+                    background: #0d517c;
+                }
+            }
+            .ant-picker {
+                background: transparent;
+            }
+            .ant-picker-input > input {
+                color: rgba(255, 255, 255, 0.65);
+            }
+            .ant-picker-suffix {
+                color: rgba(255, 255, 255, 0.65);
+            }
+            .ant-picker:hover,
+            .ant-picker-focused {
+                border-color: #0d517c;
+            }
+            .ant-select-selector {
+                background-color: transparent;
+                color: rgba(255, 255, 255, 0.65);
+            }
+            .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+                border-color: #0d517c;
+            }
+            .ant-btn-primary {
+                color: rgba(0, 0, 0, 0.65);
+                border-color: #0d517c;
+                background: #0d517c;
+            }
+
+            // 日历面板
+            .date-dark {
+                :global {
+                }
+            }
+            // 下拉
+            .select-dark {
+                :global {
+                }
+            }
+        }
+    }
+    .submit-button {
+        background: linear-gradient(0deg, #2a55e9, #0dbafe) !important;
+        border-radius: 4px;
+        border: none;
+        color: #fff !important;
+    }
+}
 
 .vtx-bill-player {
     .bill-tabs {
@@ -101,8 +203,39 @@
             }
         }
     }
-
-
+    .ridio-list {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .radio-head {
+            width: 100%;
+            padding: 12px;
+            background-color: rgba(255, 255, 255, 0.2);
+            margin-bottom: 12px;
+            .ant-radio-button-wrapper {
+                background-color: rgba(20, 64, 99, 0.4);
+                font-size: 14px;
+                color: #fff;
+            }
+            .ant-radio-button-checked {
+                border: 1px solid #fff;
+                background-image: linear-gradient(to bottom, #2661ea, #0faffb);
+            }
+            .ant-radio-button-wrapper-checked {
+                span {
+                    font-size: 14px;
+                    color: #fff;
+                }
+            }
+        }
+        .ridio-body {
+            width: 100%;
+            padding: 12px;
+            background-color: rgba(255, 255, 255, 0.2);
+            flex: 1;
+        }
+    }
 
     .player-panel {
         display: flex;
@@ -135,6 +268,9 @@
                 .ant-checkbox-wrapper {
                     margin-bottom: 12px;
                     margin-left: 0;
+                    span {
+                        color: #fff;
+                    }
                 }
             }
 
@@ -149,5 +285,4 @@
             }
         }
     }
-
 }

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

@@ -20,6 +20,8 @@ interface HistoryControlProps {
     info?: Array<Array<string>>;
     /** 是否暗色系 */
     isDark?: boolean;
+    /** 主题风格 */
+    theme?: 'blue' | string;
 }
 /**
  * 历史视频控制器

package/lib/history-control/index.js

@@ -84,7 +84,8 @@ var HistoryControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$info = props.info,
       info = _props$info === void 0 ? [] : _props$info,
       _props$isDark = props.isDark,
-      isDark = _props$isDark === void 0 ? false : _props$isDark;
+      isDark = _props$isDark === void 0 ? false : _props$isDark,
+      theme = props.theme;
   var segmentsRef = (0, _react.useRef)(null);
 
   var _useRequest = (0, _ahooks.useRequest)(_api.getHistoryUrl, {
@@ -348,7 +349,7 @@ var HistoryControl = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   console.log('showInfo', showInfo);
   console.log('info', info);
   return (0, _jsxRuntime.jsxs)("div", Object.assign({
-    className: "vtx-history-control".concat(isDark ? ' history-dark' : ''),
+    className: "vtx-history-control".concat(isDark ? ' history-dark' : '', " ").concat(theme),
     style: {
       width: width,
       height: height,

package/lib/history-control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DEFAULT_PLAY_PARAMS","index","url","enableAgent","startTime","endTime","channelNum","deviceId","deviceCode","deviceIp","devicePort","streamType","HistoryControl","forwardRef","props","ref","width","height","onExpandChange","onTimeChange","showInfo","onVideoClose","info","isDark","segmentsRef","useRef","useRequest","getHistoryUrl","manual","runAsync","loading","getPlaybackUrlSingle","GetHKV2Url","useCollapse","defaultExpanded","getCollapseProps","getToggleProps","isExpanded","useSetState","expand","name","tableData","segmentData","list","totalUrl","timeLinePosition","playParams","state","setState","useImperativeHandle","load","channel","JSON","stringify","useEffect","then","result","_a","_b","_c","_d","Array","isArray","getUrlTableData","start","moment","beginTime","startOf","end","endOf","map","item","Object","assign","deviceName","channelName","totalTimeUrl","params","hkType","code","tenantId","getUrlParam","data","playbackUrl","message","handleExpand","handleClose","undefined","columns","title","dataIndex","key","render","_","record","active","_jsx","Button","className","onClick","children","_jsxs","_Fragment","VideoCloseIcon","VideoPlayIcon","handleTimeChange","time","speed","progress","diff","getRef","current","console","log","style","backgroundColor","PlayerHeader","onClose","Spin","spinning","size","HistoryPlayer","controlBottom","length","src","collapseBtnImg","alt","transform","TimeVerticalLine","history","getSegments","TimePositionIcon","left","TimeLine","Table","dataSource","scroll","y","pagination","rowClassName","Space","align","Tooltip","FoldIcon","ExpandIcon","displayName","getSplitLines","step","i","element","push","total","itemStart","itemEnd","itemTotal","ONEDAY_MILL","mouse","useMouse","elementX","elementY","elementW","elementH","visible","percent","valueOf","format","TimeFormat","flag","playStart","playEnd","now","begin","playUrl"],"sources":["history-control/index.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport useCollapse from 'react-collapsed';\nimport { getHistoryUrl, getPlaybackUrlSingle } from '../api';\nimport { PlayerHeader } from '../controls';\nimport HistoryPlayer from '../history-player';\nimport { ExpandIcon, FoldIcon, TimePositionIcon, VideoCloseIcon, VideoPlayIcon } from '../icons';\nimport { TimeFormat, getUrlTableData, getUrlParam } from '../utils';\nimport { useMouse, useRequest, useSetState } from 'ahooks';\n// import { Button, Space, Table, Tooltip } from 'antd';\nimport Button from 'antd/lib/button';\nimport message from 'antd/lib/message';\nimport Space from 'antd/lib/space';\nimport Spin from 'antd/lib/spin';\nimport Table from 'antd/lib/table';\nimport Tooltip from 'antd/lib/tooltip';\nimport moment from 'moment';\nimport collapseBtnImg from './images/collapse.png';\n/** 默认播放器参数 */\nconst DEFAULT_PLAY_PARAMS = {\n    index: -1,\n    url: '',\n    enableAgent: false,\n    startTime: '',\n    endTime: '',\n    channelNum: '',\n    deviceId: '',\n    deviceCode: '',\n    deviceIp: '',\n    devicePort: '',\n    streamType: '0'\n};\n/**\n * 历史视频控制器\n */\nexport const HistoryControl = forwardRef((props, ref) => {\n    const { width = '100%', height = '100%', onExpandChange, onTimeChange, showInfo = false, onVideoClose, info = [], isDark = false } = props;\n    const segmentsRef = useRef(null);\n    const { runAsync, loading } = useRequest(getHistoryUrl, {\n        manual: true,\n    });\n    const { runAsync: GetHKV2Url } = useRequest(getPlaybackUrlSingle, {\n        manual: true,\n    });\n    const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({\n        defaultExpanded: true, // 默认展开\n    });\n    const [state, setState] = useSetState({\n        expand: true,\n        name: '',\n        tableData: [],\n        segmentData: { list: [] },\n        totalUrl: '',\n        timeLinePosition: -1,\n        playParams: DEFAULT_PLAY_PARAMS,\n    });\n    useImperativeHandle(ref, () => {\n        return {\n            load: (channel) => {\n                if (JSON.stringify(channel) !== JSON.stringify(state.channel)) {\n                    setState({ channel, timeLinePosition: -1 });\n                }\n            },\n        };\n    });\n    useEffect(() => {\n        if (state.channel) {\n            runAsync(state.channel).then((result) => {\n                var _a, _b, _c, _d;\n                // 如果没有list,只有url,则直接播放url\n                if (Array.isArray(result === null || result === void 0 ? void 0 : result.list)) {\n                    const tableData = getUrlTableData(result);\n                    const segmentData = {\n                        list: result.list,\n                        start: moment((_a = state.channel) === null || _a === void 0 ? void 0 : _a.beginTime).startOf('day'),\n                        end: moment((_b = state.channel) === null || _b === void 0 ? void 0 : _b.endTime).endOf('day'),\n                    };\n                    setState({\n                        tableData: tableData.map(item => (Object.assign(Object.assign({}, item), { enableAgent: result.enableAgent || false }))),\n                        segmentData,\n                        name: `${result.deviceName}-${result.channelName}`,\n                        totalUrl: result.totalTimeUrl,\n                    });\n                }\n                else if (result.totalTimeUrl) {\n                    const params = {\n                        tableData: [],\n                        segmentData: { list: [] },\n                        name: `${result.deviceName}-${result.channelName}`,\n                        totalUrl: result.totalTimeUrl,\n                        playParams: {\n                            index: 0,\n                            enableAgent: (result === null || result === void 0 ? void 0 : result.enableAgent) || false,\n                            url: result.totalTimeUrl,\n                            startTime: ((_c = state.channel) === null || _c === void 0 ? void 0 : _c.beginTime) || '',\n                            endTime: ((_d = state.channel) === null || _d === void 0 ? void 0 : _d.endTime) || '',\n                            channelNum: result.channelNum,\n                            deviceCode: result.deviceCode,\n                            deviceIp: result.deviceIp,\n                            deviceId: result.deviceId,\n                            devicePort: result.devicePort,\n                            streamType: result.streamType\n                        },\n                    };\n                    if (result.hkType === 'HK_CAR_CLOUD_V2') {\n                        GetHKV2Url({\n                            code: result.code,\n                            beginTime: result.beginTime,\n                            endTime: result.endTime,\n                            deviceId: result.deviceId,\n                            channelNum: result.channelNum,\n                            tenantId: getUrlParam('tenantId'),\n                        }).then((data) => {\n                            params.playParams.url = data.playbackUrl;\n                            setState(params);\n                        });\n                    }\n                    else {\n                        setState(params);\n                    }\n                }\n                else {\n                    message.info('未查询到视频');\n                    setState({\n                        tableData: [],\n                        segmentData: { list: [] },\n                        name: ``,\n                        playParams: DEFAULT_PLAY_PARAMS,\n                    });\n                }\n            });\n            return () => {\n                setState({\n                    tableData: [],\n                    segmentData: { list: [] },\n                    name: ``,\n                    playParams: DEFAULT_PLAY_PARAMS,\n                });\n            };\n        }\n    }, [state.channel]);\n    const handleExpand = () => {\n        onExpandChange && onExpandChange(!state.expand);\n        setState({ expand: !state.expand });\n    };\n    const handleClose = () => {\n        setState({ channel: undefined, timeLinePosition: -1 });\n        onVideoClose && onVideoClose();\n    };\n    const columns = [\n        {\n            title: '序号',\n            dataIndex: 'index',\n            width: 60,\n        },\n        {\n            title: '播放视频',\n            key: 'play',\n            width: 90,\n            render: (_, record, index) => {\n                const active = state.playParams.index === index;\n                return (_jsx(Button, Object.assign({ className: `play-btn ${active ? 'active' : ''}`, onClick: () => {\n                        if (active) {\n                            setState({\n                                playParams: DEFAULT_PLAY_PARAMS,\n                                timeLinePosition: -1,\n                            });\n                            onVideoClose && onVideoClose();\n                        }\n                        else {\n                            const url = record.url || state.totalUrl;\n                            const params = {\n                                index,\n                                url,\n                                enableAgent: record.enableAgent || false,\n                                startTime: record.beginTime,\n                                endTime: record.endTime,\n                                channelNum: record.channelNum,\n                                deviceCode: record.deviceCode,\n                                streamType: record.streamType,\n                                deviceIp: record.deviceIp,\n                                devicePort: record.devicePort,\n                                deviceId: record.deviceId\n                            };\n                            if (record.hkType === 'HK_CAR_CLOUD_V2') {\n                                GetHKV2Url({\n                                    code: record.code,\n                                    beginTime: record.beginTime,\n                                    endTime: record.endTime,\n                                    deviceId: record.deviceId,\n                                    channelNum: record.channelNum,\n                                    tenantId: getUrlParam('tenantId'),\n                                }).then((data) => {\n                                    setState({\n                                        playParams: Object.assign(Object.assign({}, params), { url: data.playbackUrl })\n                                    });\n                                });\n                            }\n                            else {\n                                setState({\n                                    playParams: params\n                                });\n                            }\n                        }\n                    } }, { children: active ? (_jsxs(_Fragment, { children: [_jsx(VideoCloseIcon, { active: true }), \"\\u5173\\u95ED\"] })) : (_jsxs(_Fragment, { children: [_jsx(VideoPlayIcon, {}), \"\\u64AD\\u653E\"] })) })));\n            },\n        },\n        // {\n        //     title: '设备名称',\n        //     dataIndex: 'deviceName',\n        // },\n        // {\n        //     title: '通道名称',\n        //     dataIndex: 'channelName',\n        // },\n        {\n            title: '开始时间',\n            dataIndex: 'beginTime',\n            width: 170,\n        },\n        {\n            title: '结束时间',\n            dataIndex: 'endTime',\n            width: 170,\n        },\n        {\n            title: '持续时间',\n            width: 120,\n            dataIndex: 'duration',\n        },\n        {\n            title: '视频大小',\n            width: 100,\n            dataIndex: 'size',\n        },\n    ];\n    const handleTimeChange = (time, speed) => {\n        var _a;\n        onTimeChange && onTimeChange(time, speed);\n        // 计算播放时间占起始时间当日的百分比\n        const progress = (moment(time).diff(moment((_a = state.channel) === null || _a === void 0 ? void 0 : _a.beginTime).startOf('day'), 'seconds') /\n            (24 * 60 * 60)) *\n            100;\n        setState({ timeLinePosition: progress });\n    };\n    const getRef = () => {\n        return segmentsRef.current;\n    };\n    console.log('state.playParams,', state.playParams);\n    console.log('isExpanded', isExpanded);\n    console.log('showInfo', showInfo);\n    console.log('info', info);\n    return (_jsxs(\"div\", Object.assign({ className: `vtx-history-control${isDark ? ' history-dark' : ''}`, style: { width, height, backgroundColor: isDark ? 'rgba(0,59,64,0.3)' : '#2b3d51' } }, { children: [state.name && _jsx(PlayerHeader, { name: state.name, onClose: handleClose }), _jsx(Spin, { spinning: loading, className: \"vtx-spin\", size: \"large\" }), _jsx(\"div\", Object.assign({ className: \"player-container\" }, { children: state.playParams.url && (_jsx(HistoryPlayer, Object.assign({}, state.playParams, { controlBottom: isExpanded ? 235 : 0, onTimeChange: handleTimeChange, showInfo: showInfo, info: info }))) })), state.tableData && state.tableData.length > 0 && (_jsxs(\"div\", Object.assign({ className: \"collapse-controls\" }, { children: [_jsx(\"div\", Object.assign({ className: \"action-bar\" }, getToggleProps({}), { children: _jsx(\"img\", { src: collapseBtnImg, alt: \"\", style: { transform: `rotate(${isExpanded ? 180 : 0}deg)` } }) })), _jsx(\"section\", Object.assign({ className: \"collapse-panel-container\" }, getCollapseProps(), { children: _jsxs(\"div\", Object.assign({ className: \"panels\" }, { children: [_jsxs(\"div\", Object.assign({ className: \"time-panel\" }, { children: [_jsxs(\"div\", Object.assign({ className: \"segments\", ref: segmentsRef }, { children: [_jsx(TimeVerticalLine, { getRef: getRef, history: state.segmentData, totalUrl: state.totalUrl, setState: setState }), getSegments(state.segmentData)] })), state.timeLinePosition >= 0 && (_jsx(TimePositionIcon, { className: \"time-line-icon\", style: { left: `${state.timeLinePosition}%` } })), _jsx(TimeLine, {})] })), _jsx(\"div\", Object.assign({ className: \"urls-panel\" }, { children: _jsx(Table, { className: \"history-url-table\", columns: columns, dataSource: state.tableData, scroll: { y: 100 }, pagination: false, rowClassName: (_, index) => index === state.playParams.index ? 'active' : '' }) }))] })) }))] }))), _jsx(\"div\", Object.assign({ className: \"bottom-controls\" }, { children: _jsx(Space, Object.assign({ className: \"left\", size: 12, align: \"center\" }, { children: onExpandChange && (_jsx(Tooltip, Object.assign({ title: state.expand ? '收起' : '展开' }, { children: _jsx(\"div\", Object.assign({ onClick: handleExpand }, { children: state.expand ? _jsx(FoldIcon, {}) : _jsx(ExpandIcon, {}) })) }))) })) }))] })));\n});\nHistoryControl.displayName = 'HistoryControl';\nconst TimeLine = () => {\n    const getSplitLines = () => {\n        const result = [];\n        const step = 100 / 24;\n        for (let i = 0; i < 25; i++) {\n            const element = (_jsx(\"div\", Object.assign({ className: \"line\", style: { left: `${step * i}%` } }, { children: _jsx(\"div\", Object.assign({ className: \"number\" }, { children: i >= 10 ? i : '0' + i })) }), i));\n            result.push(element);\n        }\n        return result;\n    };\n    return (_jsxs(\"div\", Object.assign({ className: \"time-axis\" }, { children: [_jsx(\"div\", { className: \"axis\" }), _jsx(\"div\", Object.assign({ className: \"split-lines\" }, { children: getSplitLines() }))] })));\n};\nconst getSegments = (props) => {\n    const { list, start, end } = props;\n    const startTime = moment(start);\n    const endTime = moment(end);\n    const total = endTime.diff(startTime, 'seconds'); // 总时间\n    const result = list.map((i) => {\n        const itemStart = moment(i.beginTime).diff(startTime, 'seconds') > 0 ? moment(i.beginTime) : startTime;\n        const itemEnd = moment(i.endTime);\n        const itemTotal = itemEnd.diff(itemStart, 'seconds'); // 分段总时间\n        const width = (itemTotal / total) * 100; // 分段时间占总时间百分比\n        const left = (itemStart.diff(startTime, 'seconds') / total) * 100; // 分段其实时间\n        return (_jsx(\"div\", { className: \"segment\", style: { width: `${width}%`, left: `${left < 0 ? 0 : left}%` } }, i.beginTime));\n    });\n    return result;\n};\nconst ONEDAY_MILL = 24 * 60 * 60 * 1000;\nconst TimeVerticalLine = ({ getRef, history, totalUrl, setState, }) => {\n    var _a;\n    const mouse = useMouse(getRef());\n    const { elementX, elementY, elementW, elementH } = mouse;\n    const visible = elementX >= 0 && elementY >= 0 && elementX <= elementW && elementY <= elementH;\n    // 计算elementX在整个宽度的占比，根据占比在一天中的比例算出具体时间，最后判断这个时间是否在某段视频中。在则显示提示时间。\n    const percent = elementX / elementW;\n    const time = moment(moment(history.start).valueOf() + percent * ONEDAY_MILL).format(TimeFormat.params);\n    let flag = false, url, playStart = -1, playEnd = -1, index = -1;\n    const now = moment(time).valueOf();\n    for (let i = 0; i < ((_a = history.list) === null || _a === void 0 ? void 0 : _a.length); i++) {\n        const begin = moment(history.list[i].beginTime).valueOf(), end = moment(history.list[i].endTime).valueOf();\n        if (now >= begin && now <= end) {\n            index = i;\n            url = history.list[i].playbackUrl;\n            playStart = now;\n            playEnd = end;\n            flag = true;\n            break;\n        }\n    }\n    const onClick = () => {\n        const playUrl = url || totalUrl;\n        setState({\n            playParams: {\n                index,\n                url: playUrl,\n                startTime: playStart,\n                endTime: playEnd,\n            },\n        });\n    };\n    return visible ? (flag ? (_jsx(Tooltip, Object.assign({ title: time }, { children: _jsx(\"div\", { className: \"timeline\", style: { left: elementX }, onClick: onClick }) }))) : (_jsx(\"div\", { className: \"timeline\", style: { left: elementX }, onClick: onClick }))) : (_jsx(_Fragment, {}));\n};\nexport default HistoryControl;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DEFAULT_PLAY_PARAMS","index","url","enableAgent","startTime","endTime","channelNum","deviceId","deviceCode","deviceIp","devicePort","streamType","HistoryControl","forwardRef","props","ref","width","height","onExpandChange","onTimeChange","showInfo","onVideoClose","info","isDark","theme","segmentsRef","useRef","useRequest","getHistoryUrl","manual","runAsync","loading","getPlaybackUrlSingle","GetHKV2Url","useCollapse","defaultExpanded","getCollapseProps","getToggleProps","isExpanded","useSetState","expand","name","tableData","segmentData","list","totalUrl","timeLinePosition","playParams","state","setState","useImperativeHandle","load","channel","JSON","stringify","useEffect","then","result","_a","_b","_c","_d","Array","isArray","getUrlTableData","start","moment","beginTime","startOf","end","endOf","map","item","Object","assign","deviceName","channelName","totalTimeUrl","params","hkType","code","tenantId","getUrlParam","data","playbackUrl","message","handleExpand","handleClose","undefined","columns","title","dataIndex","key","render","_","record","active","_jsx","Button","className","onClick","children","_jsxs","_Fragment","VideoCloseIcon","VideoPlayIcon","handleTimeChange","time","speed","progress","diff","getRef","current","console","log","style","backgroundColor","PlayerHeader","onClose","Spin","spinning","size","HistoryPlayer","controlBottom","length","src","collapseBtnImg","alt","transform","TimeVerticalLine","history","getSegments","TimePositionIcon","left","TimeLine","Table","dataSource","scroll","y","pagination","rowClassName","Space","align","Tooltip","FoldIcon","ExpandIcon","displayName","getSplitLines","step","i","element","push","total","itemStart","itemEnd","itemTotal","ONEDAY_MILL","mouse","useMouse","elementX","elementY","elementW","elementH","visible","percent","valueOf","format","TimeFormat","flag","playStart","playEnd","now","begin","playUrl"],"sources":["history-control/index.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport useCollapse from 'react-collapsed';\nimport { getHistoryUrl, getPlaybackUrlSingle } from '../api';\nimport { PlayerHeader } from '../controls';\nimport HistoryPlayer from '../history-player';\nimport { ExpandIcon, FoldIcon, TimePositionIcon, VideoCloseIcon, VideoPlayIcon } from '../icons';\nimport { TimeFormat, getUrlTableData, getUrlParam } from '../utils';\nimport { useMouse, useRequest, useSetState } from 'ahooks';\n// import { Button, Space, Table, Tooltip } from 'antd';\nimport Button from 'antd/lib/button';\nimport message from 'antd/lib/message';\nimport Space from 'antd/lib/space';\nimport Spin from 'antd/lib/spin';\nimport Table from 'antd/lib/table';\nimport Tooltip from 'antd/lib/tooltip';\nimport moment from 'moment';\nimport collapseBtnImg from './images/collapse.png';\n/** 默认播放器参数 */\nconst DEFAULT_PLAY_PARAMS = {\n    index: -1,\n    url: '',\n    enableAgent: false,\n    startTime: '',\n    endTime: '',\n    channelNum: '',\n    deviceId: '',\n    deviceCode: '',\n    deviceIp: '',\n    devicePort: '',\n    streamType: '0'\n};\n/**\n * 历史视频控制器\n */\nexport const HistoryControl = forwardRef((props, ref) => {\n    const { width = '100%', height = '100%', onExpandChange, onTimeChange, showInfo = false, onVideoClose, info = [], isDark = false, theme } = props;\n    const segmentsRef = useRef(null);\n    const { runAsync, loading } = useRequest(getHistoryUrl, {\n        manual: true,\n    });\n    const { runAsync: GetHKV2Url } = useRequest(getPlaybackUrlSingle, {\n        manual: true,\n    });\n    const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({\n        defaultExpanded: true, // 默认展开\n    });\n    const [state, setState] = useSetState({\n        expand: true,\n        name: '',\n        tableData: [],\n        segmentData: { list: [] },\n        totalUrl: '',\n        timeLinePosition: -1,\n        playParams: DEFAULT_PLAY_PARAMS,\n    });\n    useImperativeHandle(ref, () => {\n        return {\n            load: (channel) => {\n                if (JSON.stringify(channel) !== JSON.stringify(state.channel)) {\n                    setState({ channel, timeLinePosition: -1 });\n                }\n            },\n        };\n    });\n    useEffect(() => {\n        if (state.channel) {\n            runAsync(state.channel).then((result) => {\n                var _a, _b, _c, _d;\n                // 如果没有list,只有url,则直接播放url\n                if (Array.isArray(result === null || result === void 0 ? void 0 : result.list)) {\n                    const tableData = getUrlTableData(result);\n                    const segmentData = {\n                        list: result.list,\n                        start: moment((_a = state.channel) === null || _a === void 0 ? void 0 : _a.beginTime).startOf('day'),\n                        end: moment((_b = state.channel) === null || _b === void 0 ? void 0 : _b.endTime).endOf('day'),\n                    };\n                    setState({\n                        tableData: tableData.map(item => (Object.assign(Object.assign({}, item), { enableAgent: result.enableAgent || false }))),\n                        segmentData,\n                        name: `${result.deviceName}-${result.channelName}`,\n                        totalUrl: result.totalTimeUrl,\n                    });\n                }\n                else if (result.totalTimeUrl) {\n                    const params = {\n                        tableData: [],\n                        segmentData: { list: [] },\n                        name: `${result.deviceName}-${result.channelName}`,\n                        totalUrl: result.totalTimeUrl,\n                        playParams: {\n                            index: 0,\n                            enableAgent: (result === null || result === void 0 ? void 0 : result.enableAgent) || false,\n                            url: result.totalTimeUrl,\n                            startTime: ((_c = state.channel) === null || _c === void 0 ? void 0 : _c.beginTime) || '',\n                            endTime: ((_d = state.channel) === null || _d === void 0 ? void 0 : _d.endTime) || '',\n                            channelNum: result.channelNum,\n                            deviceCode: result.deviceCode,\n                            deviceIp: result.deviceIp,\n                            deviceId: result.deviceId,\n                            devicePort: result.devicePort,\n                            streamType: result.streamType\n                        },\n                    };\n                    if (result.hkType === 'HK_CAR_CLOUD_V2') {\n                        GetHKV2Url({\n                            code: result.code,\n                            beginTime: result.beginTime,\n                            endTime: result.endTime,\n                            deviceId: result.deviceId,\n                            channelNum: result.channelNum,\n                            tenantId: getUrlParam('tenantId'),\n                        }).then((data) => {\n                            params.playParams.url = data.playbackUrl;\n                            setState(params);\n                        });\n                    }\n                    else {\n                        setState(params);\n                    }\n                }\n                else {\n                    message.info('未查询到视频');\n                    setState({\n                        tableData: [],\n                        segmentData: { list: [] },\n                        name: ``,\n                        playParams: DEFAULT_PLAY_PARAMS,\n                    });\n                }\n            });\n            return () => {\n                setState({\n                    tableData: [],\n                    segmentData: { list: [] },\n                    name: ``,\n                    playParams: DEFAULT_PLAY_PARAMS,\n                });\n            };\n        }\n    }, [state.channel]);\n    const handleExpand = () => {\n        onExpandChange && onExpandChange(!state.expand);\n        setState({ expand: !state.expand });\n    };\n    const handleClose = () => {\n        setState({ channel: undefined, timeLinePosition: -1 });\n        onVideoClose && onVideoClose();\n    };\n    const columns = [\n        {\n            title: '序号',\n            dataIndex: 'index',\n            width: 60,\n        },\n        {\n            title: '播放视频',\n            key: 'play',\n            width: 90,\n            render: (_, record, index) => {\n                const active = state.playParams.index === index;\n                return (_jsx(Button, Object.assign({ className: `play-btn ${active ? 'active' : ''}`, onClick: () => {\n                        if (active) {\n                            setState({\n                                playParams: DEFAULT_PLAY_PARAMS,\n                                timeLinePosition: -1,\n                            });\n                            onVideoClose && onVideoClose();\n                        }\n                        else {\n                            const url = record.url || state.totalUrl;\n                            const params = {\n                                index,\n                                url,\n                                enableAgent: record.enableAgent || false,\n                                startTime: record.beginTime,\n                                endTime: record.endTime,\n                                channelNum: record.channelNum,\n                                deviceCode: record.deviceCode,\n                                streamType: record.streamType,\n                                deviceIp: record.deviceIp,\n                                devicePort: record.devicePort,\n                                deviceId: record.deviceId\n                            };\n                            if (record.hkType === 'HK_CAR_CLOUD_V2') {\n                                GetHKV2Url({\n                                    code: record.code,\n                                    beginTime: record.beginTime,\n                                    endTime: record.endTime,\n                                    deviceId: record.deviceId,\n                                    channelNum: record.channelNum,\n                                    tenantId: getUrlParam('tenantId'),\n                                }).then((data) => {\n                                    setState({\n                                        playParams: Object.assign(Object.assign({}, params), { url: data.playbackUrl })\n                                    });\n                                });\n                            }\n                            else {\n                                setState({\n                                    playParams: params\n                                });\n                            }\n                        }\n                    } }, { children: active ? (_jsxs(_Fragment, { children: [_jsx(VideoCloseIcon, { active: true }), \"\\u5173\\u95ED\"] })) : (_jsxs(_Fragment, { children: [_jsx(VideoPlayIcon, {}), \"\\u64AD\\u653E\"] })) })));\n            },\n        },\n        // {\n        //     title: '设备名称',\n        //     dataIndex: 'deviceName',\n        // },\n        // {\n        //     title: '通道名称',\n        //     dataIndex: 'channelName',\n        // },\n        {\n            title: '开始时间',\n            dataIndex: 'beginTime',\n            width: 170,\n        },\n        {\n            title: '结束时间',\n            dataIndex: 'endTime',\n            width: 170,\n        },\n        {\n            title: '持续时间',\n            width: 120,\n            dataIndex: 'duration',\n        },\n        {\n            title: '视频大小',\n            width: 100,\n            dataIndex: 'size',\n        },\n    ];\n    const handleTimeChange = (time, speed) => {\n        var _a;\n        onTimeChange && onTimeChange(time, speed);\n        // 计算播放时间占起始时间当日的百分比\n        const progress = (moment(time).diff(moment((_a = state.channel) === null || _a === void 0 ? void 0 : _a.beginTime).startOf('day'), 'seconds') /\n            (24 * 60 * 60)) *\n            100;\n        setState({ timeLinePosition: progress });\n    };\n    const getRef = () => {\n        return segmentsRef.current;\n    };\n    console.log('state.playParams,', state.playParams);\n    console.log('isExpanded', isExpanded);\n    console.log('showInfo', showInfo);\n    console.log('info', info);\n    return (_jsxs(\"div\", Object.assign({ className: `vtx-history-control${isDark ? ' history-dark' : ''} ${theme}`, style: { width, height, backgroundColor: isDark ? 'rgba(0,59,64,0.3)' : '#2b3d51' } }, { children: [state.name && _jsx(PlayerHeader, { name: state.name, onClose: handleClose }), _jsx(Spin, { spinning: loading, className: \"vtx-spin\", size: \"large\" }), _jsx(\"div\", Object.assign({ className: \"player-container\" }, { children: state.playParams.url && (_jsx(HistoryPlayer, Object.assign({}, state.playParams, { controlBottom: isExpanded ? 235 : 0, onTimeChange: handleTimeChange, showInfo: showInfo, info: info }))) })), state.tableData && state.tableData.length > 0 && (_jsxs(\"div\", Object.assign({ className: \"collapse-controls\" }, { children: [_jsx(\"div\", Object.assign({ className: \"action-bar\" }, getToggleProps({}), { children: _jsx(\"img\", { src: collapseBtnImg, alt: \"\", style: { transform: `rotate(${isExpanded ? 180 : 0}deg)` } }) })), _jsx(\"section\", Object.assign({ className: \"collapse-panel-container\" }, getCollapseProps(), { children: _jsxs(\"div\", Object.assign({ className: \"panels\" }, { children: [_jsxs(\"div\", Object.assign({ className: \"time-panel\" }, { children: [_jsxs(\"div\", Object.assign({ className: \"segments\", ref: segmentsRef }, { children: [_jsx(TimeVerticalLine, { getRef: getRef, history: state.segmentData, totalUrl: state.totalUrl, setState: setState }), getSegments(state.segmentData)] })), state.timeLinePosition >= 0 && (_jsx(TimePositionIcon, { className: \"time-line-icon\", style: { left: `${state.timeLinePosition}%` } })), _jsx(TimeLine, {})] })), _jsx(\"div\", Object.assign({ className: \"urls-panel\" }, { children: _jsx(Table, { className: \"history-url-table\", columns: columns, dataSource: state.tableData, scroll: { y: 100 }, pagination: false, rowClassName: (_, index) => index === state.playParams.index ? 'active' : '' }) }))] })) }))] }))), _jsx(\"div\", Object.assign({ className: \"bottom-controls\" }, { children: _jsx(Space, Object.assign({ className: \"left\", size: 12, align: \"center\" }, { children: onExpandChange && (_jsx(Tooltip, Object.assign({ title: state.expand ? '收起' : '展开' }, { children: _jsx(\"div\", Object.assign({ onClick: handleExpand }, { children: state.expand ? _jsx(FoldIcon, {}) : _jsx(ExpandIcon, {}) })) }))) })) }))] })));\n});\nHistoryControl.displayName = 'HistoryControl';\nconst TimeLine = () => {\n    const getSplitLines = () => {\n        const result = [];\n        const step = 100 / 24;\n        for (let i = 0; i < 25; i++) {\n            const element = (_jsx(\"div\", Object.assign({ className: \"line\", style: { left: `${step * i}%` } }, { children: _jsx(\"div\", Object.assign({ className: \"number\" }, { children: i >= 10 ? i : '0' + i })) }), i));\n            result.push(element);\n        }\n        return result;\n    };\n    return (_jsxs(\"div\", Object.assign({ className: \"time-axis\" }, { children: [_jsx(\"div\", { className: \"axis\" }), _jsx(\"div\", Object.assign({ className: \"split-lines\" }, { children: getSplitLines() }))] })));\n};\nconst getSegments = (props) => {\n    const { list, start, end } = props;\n    const startTime = moment(start);\n    const endTime = moment(end);\n    const total = endTime.diff(startTime, 'seconds'); // 总时间\n    const result = list.map((i) => {\n        const itemStart = moment(i.beginTime).diff(startTime, 'seconds') > 0 ? moment(i.beginTime) : startTime;\n        const itemEnd = moment(i.endTime);\n        const itemTotal = itemEnd.diff(itemStart, 'seconds'); // 分段总时间\n        const width = (itemTotal / total) * 100; // 分段时间占总时间百分比\n        const left = (itemStart.diff(startTime, 'seconds') / total) * 100; // 分段其实时间\n        return (_jsx(\"div\", { className: \"segment\", style: { width: `${width}%`, left: `${left < 0 ? 0 : left}%` } }, i.beginTime));\n    });\n    return result;\n};\nconst ONEDAY_MILL = 24 * 60 * 60 * 1000;\nconst TimeVerticalLine = ({ getRef, history, totalUrl, setState, }) => {\n    var _a;\n    const mouse = useMouse(getRef());\n    const { elementX, elementY, elementW, elementH } = mouse;\n    const visible = elementX >= 0 && elementY >= 0 && elementX <= elementW && elementY <= elementH;\n    // 计算elementX在整个宽度的占比，根据占比在一天中的比例算出具体时间，最后判断这个时间是否在某段视频中。在则显示提示时间。\n    const percent = elementX / elementW;\n    const time = moment(moment(history.start).valueOf() + percent * ONEDAY_MILL).format(TimeFormat.params);\n    let flag = false, url, playStart = -1, playEnd = -1, index = -1;\n    const now = moment(time).valueOf();\n    for (let i = 0; i < ((_a = history.list) === null || _a === void 0 ? void 0 : _a.length); i++) {\n        const begin = moment(history.list[i].beginTime).valueOf(), end = moment(history.list[i].endTime).valueOf();\n        if (now >= begin && now <= end) {\n            index = i;\n            url = history.list[i].playbackUrl;\n            playStart = now;\n            playEnd = end;\n            flag = true;\n            break;\n        }\n    }\n    const onClick = () => {\n        const playUrl = url || totalUrl;\n        setState({\n            playParams: {\n                index,\n                url: playUrl,\n                startTime: playStart,\n                endTime: playEnd,\n            },\n        });\n    };\n    return visible ? (flag ? (_jsx(Tooltip, Object.assign({ title: time }, { children: _jsx(\"div\", { className: \"timeline\", style: { left: elementX }, onClick: onClick }) }))) : (_jsx(\"div\", { className: \"timeline\", style: { left: elementX }, onClick: onClick }))) : (_jsx(_Fragment, {}));\n};\nexport default HistoryControl;\n"],"mappings":"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"}

package/lib/history-control/style/index.css

@@ -205,3 +205,18 @@
   color: #177ddc;
   border-color: #177ddc;
 }
+.blue .bottom-controls {
+  background: rgba(3, 177, 252, 0.1) !important;
+}
+.blue .vtx-history-control {
+  background: rgba(3, 177, 252, 0.1);
+}
+.blue .vtx-player-header {
+  background: rgba(3, 177, 252, 0.1);
+}
+.blue .collapse-controls {
+  background: #0e3656;
+}
+.blue .collapse-controls .panels {
+  background: rgba(3, 177, 252, 0.1) !important;
+}

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

@@ -1,6 +1,6 @@
 .history-dark {
     .bottom-controls {
-        background-color: rgba(0,59,64,0.3) !important;
+        background-color: rgba(0, 59, 64, 0.3) !important;
     }
 }
 
@@ -41,7 +41,7 @@
                 padding: 12px 20px;
                 margin: 0 14px 14px;
                 background-color: #141414;
-                border: 1px solid rgba(255 ,255, 255,.2);
+                border: 1px solid rgba(255, 255, 255, 0.2);
                 border-radius: 2px;
 
                 .time-panel {
@@ -68,7 +68,7 @@
                         .segment {
                             position: absolute;
                             height: 24px;
-                            background-color: rgba(186, 231, 255 , 1);
+                            background-color: rgba(186, 231, 255, 1);
                             border-left: 1px solid #141414;
                         }
                     }
@@ -86,7 +86,7 @@
                                 width: 100%;
                                 height: 1px;
                                 content: '';
-                                background-color: rgba(255, 255 ,255 , .65);
+                                background-color: rgba(255, 255, 255, 0.65);
                             }
 
                             .line {
@@ -95,7 +95,7 @@
 
                                 .number {
                                     position: absolute;
-                                    color: rgba(255, 255 ,255 , .65);
+                                    color: rgba(255, 255, 255, 0.65);
                                     transform: translate(-50%, 6px);
                                 }
 
@@ -104,7 +104,7 @@
                                     width: 1px;
                                     height: 8px;
                                     content: '';
-                                    background-color:rgba(255, 255 ,255 , .65);
+                                    background-color: rgba(255, 255, 255, 0.65);
                                 }
                             }
                         }
@@ -152,9 +152,9 @@
                     thead {
                         th {
                             padding: 8px;
-                            color: rgba(255, 255 ,255 , .85);
+                            color: rgba(255, 255, 255, 0.85);
                             white-space: no-wrap;
-                            background-color: rgba(255, 255 ,255 , .07);
+                            background-color: rgba(255, 255, 255, 0.07);
                             border: 1px solid #383838;
 
                             &::before {
@@ -177,7 +177,7 @@
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    background:rgba(255, 255 ,255 , .45);
+                    background: rgba(255, 255, 255, 0.45);
                     border-radius: 5px;
                 }
 
@@ -186,7 +186,7 @@
                 }
 
                 &::-webkit-scrollbar-thumb:hover {
-                    background: rgba(255, 255 ,255 , .65);
+                    background: rgba(255, 255, 255, 0.65);
                 }
 
                 table {
@@ -197,7 +197,7 @@
                             td {
                                 padding: 6px 8px;
                                 font-size: 14px;
-                                color: rgba(255, 255 ,255 , .65);
+                                color: rgba(255, 255, 255, 0.65);
                                 white-space: nowrap;
                                 background-color: transparent;
                                 border: 1px solid #383838;
@@ -215,9 +215,9 @@
                         height: fit-content;
                         padding: 0 8px;
                         font-size: 14px;
-                        color: rgba(255, 255 ,255 , .65);
-                        background: rgba(255, 255 ,255 , .078);
-                        border: 1px solidrgba(255, 255 ,255 , .2);
+                        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 {
@@ -230,3 +230,21 @@
         }
     }
 }
+.blue {
+    .bottom-controls {
+        background: rgba(3, 177, 252, 0.1) !important;
+        // background-color: red !important;
+    }
+    .vtx-history-control {
+        background: rgba(3, 177, 252, 0.1);
+    }
+    .vtx-player-header {
+        background: rgba(3, 177, 252, 0.1);
+    }
+    .collapse-controls {
+        background: #0e3656;
+        .panels {
+            background: rgba(3, 177, 252, 0.1) !important;
+        }
+    }
+}