@vtx/player 0.0.12 → 0.0.15

package/lib/controls/style/index.css

@@ -0,0 +1,185 @@
+.player-control-popover {
+  border-radius: 2px;
+}
+.player-control-popover .ant-popover-content {
+  background: rgba(0, 0, 0, 0.75);
+  -webkit-box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.15);
+}
+.player-control-popover .ant-popover-content .ant-popover-arrow-content {
+  background: rgba(0, 0, 0, 0.75);
+}
+.player-control-popover .ant-popover-content .ant-popover-arrow-content::before {
+  background: none;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner {
+  background: transparent;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
+  padding: 0;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .volume-content {
+  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;
+  width: 44px;
+  padding: 8px 0;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .volume-content .value {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.847);
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .volume-content .ant-slider-vertical {
+  height: 62px;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .volume-content .ant-slider-vertical .ant-slider-handle {
+  background-color: #1890ff;
+  border: solid 2px #1890ff;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .volume-content .ant-slider-vertical .ant-slider-track {
+  background-color: #1890ff;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .speed-content .item {
+  padding: 2px 10px;
+  color: rgba(255, 255, 255, 0.65);
+  cursor: pointer;
+}
+.player-control-popover .ant-popover-content .ant-popover-inner .ant-popover-inner-content .speed-content .item:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.vtx-player-speed-control {
+  line-height: 24px;
+  color: rgba(255, 255, 255, 0.65);
+  cursor: pointer;
+}
+.vtx-player-header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  height: 26px;
+  padding: 0 12px;
+  background-color: #131d27;
+}
+.vtx-player-header .title {
+  font-size: 14px;
+  color: white;
+}
+.vtx-player-header .close {
+  margin-left: auto;
+}
+.cloud-control-panel {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: calc(100% - 24px);
+}
+.cloud-control-panel .arrow {
+  position: absolute;
+  cursor: pointer;
+}
+.cloud-control-panel .arrow.up {
+  top: 16px;
+  left: 50%;
+  -webkit-transform: translateX(-50%) rotate(180deg);
+      -ms-transform: translateX(-50%) rotate(180deg);
+          transform: translateX(-50%) rotate(180deg);
+}
+.cloud-control-panel .arrow.down {
+  bottom: 16px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.cloud-control-panel .arrow.left {
+  top: 50%;
+  left: 16px;
+  -webkit-transform: translateY(-50%) rotate(90deg);
+      -ms-transform: translateY(-50%) rotate(90deg);
+          transform: translateY(-50%) rotate(90deg);
+}
+.cloud-control-panel .arrow.right {
+  top: 50%;
+  right: 16px;
+  -webkit-transform: translateY(-50%) rotate(-90deg);
+      -ms-transform: translateY(-50%) rotate(-90deg);
+          transform: translateY(-50%) rotate(-90deg);
+}
+.cloud-control-panel .arrow.left-up {
+  top: 16px;
+  left: 16px;
+  -webkit-transform: rotate(135deg);
+      -ms-transform: rotate(135deg);
+          transform: rotate(135deg);
+}
+.cloud-control-panel .arrow.left-down {
+  bottom: 16px;
+  left: 16px;
+  -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.cloud-control-panel .arrow.right-up {
+  top: 16px;
+  right: 16px;
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.cloud-control-panel .arrow.right-down {
+  right: 16px;
+  bottom: 16px;
+  -webkit-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+.cloud-control-panel .buttons {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.cloud-control-panel .buttons .control-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 32px;
+  line-height: 32px;
+  color: white;
+  cursor: default;
+  background-color: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+}
+.cloud-control-panel .buttons .control-button > span {
+  height: 100%;
+  padding: 0 8px;
+}
+.cloud-control-panel .buttons .control-button .text {
+  height: 100%;
+  padding: 0 8px;
+  white-space: nowrap;
+  border-right: 1px solid rgba(0, 0, 0, 0.15);
+  border-left: 1px solid rgba(0, 0, 0, 0.15);
+}
+.cloud-control-panel .buttons .control-button .icon {
+  padding: 0 12px;
+  cursor: pointer;
+}
+.infoPanel {
+  position: absolute;
+  color: red;
+}

package/lib/controls/style/index.d.ts

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

package/lib/controls/style/index.js

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

package/lib/controls/style/index.js.map

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

package/lib/controls/style/index.less

@@ -0,0 +1,187 @@
+.player-control-popover {
+    border-radius: 2px;
+
+    .ant-popover-content {
+        background: rgba(0 ,0 ,0 ,.75);
+        box-shadow: 0 2px 8px 1px rgba(0, 0, 0, .15);
+
+        .ant-popover-arrow-content {
+            background: rgba(0 ,0 ,0 ,.75);
+
+            &::before {
+                background: none;
+            }
+        }
+
+        .ant-popover-inner {
+            background: transparent;
+
+            .ant-popover-inner-content {
+                padding: 0;
+
+                .volume-content {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    width: 44px;
+                    padding: 8px 0;
+
+                    .value {
+                        font-size: 14px;
+                        color: rgba(255, 255 ,255 , .847);
+                    }
+
+                    .ant-slider-vertical {
+                        height: 62px;
+
+                        .ant-slider-handle {
+                            background-color: #1890ff;
+                            border: solid 2px #1890ff;
+                        }
+
+                        .ant-slider-track {
+                            background-color: #1890ff;
+                        }
+                    }
+                }
+
+                .speed-content {
+                    .item {
+                        padding: 2px 10px;
+                        color: rgba(255, 255, 255, .65);
+                        cursor: pointer;
+
+                        &:hover {
+                            background-color: rgba(255 ,255 ,255,.25);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.vtx-player-speed-control {
+    line-height: 24px;
+    color: rgba(255, 255, 255 ,.65);
+    cursor: pointer;
+}
+
+.vtx-player-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 26px;
+    padding: 0 12px;
+    background-color: #131d27;
+
+    .title {
+        font-size: 14px;
+        color: white;
+    }
+
+    .close {
+        margin-left: auto;
+    }
+}
+
+.cloud-control-panel {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: calc(100% - 24px);
+
+    .arrow {
+        position: absolute;
+        cursor: pointer;
+
+        &.up {
+            top: 16px;
+            left: 50%;
+            transform: translateX(-50%) rotate(180deg);
+        }
+
+        &.down {
+            bottom: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        &.left {
+            top: 50%;
+            left: 16px;
+            transform: translateY(-50%) rotate(90deg);
+        }
+
+        &.right {
+            top: 50%;
+            right: 16px;
+            transform: translateY(-50%) rotate(-90deg);
+        }
+
+        &.left-up {
+            top: 16px;
+            left: 16px;
+            transform: rotate(135deg);
+        }
+
+        &.left-down {
+            bottom: 16px;
+            left: 16px;
+            transform: rotate(45deg);
+        }
+
+        &.right-up {
+            top: 16px;
+            right: 16px;
+            transform: rotate(90deg);
+        }
+
+        &.right-down {
+            right: 16px;
+            bottom: 16px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    .buttons {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .control-button {
+            display: flex;
+            height: 32px;
+            line-height: 32px;
+            color: white;
+            cursor: default;
+            background-color: rgba(0 ,0 ,0,.35);
+            border: 1px solid rgba(0, 0 ,0 ,.15);
+            border-radius: 2px;
+
+            > span {
+                height: 100%;
+                padding: 0 8px;
+            }
+
+            .text {
+                height: 100%;
+                padding: 0 8px;
+                white-space: nowrap;
+                border-right: 1px solid rgba(0, 0 ,0 ,.15);
+                border-left: 1px solid rgba(0, 0 ,0 ,.15);
+            }
+
+            .icon {
+                padding: 0 12px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+.infoPanel {
+    position: absolute;
+    color: red;
+}

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import './index.less';
-import { GetHistoryUrlParams } from '@/api/types';
+import { GetHistoryUrlParams } from '../api/types';
 export declare type HistoryControlHandle = {
     load: (channel: GetHistoryUrlParams) => void;
 };
@@ -13,6 +12,10 @@ interface HistoryControlProps {
     onExpandChange?: (expand: boolean) => void;
     /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss */
     onTimeChange?: (time: string) => void;
+    /** 是否展示信息 */
+    showInfo?: boolean | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /** 信息 */
+    info?: Array<Array<string>>;
 }
 /**
  * 历史视频控制器