xgplayer 2.32.5 → 2.32.6

package/es/state.d.ts

@@ -0,0 +1,11 @@
+export namespace STATES {
+    const INITIAL: number;
+    const READY: number;
+    const ATTACHING: number;
+    const ATTACHED: number;
+    const NOTALLOW: number;
+    const RUNNING: number;
+    const ENDED: number;
+    const DESTROYED: number;
+}
+export const STATE_ARRAY: string[];

package/es/state.js

@@ -0,0 +1,12 @@
+var STATES = {
+  INITIAL: 1,
+  READY: 2,
+  ATTACHING: 3,
+  ATTACHED: 4,
+  NOTALLOW: 5,
+  RUNNING: 6,
+  ENDED: 7,
+  DESTROYED: 8
+};
+var STATE_ARRAY = ["ERROR", "INITIAL", "READY", "ATTACHING", "ATTACHED", "NOTALLOW", "RUNNING", "ENDED", "DESTROYED"];
+export { STATES, STATE_ARRAY };

package/es/stateClassMap.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    const DEFAULT: string;
+    const DEFAULT_SKIN: string;
+    const ENTER: string;
+    const PAUSED: string;
+    const PLAYING: string;
+    const ENDED: string;
+    const CANPLAY: string;
+    const LOADING: string;
+    const ERROR: string;
+    const REPLAY: string;
+    const NO_START: string;
+    const ACTIVE: string;
+    const INACTIVE: string;
+    const FULLSCREEN: string;
+    const CSS_FULLSCREEN: string;
+    const ROTATE_FULLSCREEN: string;
+    const PARENT_ROTATE_FULLSCREEN: string;
+    const PARENT_FULLSCREEN: string;
+    const INNER_FULLSCREEN: string;
+    const NO_CONTROLS: string;
+    const FLEX_CONTROLS: string;
+    const CONTROLS_FOLLOW: string;
+    const CONTROLS_AUTOHIDE: string;
+    const TOP_BAR_AUTOHIDE: string;
+    const NOT_ALLOW_AUTOPLAY: string;
+    const SEEKING: string;
+    const PC: string;
+    const MOBILE: string;
+    const MINI: string;
+}
+export default _default;

package/es/stateClassMap.js

@@ -0,0 +1,32 @@
+var STATE_CLASS = {
+  DEFAULT: "xgplayer",
+  DEFAULT_SKIN: "xgplayer-skin-default",
+  ENTER: "xgplayer-is-enter",
+  PAUSED: "xgplayer-pause",
+  PLAYING: "xgplayer-playing",
+  ENDED: "xgplayer-ended",
+  CANPLAY: "xgplayer-canplay",
+  LOADING: "xgplayer-isloading",
+  ERROR: "xgplayer-is-error",
+  REPLAY: "xgplayer-replay",
+  NO_START: "xgplayer-nostart",
+  ACTIVE: "xgplayer-active",
+  INACTIVE: "xgplayer-inactive",
+  FULLSCREEN: "xgplayer-is-fullscreen",
+  CSS_FULLSCREEN: "xgplayer-is-cssfullscreen",
+  ROTATE_FULLSCREEN: "xgplayer-rotate-fullscreen",
+  PARENT_ROTATE_FULLSCREEN: "xgplayer-rotate-parent",
+  PARENT_FULLSCREEN: "xgplayer-fullscreen-parent",
+  INNER_FULLSCREEN: "xgplayer-fullscreen-inner",
+  NO_CONTROLS: "no-controls",
+  FLEX_CONTROLS: "flex-controls",
+  CONTROLS_FOLLOW: "controls-follow",
+  CONTROLS_AUTOHIDE: "controls-autohide",
+  TOP_BAR_AUTOHIDE: "top-bar-autohide",
+  NOT_ALLOW_AUTOPLAY: "not-allow-autoplay",
+  SEEKING: "seeking",
+  PC: "xgplayer-pc",
+  MOBILE: "xgplayer-mobile",
+  MINI: "xgplayer-mini"
+};
+export { STATE_CLASS as default };

package/es/style/common/animation.scss

