xgplayer 3.0.17-alpha.0 → 3.0.17-alpha.2

package/es/index.css

@@ -176,7 +176,7 @@
   margin-left: 16px;
   margin-right: 16px;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgb(255, 255, 255);
   fill: #fff;
 }
 .xgplayer xg-icon.xg-icon-disable {
@@ -260,7 +260,7 @@
   padding: 4px 6px;
   background: rgba(0, 0, 0, 0.54);
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 12px;
   color: #fff;
   text-align: center;
   white-space: nowrap;
@@ -409,7 +409,7 @@
   height: 0;
   opacity: 0.85;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgb(255, 255, 255);
 }
 .xgplayer .xg-options-list li {
   height: 20px;
@@ -417,6 +417,7 @@
   position: relative;
   padding: 4px 0;
   text-align: center;
+  color: rgb(255, 255, 255);
 }
 .xgplayer .xg-options-list li:hover {
   color: #FF0000;
@@ -456,12 +457,6 @@
   padding: 0;
   position: relative;
 }
-.xgplayer .xg-options-list.xg-side-list li:hover {
-  color: rgba(255, 255, 255, 0.8);
-}
-.xgplayer .xg-options-list.xg-side-list li.selected {
-  color: #FF0000;
-}
 .xgplayer .xg-options-list.xg-side-list li span {
   display: block;
   position: relative;
@@ -502,6 +497,9 @@
   .xgplayer-mobile .xg-options-icon.portrait {
     display: none;
   }
+  .xgplayer-mobile .xg-options-list li:hover {
+    color: rgb(255, 255, 255);
+  }
 }
 .xgplayer xg-thumbnail {
   display: block;

package/es/plugins/common/optionList.js

@@ -1,6 +1,5 @@
 import { createClass as _createClass, classCallCheck as _classCallCheck } from "../../_virtual/_rollupPluginBabelHelpers.js";
 import util from "../../utils/util.js";
-import sniffer from "../../utils/sniffer.js";
 import "../../utils/debug.js";
 import Plugin from "../../plugin/plugin.js";
 var OptionList = /* @__PURE__ */ function() {
@@ -18,7 +17,7 @@ var OptionList = /* @__PURE__ */ function() {
     }
     this.onItemClick = this.onItemClick.bind(this);
     this.renderItemList();
-    var eventName = sniffer.device === "mobile" ? "touchend" : "click";
+    var eventName = this.config.domEventType === "touche" ? "touchend" : "click";
     this._delegates = Plugin.delegate.call(this, this.root, "li", eventName, this.onItemClick);
   }
   _createClass(OptionList2, [{

package/es/plugins/common/optionsIcon.js

@@ -77,7 +77,8 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
       var _this2 = this;
       var config = this.config;
       this.initIcons();
-      if (IS_MOBILE && config.listType !== LIST_TYPES.MIDDLE) {
+      IS_MOBILE = IS_MOBILE || this.domEventType === "touch";
+      if (sniffer.device === "mobile" && config.listType !== LIST_TYPES.MIDDLE) {
         config.listType = LIST_TYPES.SIDE;
       }
       config.hidePortrait && util.addClass(this.root, "portrait");
@@ -168,7 +169,7 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
   }, {
     key: "toggle",
     value: function toggle(isActive) {
-      if (isActive === this.isActive)
+      if (isActive === this.isActive || this.config.disable)
         return;
       var controls = this.player.controls;
       var listType = this.config.listType;
@@ -229,7 +230,8 @@ var OptionsIcon = /* @__PURE__ */ function(_Plugin) {
           className: getListClassName(config.listType, config.position),
           onItemClick: function onItemClick(e, data) {
             _this4.onItemClick(e, data);
-          }
+          },
+          domEventType: IS_MOBILE ? "touche" : "mouse"
         },
         root: config.listType === LIST_TYPES.SIDE ? player.innerContainer || player.root : this.root
       };

package/es/plugins/common/optionsIcon.scss

@@ -7,7 +7,7 @@
       display: block;
     }
   }
-  
+
   @keyframes xg_right_options_active {
     0% {
       transform: translateX(50%);
@@ -66,6 +66,7 @@
       position: relative;
       padding: 4px 0;
       text-align: center;
+      color: $definitionLiColor;
       &:hover{
         color: $definitionLiActiveColor;
         opacity: 1;
@@ -103,12 +104,6 @@
         width: 100%;
         padding: 0;
         position: relative;
-        &:hover{
-          color: $definitionLiColor;
-        }
-        &.selected {
-          color: $definitionLiActiveColor;
-        }
         span {
           display: block;
           position: relative;
@@ -152,9 +147,16 @@
 }
 
 @media only screen and (max-width: 480px) {
-  .xgplayer-mobile .xg-options-icon {
-    &.portrait {
-      display: none;
+  .xgplayer-mobile {
+    .xg-options-icon {
+      &.portrait {
+        display: none;
+      }
+    }
+    .xg-options-list li {
+      &:hover{
+        color: $definitionLiColor;
+      }
     }
   }
 }

package/es/plugins/controls/index.scss

@@ -1,10 +1,6 @@
 @import "../../style/variable";
 //controls
 $controlHeight: 48px;
-// tips
-// $tipsColor: #fff;
-// $tipsBgColor: rgba(0, 0, 0, 0.8);
-// $tipsFontsize: 12px;
 
 .xgplayer {
   &.not-allow-autoplay,

package/es/plugins/danmu/index.css

@@ -41,7 +41,7 @@
   display: inline-block;
   position: relative;
   font-size: 13px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgb(255, 255, 255);
   z-index: 36;
 }
 .xgplayer .xgplayer-panel .xgplayer-panel-icon {

package/es/plugins/danmu/index.scss

@@ -1,7 +1,7 @@
 // definition
-$definitionLiColor: rgba(255, 255, 255, 0.80);
+$definitionLiColor: rgba(255, 255, 255, 1);
 $definitionLiActiveColor: #fff;
-$definitionNameColor: rgba(255, 255, 255, 0.80);
+$definitionNameColor: rgba(255, 255, 255, 1);
 $definitionNameBgColor: rgba(0, 0, 0, 0.38);
 
 // slider

package/es/plugins/miniScreen/index.css

@@ -144,7 +144,7 @@
   font-size: 13px;
   line-height: 20px;
   height: 20px;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgb(255, 255, 255);
   line-height: 40px;
 }
 .xgplayer-miniicon .name span {

package/es/plugins/progress/index.css

@@ -7,8 +7,8 @@
   display: flex;
   align-items: center;
   position: relative;
-  min-width: 50px;
-  height: 12px;
+  min-width: 10px;
+  height: 20px;
   left: 0;
   right: 0;
   top: 0;

package/es/plugins/progress/index.js

@@ -150,7 +150,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
       }
       util.setTimeout(_assertThisInitialized(_this), function() {
         _this.resetSeekState();
-      }, 10);
+      }, 1);
       player.focus();
     });
     _defineProperty(_assertThisInitialized(_this), "onMouseMove", function(e) {
@@ -624,7 +624,7 @@ var Progress = /* @__PURE__ */ function(_Plugin) {
         this.unbind("mouseleave", this.onMouseLeave);
         document.removeEventListener("mousemove", this.onMouseMove, false);
         document.removeEventListener("mouseup", this.onMouseUp, false);
-        player.root.removeEventListener("click", this.onBodyClick, true);
+        player.root.removeEventListener("click", this.onBodyClick, false);
       }
     }
   }, {

package/es/plugins/progress/index.scss

@@ -5,8 +5,8 @@
     display: flex;
     align-items: center;
     position: relative;
-    min-width: 50px;
-    height: 12px;
+    min-width: 10px;
+    height: 20px;
     left: 0;
     right: 0;
     top: 0;

package/es/style/variable.scss

@@ -3,23 +3,16 @@
 $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);
+// $progressPlayedShadow: 0 0 2px 0 rgba(0, 0, 0, 0.26);
 
 // tips
 $tipsColor: #fff;
 $tipsBgColor: rgba(0, 0, 0, 0.54);
-$tipsFontsize: 11px;
+$tipsFontsize: 12px;
 
 // slider
 $sliderBgColor: rgba(0, 0, 0, 0.54);
@@ -38,9 +31,9 @@ $startHoverFillColor: rgba(255, 255, 255, 0.6);
 // definition
 
 $definitionUlBgColor: rgba(0, 0, 0, 0.54);
-$definitionLiColor: rgba(255, 255, 255, 0.80);
+$definitionLiColor: rgba(255, 255, 255, 1);
 $definitionLiActiveColor: #FF0000;
-$definitionNameColor: rgba(255, 255, 255, 0.80);
+$definitionNameColor: rgba(255, 255, 255, 1);
 $definitionNameBgColor: rgba(0, 0, 0, 0.38);
 
 // replay

package/es/version.js

@@ -1,2 +1,2 @@
-var version = "3.0.17-alpha.0";
+var version = "3.0.17-alpha.2";
 export { version as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xgplayer",
-  "version": "3.0.17-alpha.0",
+  "version": "3.0.17-alpha.2",
   "description": "video player",
   "main": "dist/index.min.js",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
-    "tag": "alpha"
+    "tag": "al"
   },
   "files": [
     "dist",