@vtx/player 1.9.0 → 1.9.2

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

@@ -1,437 +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;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+.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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}