@@ -0,0 +1,16 @@
+@keyframes loadingRotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes loadingDashOffset {
+  0% {
+    stroke-dashoffset: 236;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}

package/es/style/common/svg-url.scss

@@ -0,0 +1,70 @@
+//
+//  Function to create an optimized svg url
+//
+//  Helper function to replace characters in a string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @return if($index,
+          str-slice($string, 1, $index - 1) + $replace +
+        str-replace(str-slice($string, $index +
+        str-length($search)), $search, $replace),
+          $string);
+}
+
+@function svg-url($svg){
+  //
+  //  Add missing namespace
+  //
+  @if not str-index($svg,xmlns) {
+    $svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  //
+  //  Chunk up string in order to avoid
+  //  "stack level too deep" error
+  //
+  $encoded:'';
+  $slice: 2000;
+  $index: 0;
+  $loops: ceil(str-length($svg)/$slice);
+  @for $i from 1 through $loops {
+    $chunk: str-slice($svg, $index, $index + $slice - 1);
+    //
+    //   Encode
+    //
+    $chunk: str-replace($chunk, '"', '\'');
+    $chunk: str-replace($chunk, '%', '%25');
+    $chunk: str-replace($chunk, '#', '%23');
+    $chunk: str-replace($chunk, '{', '%7B');
+    $chunk: str-replace($chunk, '}', '%7D');
+    $chunk: str-replace($chunk, '<', '%3C');
+    $chunk: str-replace($chunk, '>', '%3E');
+
+    //
+    //    The maybe list
+    //
+    //    Keep size and compile time down
+    //    ... only add on documented fail
+    //
+    //  $chunk: str-replace($chunk, '&', '%26');
+    //  $chunk: str-replace($chunk, '|', '%7C');
+    //  $chunk: str-replace($chunk, '[', '%5B');
+    //  $chunk: str-replace($chunk, ']', '%5D');
+    //  $chunk: str-replace($chunk, '^', '%5E');
+    //  $chunk: str-replace($chunk, '`', '%60');
+    //  $chunk: str-replace($chunk, ';', '%3B');
+    //  $chunk: str-replace($chunk, '?', '%3F');
+    //  $chunk: str-replace($chunk, ':', '%3A');
+    //  $chunk: str-replace($chunk, '@', '%40');
+    //  $chunk: str-replace($chunk, '=', '%3D');
+
+    $encoded: #{$encoded}#{$chunk};
+    $index: $index + $slice;
+  }
+  @return url("data:image/svg+xml,#{$encoded}");
+}
+
+//  Background svg mixin
+@mixin background-svg($svg){
+  background-image: svg-url($svg);
+}
+

package/es/style/common.scss

@@ -0,0 +1,457 @@
+@import 'variable';
+/** xgplayer base style begain**/
+.xgplayer-fullscreen-parent {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  .xgplayer.xgplayer-is-cssfullscreen {
+    z-index: 10;
+    position: absolute;
+  }
+  .xgplayer.xgplayer-is-fullscreen {
+    z-index: 10;
+    position: absolute;
+  }
+}
+
+.xgplayer-rotate-parent {
+  position: fixed;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  right: 0;
+  width: 100vh;
+  height: 100vw;
+  z-index: 9999;
+  transform-origin: top left;
+  transform: rotate(90deg);
+  .xgplayer.xgplayer-rotate-fullscreen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    transform: rotate(0);
+  }
+  // &.xgplayer-mobile {
+  //   width: 90%;
+  // }
+  .xgplayer-mobile {
+    video {
+      z-index: -1;
+    }
+  }
+}
+
+.xgplayer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, STHeiTi, 'Microsoft YaHei',
+    'WenQuanYi Micro Hei', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  background: $playerBgColor;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  * {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+    white-space: normal;
+    word-wrap: normal;
+    overflow-wrap: normal;
+  }
+  ul,
+  li {
+    list-style: none;
+  }
+  .xgplayer-none {
+    display: none;
+  }
+
+  &.xgplayer-is-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    z-index: 9999;
+  }
+
+  /** xgplayer cssFullscreen style  begain**/
+  &.xgplayer-is-cssfullscreen {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+  }
+  /** xgplayer cssFullscreen style  end**/
+
+  &.xgplayer-rotate-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 100%;
+    bottom: 0;
+    right: 0;
+    width: 100vh;
+    height: 100vw;
+    transform-origin: top left;
+    transform: rotate(90deg);
+    z-index: 9999;
+    // &.xgplayer-mobile {
+    //   width: 90vh;
+    // }
+    &.xgplayer-mobile video {
+      z-index: -1;
+    }
+  }
+
+  xg-video-container.xg-video-container {
+    position: absolute;
+    top: 0;
+    bottom: 48px;
+    display: block;
+    width: 100%;
+  }
+
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+  }
+
+  &[data-xgfill='contain'] {
+    video {
+      object-fit: contain;
+    }
+  }
+
+  &[data-xgfill='cover'] {
+    video {
+      object-fit: cover;
+    }
+  }
+
+  &[data-xgfill='fill'] {
+    video {
+      object-fit: fill;
+    }
+  }
+  /** position start **/
+  .xg-pos {
+    left: $miniMargin; //$iconMargin;
+    right: $miniMargin; //$iconMargin;
+  }
+
+  .xg-margin {
+    margin-left: $iconMargin;
+    margin-right: $iconMargin;
+  }
+
+  .xg-bottom {
+    bottom: 0;
+  }
+  /** position ended **/
+
+  .btn-text {
+    position: relative;
+    top: 50%;
+    height: 24px;
+    font-size: 13px;
+    text-align: center;
+    span {
+      display: inline-block;
+      min-width: 52px;
+      height: 24px;
+      line-height: 24px;
+      background: $definitionNameBgColor;
+      border-radius: 12px;
+    }
+  }
+  /** icon style begain **/
+  xg-icon {
+    position: relative;
+    box-sizing: border-box;
+    height: 40px;
+    margin-left: $iconMargin;
+    margin-right: $iconMargin;
+    cursor: pointer;
+    color: $definitionNameColor;
+    fill: #fff;
+    .xg-tips {
+      top: -30px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &:active,
+    &:hover {
+      .xg-tips {
+        display: block;
+      }
+      .xg-tips.hide {
+        display: none;
+      }
+    }
+    .xgplayer-icon {
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    .xg-icon-disable {
+      cursor: not-allowed;
+    }
+
+    .xg-img {
+      width: 100%;
+    }
+
+    svg,
+    img {
+      height: 100%;
+      display: block;
+    }
+  }
+  /** icon style ended **/
+
+  /** root bar style begain **/
+  xg-bar {
+    display: block;
+  }
+
+  &.xgplayer-inactive,
+  &.xgplayer-mini {
+    xg-bar {
+      display: none;
+    }
+  }
+  &.xgplayer-inactive {
+    .xg-top-bar {
+      display: flex;
+      &.top-bar-autohide {
+        display: none;
+      }
+    }
+  }
+
+  .xg-top-bar {
+    position: absolute;
+    z-index: 10;
+    top: 0;
+    padding: 0 $iconMargin;
+    display: flex;
+    height: $barWidth;
+    xg-icon {
+      position: relative;
+      top: 10px;
+      left: 0;
+      width: 34px;
+      margin-top: 0;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+  .xg-left-bar,
+  .xg-right-bar {
+    position: absolute;
+    z-index: 9;
+    top: $barWidth;
+    bottom: $barWidth;
+    width: $barWidth;
+  }
+  .xg-left-bar {
+    left: 0;
+  }
+  .xg-right-bar {
+    right: 0;
+  }
+  /*  root bar style ended */
+
+  .xg-tips {
+    display: none;
+    position: absolute;
+    padding: 4px 6px;
+    background: $tipsBgColor;
+    border-radius: 4px;
+    font-size: $tipsFontsize;
+    color: $tipsColor;
+    text-align: center;
+    white-space: nowrap;
+    opacity: 0.85;
+  }
+  .xg-margin {
+    left: 0px;
+    right: 0px;
+  }
+}
+
+// 移动端适配
+.xgplayer-mobile {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  * {
+    text-decoration: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &.xgplayer-rotate-fullscreen {
+    .xg-top-bar,
+    .xg-pos {
+      left: 6%;
+      right: 6%;
+    }
+  }
+
+  xg-icon {
+    &:hover {
+      .xg-tips {
+        display: none;
+      }
+    }
+  }
+}
+
+.xg-list-slide-scroll {
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    display: none
+  }
+  &:hover::-webkit-scrollbar-track {
+      display: block
+  }
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(0,0,0,0);
+    height: 4px;
+    width: 4px
+  }
+  &::-webkit-scrollbar-corner {
+      background: transparent;
+      display: none
+  }
+  &::-webkit-scrollbar-thumb {
+      background: hsla(0,0%,100%,.5);
+      border-radius: 3px;
+      display: none;
+      width: 4px
+  }
+  &:hover::-webkit-scrollbar-thumb {
+      display: block
+  }
+}
+
+// 移动端小屏幕
+@media only screen and (max-width: 480px) {
+  .xgplayer-mobile {
+    xg-icon {
+      margin-right: $miniMargin;
+      margin-left: $miniMargin;
+    }
+
+    .xg-top-bar {
+      left: $miniMargin;
+      right: $miniMargin;
+    }
+  }
+}
+
+// @media only screen and (min-width: 480px) {
+//   .xgplayer-mobile {
+//     &.xgplayer-is-fullscreen {
+//       .xg-top-bar, .xg-pos{
+//         left: 6%;
+//         right: 6%;
+//       }
+//     }
+//   }
+// }
+
+@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top)))
+  and (-webkit-overflow-scrolling: touch) {
+  // .xgplayer-mobile {
+  //   &.xgplayer-rotate-fullscreen {
+  //     .xg-pos {
+  //       left: constant(safe-area-inset-top, 30px);
+  //       left: env(safe-area-inset-top, 30px);
+  //       right: constant(safe-area-inset-bottom, 30px);
+  //       right: env(safe-area-inset-bottom, 30px);
+  //     }
+  //   }
+  // }
+}
+
+// 竖屏兼容
+@media screen and (orientation: portrait) {
+  .xgplayer-mobile {
+    &.xgplayer-is-fullscreen,
+    &.xgplayer-is-cssfullscreen {
+      //.flex-controls {
+      .xgplayer-controls {
+        bottom: 34px;
+        /* iOS 11.0 */
+        bottom: constant(safe-area-inset-bottom);
+        /* 11.2+ */
+        bottom: env(safe-area-inset-bottom);
+      }
+      .xg-top-bar {
+        top: 34px;
+        /* iOS 11.0 */
+        top: constant(safe-area-inset-top);
+        /* 11.2+ */
+        top: env(safe-area-inset-top);
+      }
+    }
+  }
+}
+
+// 横屏兼容
+@media only screen and (orientation: landscape) {
+  .xgplayer-mobile {
+    &.xgplayer-is-fullscreen {
+      .xg-top-bar,
+      .xg-pos {
+        left: 6%;
+        right: 6%;
+      }
+    }
+    &.xgplayer-rotate-fullscreen {
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      transform: rotate(0deg);
+    }
+  }
+}
+
+// 自定义mse使用 不能删除
+.xgplayer {
+  .xgplayer-screen-container {
+    display: block;
+    width: 100%;
+  }
+}

