@vtx/player 0.0.10 → 0.0.13

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

@@ -0,0 +1,195 @@
+.vtx-history-control {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  background-color: #2b3d51;
+  background-image: url('../images/empty.png');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.vtx-history-control .bottom-controls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  background-color: #243241;
+}
+.vtx-history-control .collapse-controls {
+  position: absolute;
+  bottom: 32px;
+  width: 100%;
+  background-color: #131d27;
+}
+.vtx-history-control .collapse-controls .action-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  cursor: pointer;
+}
+.vtx-history-control .collapse-controls .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;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel {
+  position: relative;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-line-icon {
+  position: absolute;
+  top: -10px;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .segments {
+  position: relative;
+  height: 24px;
+  overflow: hidden;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .segments .timeline {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border: 0;
+  width: 1px;
+  background: #1890ff;
+  z-index: 1;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .segments .segment {
+  position: absolute;
+  height: 24px;
+  background-color: #bae7ff;
+  border-left: 1px solid #141414;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-axis {
+  position: relative;
+  width: 100%;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-axis .split-lines {
+  height: 30px;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-axis .split-lines::before {
+  position: absolute;
+  top: -1px;
+  width: 100%;
+  height: 1px;
+  content: '';
+  background-color: rgba(255, 255, 255, 0.65);
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-axis .split-lines .line {
+  position: absolute;
+  color: white;
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-axis .split-lines .line .number {
+  position: absolute;
+  color: rgba(255, 255, 255, 0.65);
+  -webkit-transform: translate(-50%, 6px);
+      -ms-transform: translate(-50%, 6px);
+          transform: translate(-50%, 6px);
+}
+.vtx-history-control .collapse-controls .collapse-panel-container .panels .time-panel .time-axis .split-lines .line::before {
+  position: absolute;
+  width: 1px;
+  height: 8px;
+  content: '';
+  background-color: rgba(255, 255, 255, 0.65);
+}
+.vtx-history-control .player-container {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 100%;
+  height: 0;
+  padding-bottom: 13px;
+}
+.history-url-table {
+  border-right: 1px solid #383838;
+  border-bottom: 1px solid #383838;
+}
+.history-url-table .ant-table {
+  background: var(--table-bg);
+}
+.history-url-table .ant-table .ant-table-container::before {
+  display: none;
+}
+.history-url-table .ant-table .ant-table-container::after {
+  display: none;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-header table {
+  border-collapse: collapse;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-header table 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;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-header table thead th::before {
+  display: none;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 5px;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.45);
+  border-radius: 5px;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.65);
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body table {
+  border-collapse: collapse;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body table 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;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body table tbody tr.active td {
+  background-color: #102641;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body table .play-btn {
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  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;
+}
+.history-url-table .ant-table .ant-table-container .ant-table-body table .play-btn.active {
+  color: #177ddc;
+  border-color: #177ddc;
+}

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

@@ -0,0 +1,2 @@
+import '../../controls/style';
+import './index.less';

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

@@ -0,0 +1,6 @@
+"use strict";
+
+require("../../controls/style");
+
+require("./index.less");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["history-control/style/index.js"],"sourcesContent":["import '../../controls/style';\nimport './index.less';\n"],"mappings":";;AAAA;;AACA"}

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

@@ -0,0 +1,219 @@
+.vtx-history-control {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #2b3d51;
+    background-image: url('../images/empty.png');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .bottom-controls {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 32px;
+        padding: 0 12px;
+        background-color: #243241;
+    }
+
+    .collapse-controls {
+        position: absolute;
+        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,.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 , .65);
+                            }
+
+                            .line {
+                                position: absolute;
+                                color: white;
+
+                                .number {
+                                    position: absolute;
+                                    color: rgba(255, 255 ,255 , .65);
+                                    transform: translate(-50%, 6px);
+                                }
+
+                                &::before {
+                                    position: absolute;
+                                    width: 1px;
+                                    height: 8px;
+                                    content: '';
+                                    background-color:rgba(255, 255 ,255 , .65);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .player-container {
+        flex-grow: 1;
+        width: 100%;
+        height: 0;
+        padding-bottom: 13px;
+    }
+}
+
+.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 , .85);
+                            white-space: no-wrap;
+                            background-color: rgba(255, 255 ,255 , .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 , .45);
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-corner {
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb:hover {
+                    background: rgba(255, 255 ,255 , .65);
+                }
+
+                table {
+                    border-collapse: collapse;
+
+                    tbody {
+                        tr {
+                            td {
+                                padding: 6px 8px;
+                                font-size: 14px;
+                                color: rgba(255, 255 ,255 , .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 , .65);
+                        background: rgba(255, 255 ,255 , .078);
+                        border: 1px solidrgba(255, 255 ,255 , .2);
+                        border-radius: 2px;
+
+                        &.active {
+                            color: #177ddc;
+                            border-color: #177ddc;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/{dist/types/components → lib}/history-player/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import './index.less';
-import { VideoType } from '@/components/player';
+import React from 'react';
+import { VideoType } from '../player';
 export declare type HistoryPlayerHandle = {
     /**
      * 跳转，目前仅支持海康视频跳转
@@ -26,6 +25,10 @@ interface VtxPlayerProps {
     controlBottom?: number;
     /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss speed:播放速率 */
     onTimeChange?: (time: string, speed: number) => void;
+    /** 是否展示信息 */
+    showInfo?: boolean | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /** 信息 */
+    info?: Array<Array<string>>;
 }
-export declare const HistoryPlayer: import("react").ForwardRefExoticComponent<VtxPlayerProps & import("react").RefAttributes<HistoryPlayerHandle>>;
+export declare const HistoryPlayer: React.ForwardRefExoticComponent<VtxPlayerProps & React.RefAttributes<HistoryPlayerHandle>>;
 export default HistoryPlayer;