@volcengine/veplayer 1.15.1 → 1.15.2-rc.1

package/src/style/bytelive/pc.less

@@ -0,0 +1,161 @@
+.xgplayer-pc {
+  .xg-options-icon {
+    .icon-text {
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      background: transparent !important;
+      border: none;
+      border-radius: 0;
+      min-width: unset !important;
+    }
+  }
+
+  .xg-options-list {
+    color: white !important;
+    font-size: 14px;
+    background-color: rgb(0 0 0 / 70%) !important;
+    border-radius: 4px !important;
+    width: 78px;
+
+    .option-item {
+      height: 34px !important;
+      padding: 0 !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white !important;
+
+      span {
+        white-space: nowrap;
+      }
+
+      &.selected {
+        color: #3370ff !important;
+      }
+
+      &:hover {
+        background-color: hsl(0deg 0% 100% / 20%);
+      }
+
+      &:first-child {
+        margin-top: 0 !important;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+
+      &:last-child {
+        margin-bottom: 0 !important;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
+  }
+
+  .xgplayer-definition-plugin-pc {
+    .xg-options-list {
+      width: auto;
+      min-width: 88px;
+    }
+  }
+
+  .xgplayer-fullscreen {
+    .xg-tips {
+      left: 0 !important;
+    }
+  }
+
+  .xgplayer-volume {
+    xg-slider.xgplayer-slider {
+      background: rgb(0 0 0 / 50%);
+      border-radius: 8px;
+      width: 63px;
+      height: 125px;
+      left: 50%;
+      // bottom: 27px;
+      transform: translateX(-50%);
+
+      &::after {
+        content: none;
+      }
+
+      .xgplayer-bar {
+        left: 30px;
+        bottom: 12px;
+        height: 98px;
+        transform: none;
+        top: auto;
+      }
+
+      .xgplayer-drag {
+        max-height: 98px;
+        background-image: linear-gradient(120deg, #6aa6ff 0%, #1664ff 100%);
+
+        &.dragging,
+        &:hover {
+          &::before {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -8px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+          }
+        }
+
+        &::after {
+          top: -5px;
+          width: 10px;
+          height: 10px;
+          left: -3px;
+          box-shadow: none;
+        }
+      }
+
+      .xgplayer-volume-text {
+        margin-top: 12px;
+        font-size: 14px;
+        line-height: 22px;
+        text-align: center;
+      }
+    }
+  }
+
+  .xgplayer-progress {
+    .xgplayer-progress-outer {
+      transition: unset;
+    }
+
+    .xgplayer-progress-btn {
+      width: 16px;
+      height: 16px;
+      box-shadow: 0 0 1px 0 rgb(0 0 0 / 9.6%);
+      background: #346aff41;
+    }
+
+    .xgplayer-progress-played {
+      background: #3469ff;
+    }
+  }
+
+  .xgplayer-replay {
+    height: unset;
+
+    .xgplayer-replay-txt {
+      display: none;
+    }
+
+    &:hover {
+      circle {
+        fill-opacity: 0.5;
+      }
+    }
+  }
+
+  &.xgplayer-is-error {
+    .xgplayer-start {
+      display: none;
+    }
+  }
+}

package/src/style/bytelive/refresh.less

@@ -0,0 +1,3 @@
+.xgplayer-refresh {
+  margin-left: 12px !important;
+}

package/src/style/bytelive/reset.less

@@ -0,0 +1,4 @@
+// 重写部分xgplayer的样式
+.xgplayer .xg-panel-info {
+  z-index: 100;
+}

package/src/style/bytelive/toast.less

@@ -0,0 +1,61 @@
+.xgplayer-sdk-toast {
+  position: absolute;
+  bottom: 50px;
+  left: 16px;
+  z-index: 203;
+
+  .toast-container {
+    display: flex;
+    margin-top: 8px;
+    border-radius: 8px;
+    padding: 4px 10px;
+    height: 28px;
+    font-size: 14px;
+    line-height: 20px;
+    background: rgb(0 0 0 / 40%);
+    color: white;
+    box-sizing: content-box;
+
+    .toast-txt {
+      display: flex;
+      align-items: center;
+
+      .toast-txt-bt {
+        color: #338fff;
+        margin-left: 8px;
+
+        &:hover {
+          color: #338fffdf;
+        }
+      }
+    }
+
+    .toast-close-bt {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 25px;
+      width: 25px;
+      font-size: 16px;
+      font-weight: bolder;
+      margin-left: 15px;
+    }
+  }
+}
+
+.xgplayer-mobile {
+  .xgplayer-sdk-toast {
+    .toast-container {
+      height: 20px;
+      padding: 4px 8px;
+      font-size: 12px;
+
+      .toast-close-bt {
+        height: 20px;
+        width: 20px;
+        font-size: 14px;
+        margin-left: 8px;
+      }
+    }
+  }
+}

package/src/style/bytelive/unmute.less

@@ -0,0 +1,65 @@
+.xgplayer-unmute {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  z-index: 10;
+  top: 0;
+
+  .xgplayer-unmute-bt {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 180px;
+    height: 60px;
+    color: white;
+    border-radius: 5px;
+    border: 0.5px white solid;
+    font-size: 16px;
+    background-color: rgb(0 0 0 / 50%);
+    pointer-events: auto;
+
+    &:hover {
+      background-color: rgb(0 0 0 / 30%);
+      border: 0.5px #3370ff solid;
+      color: #3370ff;
+    }
+
+    &:active {
+      background-color: rgb(0 0 0 / 30%);
+    }
+  }
+
+  .xgplayer-unmute-bt-tag {
+    display: none;
+    align-items: center;
+    color: white;
+    background: rgb(0 0 0 / 45%);
+    border-radius: 2px;
+    padding: 2px;
+    font-size: 12px;
+    position: absolute;
+    bottom: 4px;
+    left: 4px;
+  }
+}
+
+.xgplayer-mobile {
+  .xgplayer-unmute-bt {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+  }
+}
+
+.xgplayer-ended,
+.xgplayer-pause,
+.xgplayer-isloading,
+.xgplayer-is-error {
+  .xgplayer-unmute {
+    display: none;
+  }
+}

package/src/style/external/LiveInfoPanel.less

@@ -0,0 +1,41 @@
+.veplayer-livepanel-container {
+  color: #fff;
+  width: 165px;
+  height: 100%;
+  z-index: 8;
+  position: absolute;
+  font-size: 12px;
+  padding: 10px;
+  background: rgb(0 0 0 / 50%);
+  font-weight: 400;
+  box-sizing: border-box;
+  overflow-y: scroll;
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+
+  &-row {
+    display: block;
+    line-height: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &-label {
+      display: inline-block;
+      width: 50%;
+      color: #c9cdd4;
+    }
+
+    &-title {
+      display: inline-block;
+      padding-top: 30px;
+    }
+  }
+}
+
+.veplayer-livepanel-hidden {
+  display: none;
+}

package/src/style/external/aisub.less

@@ -0,0 +1,139 @@
+@keyframes scroll-ani-1 {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes scroll-ani-2 {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+.xgplayer-pc {
+  .xgplayer-subtitles {
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    line-height: 28px;
+    font-size: 20px;
+    color: white;
+    transform: translateX(-50%);
+    word-break: break-word;
+    overflow: hidden;
+    z-index: 6;
+    pointer-events: none;
+    white-space: nowrap;
+    text-align: left;
+    text-shadow: black 1px 0 1px, black 0 1px 1px, black 0 -1px 1px,
+      black -1px 0 1px;
+    height: 56px;
+    width: 80%;
+    box-sizing: border-box;
+
+    .xgplayer-subtitles-inner {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      span {
+        display: inline;
+        width: max-content;
+        box-sizing: border-box;
+      }
+    }
+
+    .xgplayer-subtitles-helper {
+      opacity: 0;
+      width: max-content;
+    }
+
+    .scroll-1 {
+      animation: scroll-ani-1 0.1s forwards;
+    }
+
+    .scroll-2 {
+      animation: scroll-ani-2 0.1s forwards;
+    }
+  }
+
+  .xgplayer-inactive {
+    .xgplayer-subtitles {
+      bottom: 40px;
+    }
+  }
+}
+
+.xgplayer-mobile {
+  .xgplayer-subtitles {
+    position: absolute;
+    bottom: 18px;
+    left: 50%;
+    line-height: 18px;
+    font-size: 12px;
+    color: white;
+    transform: translateX(-50%);
+    word-break: break-word;
+    overflow: hidden;
+    z-index: 6;
+    pointer-events: none;
+    white-space: nowrap;
+    text-align: left;
+    text-shadow: black 1px 0 1px, black 0 1px 1px, black 0 -1px 1px,
+      black -1px 0 1px;
+    height: 36px;
+    width: 64%;
+  }
+
+  .xgplayer-subtitles-inner {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    span {
+      width: max-content;
+    }
+  }
+
+  .xgplayer-subtitles-helper {
+    opacity: 0;
+    width: max-content;
+  }
+
+  .scroll-1 {
+    animation: scroll-ani-1 0.1s forwards;
+  }
+
+  .scroll-2 {
+    animation: scroll-ani-2 0.1s forwards;
+  }
+
+  &.xgplayer-is-fullscreen,
+  &.xgplayer-inner-fullscreen {
+    .xgplayer-subtitles {
+      bottom: 45px;
+      font-size: 16px;
+
+      @media screen and(orientation: portrait) {
+        bottom: 80px;
+        font-size: 12px;
+      }
+    }
+  }
+}

package/src/style/external/aisubIcon.less

@@ -0,0 +1,25 @@
+.xgplayer-aisub {
+  &.isOpen {
+    .xgplayer-aisub-open-svg {
+      display: block;
+    }
+
+    .xgplayer-aisub-close-svg {
+      display: none;
+    }
+
+    .xg-tips {
+      display: none !important;
+    }
+  }
+
+  &.isClose {
+    .xgplayer-aisub-open-svg {
+      display: none;
+    }
+
+    .xgplayer-aisub-close-svg {
+      display: block;
+    }
+  }
+}

package/src/style/external/index.less

@@ -0,0 +1,5 @@
+@import './timeShift.less';
+@import './LiveInfoPanel.less';
+@import './mirror.less';
+@import './vttSubtitle.less';
+@import './playList.less';

package/src/style/external/larkWindow.less

@@ -0,0 +1,36 @@
+.xgplayer.xgplayer-mini-mode.xgplayer-mobile {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999;
+
+  .xgplayer-error {
+    display: none;
+  }
+
+  .xgplayer-autoplay-container {
+    display: none;
+  }
+
+  #xgplayer-toast {
+    display: none;
+  }
+
+  .xgplayer-controls {
+    display: none !important;
+  }
+
+  .xgplayer-danmu {
+    display: none !important;
+  }
+
+  .xgplayer-danmu-container {
+    display: none !important;
+  }
+
+  .xg-top-bar {
+    display: none;
+  }
+}

package/src/style/external/mirror.less

@@ -0,0 +1,27 @@
+.xgplayer {
+  &.xgplayer-mirror {
+    video {
+      transform: rotateY(180deg);
+    }
+  }
+
+  .xgplayer-mirror-icon {
+    .xg-get-mirror {
+      display: block;
+    }
+
+    .xg-exit-mirror {
+      display: none;
+    }
+
+    &[data-state='enable'] {
+      .xg-get-mirror {
+        display: none;
+      }
+
+      .xg-exit-mirror {
+        display: block;
+      }
+    }
+  }
+}