@vtx/player 0.0.15 → 0.0.18

package/lib/live-player/demo/src/components/lib/vtx-form-layout/style/index.css

@@ -0,0 +1,224 @@
+.vtx-form-layout {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  width: 100%;
+  padding: 0 24px;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-item .ant-form-item-label {
+  text-overflow: ellipsis;
+}
+.vtx-form-layout .vtx-form-item .ant-form-item-label label::after {
+  content: '';
+}
+.vtx-form-layout .vtx-form-item-vertical {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-label,
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-control {
+  line-height: 1.5715;
+}
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-label {
+  margin-bottom: 8px;
+  padding: 0 !important;
+  white-space: initial;
+  text-align: left;
+}
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-label label {
+  height: auto;
+}
+.vtx-form-layout .vtx-form-item .ant-form-item-explain {
+  font-size: 12px;
+}
+.vtx-form-layout .vtx-form-item--inline {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  margin-right: 16px;
+  margin-bottom: 16px !important;
+  row-gap: 0;
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-control-input {
+  min-height: auto;
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-label {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  margin-bottom: 0;
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-label > label {
+  height: auto;
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-label label::after {
+  content: ':';
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-label,
+.vtx-form-layout .vtx-form-item--view .ant-form-item-control {
+  line-height: 1.5715;
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-label > label {
+  height: auto;
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-label label::after {
+  content: ':';
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-control {
+  color: rgba(0, 0, 0, 0.85);
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-control .ant-form-item-control-input {
+  min-height: auto;
+}
+.vtx-form-layout .vtx-form-item-col .ant-form-item {
+  margin-bottom: 20px;
+}
+.vtx-form-layout .vtx-form-item-col .vtx-form-item--view {
+  margin-bottom: 0;
+}
+.vtx-form-layout .vtx-form-item-col .ant-form-item-with-help {
+  margin-bottom: 0;
+}
+.vtx-form-layout .vtx-form-item-col .ant-form-item-explain {
+  min-height: 20px;
+}
+.vtx-form-layout .vtx-form-card {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-card-expand-icon {
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.24s, -webkit-transform 0.24s;
+}
+.vtx-form-layout .vtx-form-card .ant-card-body {
+  padding: 0;
+}
+.vtx-form-layout .vtx-form-card .ant-card-head-wrapper,
+.vtx-form-layout .vtx-form-card .ant-card-head-title {
+  line-height: 1;
+}
+.vtx-form-layout .vtx-form-card-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  padding: 20px 24px;
+  padding-bottom: 0;
+}
+.vtx-form-layout .vtx-form-card-content::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-card-content::before,
+.vtx-form-layout .vtx-form-card-content::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-card-content-hide {
+  display: none;
+}
+.vtx-form-layout .vtx-form-card + .vtx-form-card {
+  margin-top: 20px;
+}
+.vtx-form-layout .vtx-form-pane {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+}
+.vtx-form-layout .vtx-form-pane::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-pane::before,
+.vtx-form-layout .vtx-form-pane::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-pane-title {
+  margin-bottom: 16px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  line-height: 1.5715;
+  list-style: none;
+}
+.vtx-form-layout .vtx-form-pane-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+}
+.vtx-form-layout .vtx-form-pane-content::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-pane-content::before,
+.vtx-form-layout .vtx-form-pane-content::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-divider {
+  margin: 0;
+  margin-bottom: 20px;
+}
+.vtx-form-layout .vtx-form-divider--small {
+  margin-bottom: 16px;
+}
+.vtx-form-layout .vtx-form-tabs {
+  width: 100%;
+}
+.vtx-form-layout .vtx-form-tabs .ant-tabs-bar {
+  padding-right: 12px;
+  padding-left: 12px;
+  border-bottom: none;
+}
+.vtx-form-layout .vtx-form-tabs .ant-tabs-tab {
+  padding: 5px 0 10px 0;
+}
+.vtx-form-layout-vertical {
+  padding: 0 12px;
+}
+.vtx-form-layout-vertical .vtx-form-item-col {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.vtx-form-layout-vertical .vtx-form-card-content {
+  padding: 20px 12px;
+  padding-bottom: 0;
+}
+.vtx-form-layout-vertical .vtx-form-pane-title {
+  padding: 0 12px;
+}
+.vtx-form-layout-has-card {
+  padding: 0;
+}
+.vtx-form-layout-has-card .vtx-form-tabs .ant-tabs-bar {
+  padding: 0 24px;
+}
+.vtx-form-layout-view .vtx-form-item-col {
+  margin-bottom: 16px;
+}
+.vtx-form-layout-view .vtx-form-divider {
+  margin-bottom: 16px;
+}

package/lib/live-player/demo/src/components/lib/vtx-form-layout/style/index.less

@@ -0,0 +1,211 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+@view-item-margin-bottom: 16px;
+
+.vtx-form-layout {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    padding: 0 @padding-lg;
+    overflow: hidden;
+    .vtx-form-item {
+        .ant-form-item-label {
+            text-overflow: ellipsis;
+            label::after {
+                content: '';
+            }
+        }
+        &-vertical {
+            flex-direction: column;
+            .ant-form-item-label,
+            .ant-form-item-control {
+                line-height: @line-height-base;
+            }
+            .ant-form-item-label {
+                margin-bottom: 8px;
+                padding: 0 !important;
+                white-space: initial;
+                text-align: left;
+                label {
+                    height: auto;
+                }
+            }
+        }
+        .ant-form-item-explain {
+            font-size: @font-size-sm;
+        }
+        &--inline {
+            flex: none;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            margin-right: 16px;
+            margin-bottom: @view-item-margin-bottom !important;
+            row-gap: 0;
+            .ant-form-item-control-input {
+                min-height: auto;
+            }
+            .ant-form-item-label {
+                flex: none;
+                margin-bottom: 0;
+                & > label {
+                    height: auto;
+                    color: fade(@black, 65%);
+                }
+                label::after {
+                    content: ':';
+                }
+            }
+        }
+        &--view {
+            .ant-form-item-label,
+            .ant-form-item-control {
+                line-height: @line-height-base;
+            }
+            .ant-form-item-label {
+                & > label {
+                    height: auto;
+                    color: fade(@black, 65%);
+                }
+                label::after {
+                    content: ':';
+                }
+            }
+            .ant-form-item-control {
+                color: @text-color;
+                .ant-form-item-control-input {
+                    min-height: auto;
+                }
+            }
+        }
+    }
+    .vtx-form-item-col {
+        .ant-form-item {
+            margin-bottom: 20px;
+        }
+        .vtx-form-item--view {
+            margin-bottom: 0;
+        }
+        .ant-form-item-with-help {
+            margin-bottom: 0;
+        }
+        .ant-form-item-explain {
+            min-height: 20px;
+        }
+    }
+    .vtx-form-card {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        &-expand-icon {
+            color: fade(@black, 45%);
+            transition: transform 0.24s, -webkit-transform 0.24s;
+        }
+        .ant-card-body {
+            padding: 0;
+        }
+        .ant-card-head-wrapper,
+        .ant-card-head-title {
+            line-height: 1;
+        }
+        &-content {
+            display: flex;
+            flex-flow: row wrap;
+            padding: 20px 24px;
+            padding-bottom: 0;
+            &::after {
+                clear: both;
+            }
+            &::before,
+            &::after {
+                display: table;
+                content: '';
+            }
+        }
+        &-content-hide {
+            display: none;
+        }
+    }
+    .vtx-form-card + .vtx-form-card {
+        margin-top: 20px;
+    }
+    .vtx-form-pane {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        &::after {
+            clear: both;
+        }
+        &::before,
+        &::after {
+            display: table;
+            content: '';
+        }
+        &-title {
+            margin-bottom: 16px;
+            overflow: hidden;
+            color: @text-color;
+            font-weight: 500;
+            line-height: @line-height-base;
+            list-style: none;
+        }
+        &-content {
+            display: flex;
+            flex-flow: row wrap;
+            &::after {
+                clear: both;
+            }
+            &::before,
+            &::after {
+                display: table;
+                content: '';
+            }
+        }
+    }
+    .vtx-form-divider {
+        margin: 0;
+        margin-bottom: 20px;
+        &--small {
+            margin-bottom: 16px;
+        }
+    }
+    .vtx-form-tabs {
+        width: 100%;
+        .ant-tabs-bar {
+            padding-right: @padding-sm;
+            padding-left: @padding-sm;
+            border-bottom: none;
+        }
+        .ant-tabs-tab {
+            padding: 5px 0 10px 0;
+        }
+    }
+    &-vertical {
+        padding: 0 @padding-sm;
+        .vtx-form-item-col {
+            padding-right: @padding-sm;
+            padding-left: @padding-sm;
+        }
+        .vtx-form-card-content {
+            padding: 20px @padding-sm;
+            padding-bottom: 0;
+        }
+        .vtx-form-pane-title {
+            padding: 0 @padding-sm;
+        }
+    }
+    &-has-card {
+        padding: 0;
+        .vtx-form-tabs .ant-tabs-bar {
+            padding: 0 @padding-lg;
+        }
+    }
+    &-view {
+        .vtx-form-item-col {
+            margin-bottom: @view-item-margin-bottom;
+        }
+        .vtx-form-divider {
+            margin-bottom: @view-item-margin-bottom;
+        }
+    }
+}

package/lib/live-player/demo/src/components/lib/vtx-image/style/index.css

@@ -0,0 +1,46 @@
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.vtx-image-aspectFit {
+  position: relative;
+  height: 100%;
+  min-height: 36px;
+  background: #595959;
+}
+.vtx-image-aspectFit img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  max-width: 100%;
+  max-height: 100%;
+}
+.vtx-image-preview img {
+  cursor: pointer;
+}
+.vtx-image-nodata,
+.vtx-image-error {
+  position: relative;
+  height: 100%;
+  min-height: 36px;
+  background: #fbfbfb;
+  border: 1px solid #f0f0f0;
+  cursor: default;
+}
+.vtx-image-nodata p,
+.vtx-image-error p {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  color: rgba(0, 0, 0, 0.45);
+}

package/lib/live-player/demo/src/components/lib/vtx-image/style/index.less

@@ -0,0 +1,63 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+@prefix-cls: vtx-image;
+@min-height: 36px;
+@aspectFit-background: #595959;
+
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.@{prefix-cls} {
+    &-aspectFit {
+        position: relative;
+        height: 100%;
+        min-height: @min-height;
+        background: @aspectFit-background;
+        img {
+            .center();
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+    &-preview {
+        img {
+            cursor: pointer;
+        }
+    }
+    &-nodata,
+    &-error {
+        position: relative;
+        height: 100%;
+        min-height: @min-height;
+        background: @table-expanded-row-bg;
+        border: @border-width-base @border-style-base @border-color-split;
+        cursor: default;
+        p {
+            .center();
+            color: @text-color-secondary;
+        }
+    }
+}
+.@{prefix-cls} when(@theme=dark) {
+    &-nodata,
+    &-error {
+        position: relative;
+        height: 100%;
+        min-height: @min-height;
+        background: @aspectFit-background;
+        border: @border-width-base @border-style-base @border-color-split;
+        cursor: default;
+        p {
+            .center();
+            color: @text-color-secondary;
+        }
+    }
+}

package/lib/live-player/demo/src/components/lib/vtx-import/style/index.css

@@ -0,0 +1,3 @@
+.vtx-datagrid-modal {
+  background-color: '#f8f8f8';
+}

package/lib/live-player/demo/src/components/lib/vtx-import/style/index.less

@@ -0,0 +1,8 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+@prefix-cls: vtx-datagrid;
+
+.@{prefix-cls} when(@theme=default) {
+    &-modal {
+        background-color: '#f8f8f8';
+    }
+}

package/lib/live-player/demo/src/components/lib/vtx-input/style/index.css

@@ -0,0 +1,22 @@
+.vtx-input-textarea {
+  position: relative;
+}
+.vtx-input-textarea::after {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.5715;
+  white-space: nowrap;
+  content: attr(data-count);
+  pointer-events: none;
+}
+.ant-input {
+  resize: none;
+}
+.ant-input-affix-wrapper .ant-input-suffix {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+  padding-right: 48px;
+}

package/lib/live-player/demo/src/components/lib/vtx-input/style/index.less

@@ -0,0 +1,24 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+.vtx-input-textarea {
+    position: relative;
+    &::after {
+        position: absolute;
+        right: 12px;
+        bottom: 8px;
+        color: @text-color-secondary;
+        line-height: @line-height-base;
+        white-space: nowrap;
+        content: attr(data-count);
+        pointer-events: none;
+    }
+}
+.ant-input {
+    resize: none;
+}
+.ant-input-affix-wrapper .ant-input-suffix {
+    color: @text-color-secondary;
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+    padding-right: 48px;
+}

package/lib/live-player/demo/src/components/lib/vtx-modal/style/index.css

@@ -0,0 +1,80 @@
+.vtx-modal-maxClass .ant-modal {
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding-bottom: 0 !important;
+  overflow: hidden;
+}
+.vtx-modal-maxClass .ant-modal-body {
+  height: calc(100% - 108px) !important;
+}
+.vtx-modal .ant-modal {
+  top: 10%;
+  padding-bottom: 0;
+}
+.vtx-modal .ant-modal .ant-modal-content {
+  height: 100%;
+}
+.vtx-modal .ant-modal .ant-modal-content .ant-modal-body {
+  max-height: calc(100% - 108px);
+  padding: 20px 24px;
+  overflow: auto;
+}
+.vtx-modal .vtx-modal-title {
+  position: relative;
+  width: 100%;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-title_name {
+  width: 100%;
+  color: #1890ff;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-close,
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon {
+  position: absolute;
+  top: -13px;
+  right: -16px;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-close p,
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon p {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: inline-block;
+  width: 36px;
+  height: 48px;
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 700;
+  line-height: 48px;
+  text-align: center;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  -webkit-transition: color 0.3s ease;
+  transition: color 0.3s ease;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-close p:hover,
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon p:hover {
+  color: rgba(0, 0, 0, 0.75);
+  text-decoration: none;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon {
+  right: 20px;
+}
+.vtx-modal-header-title .vtx-modal-header-text {
+  font-weight: 400;
+}
+.vtx-modal-header-title .vtx-modal-header-text {
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-modal-header-title .vtx-modal-header-text + .vtx-modal-header-subtitle::before {
+  margin: 0 4px;
+  font-weight: 400;
+  content: '>';
+}
+.vtx-modal-header-title .vtx-modal-header-text + .vtx-modal-header-subtitle::before {
+  color: rgba(0, 0, 0, 0.65);
+}