package/es/style/index.scss

@@ -0,0 +1,4 @@
+@import "variable";
+@import "common";
+@import "common/svg-url";
+@import "../plugins/common/index";

package/es/style/variable.scss

@@ -0,0 +1,76 @@
+// player
+
+$playerBgColor: #000;
+$playerIconColor: #fff;
+
+// controls
+$controlsBgImage: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .37), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
+
+// progress-bar
+$progressOuterBgColor: rgba(255, 255, 255, 0.30);
+$progressCacheBgColor: rgba(255, 255, 255, 0.50);
+$progressPlayedBgImage: linear-gradient(-90deg, #FA1F41 0%, #E31106 100%);
+$progressPlayedShadow: 0 0 2px 0 rgba(0, 0, 0, 0.26);
+
+// time
+$timeColor: #fff;
+$timeDurationColor: rgba(255, 255, 255, 0.50);
+
+// tips
+$tipsColor: #fff;
+$tipsBgColor: rgba(0, 0, 0, 0.54);
+$tipsFontsize: 11px;
+
+// slider
+$sliderBgColor: rgba(0, 0, 0, 0.54);
+$sliderBarBgColor: rgba(255, 255, 255, 0.30);
+$sliderDragBgColor: #FA1F41;
+$sliderDragAfterBgColor: #fff;
+$sliderDragAfterShadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
+
+// start
+
+$startBgColor: rgba(0, 0, 0, 0.38);
+$startSvgFill: rgba(255, 255, 255, 0.7);
+$startHoverBgColor: rgba(255, 255, 255, 0.5);
+$startHoverFillColor: rgba(255, 255, 255, 0.6);
+
+// definition
+
+$definitionUlBgColor: rgba(0, 0, 0, 0.54);
+$definitionLiColor: rgba(255, 255, 255, 0.80);
+$definitionLiActiveColor: #FF0000;
+$definitionNameColor: rgba(255, 255, 255, 0.80);
+$definitionNameBgColor: rgba(0, 0, 0, 0.38);
+
+// replay
+
+$replayBgColor: rgba(0, 0, 0, 0.54);
+$replaySvgBgColor: rgba(0,0,0,0.58);
+$replaySvgPathFillColor: #ddd;
+$replaySvgHoverBgColor: rgba(0, 0, 0, .38);
+$replaySvgHoverFillColor: #fff;
+$replayTxtColor: #fff;
+
+$enterTipsBgColor: -webkit-linear-gradient(right, #000, red, red, red, #000);
+$ieEnterTipsBgColor: linear-gradient(to right, #000, red, red, red, #000);
+
+// live
+
+$liveColor: #fff;
+
+// error
+
+$errorBgColor: #000;
+$errorColor: #fff;
+$errorRefreshColor: #FA1F41;
+
+//icon
+$iconMargin: 16px;
+//
+$miniMargin: 10px;
+
+
+//bar
+$barWidth: 50px;
+$barBottom: 50px;