修正icon

docs/js/artplayer.js

@@ -1100,6 +1100,8 @@
 
 	var subtitle = "<svg style=\"width: 100%; height: 100%\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M0 0h48v48H0z\" fill=\"none\"/>\n    <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"/>\n</svg>";
 
+	var subtitleClose = "<svg style=\"width: 100%; height: 100%; opacity: .5\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M0 0h48v48H0z\" fill=\"none\"/>\n    <path d=\"M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z\"/>\n</svg>";
+
 	var icons = {
 	  loading: loading,
 	  playBig: playBig,
@@ -1107,7 +1109,8 @@
 	  pause: pause,
 	  volume: volume,
 	  volumeClose: volumeClose,
-	  subtitle: subtitle
+	  subtitle: subtitle,
+	  subtitleClose: subtitleClose
 	};
 
 	function creatDomFromSvg(map) {
@@ -1359,17 +1362,19 @@
 	          subtitle = art.subtitle,
 	          i18n = art.i18n;
 	      this.$subtitle = append(this.option.$control, icons$1.subtitle);
+	      this.$subtitleClose = append(this.option.$control, icons$1.subtitleClose);
 	      tooltip(this.$subtitle, i18n.get('Hide subtitle'));
+	      tooltip(this.$subtitleClose, i18n.get('Show subtitle'));
+	      this.$subtitleClose.style.display = 'none';
 	      proxy(this.$subtitle, 'click', function () {
-	        if (subtitle.isShow) {
-	          subtitle.hide();
-	          tooltip(_this.$subtitle, i18n.get('Show subtitle'));
-	          _this.$subtitle.style.opacity = '.5';
-	        } else {
-	          subtitle.show();
-	          tooltip(_this.$subtitle, i18n.get('Hide subtitle'));
-	          _this.$subtitle.style.opacity = '1';
-	        }
+	        subtitle.hide();
+	        _this.$subtitle.style.display = 'none';
+	        _this.$subtitleClose.style.display = 'block';
+	      });
+	      proxy(this.$subtitleClose, 'click', function () {
+	        subtitle.show();
+	        _this.$subtitle.style.display = 'block';
+	        _this.$subtitleClose.style.display = 'none';
 	      });
 	    }
 	  }]);
@@ -2087,7 +2092,6 @@
 	    classCallCheck(this, Subtitle);
 
 	    this.art = art;
-	    this.isShow = true;
 	    var url = this.art.option.subtitle.url;
 
 	    if (url) {
@@ -2177,7 +2181,6 @@
 	    value: function show() {
 	      var $subtitle = this.art.refs.$subtitle;
 	      $subtitle.style.display = 'block';
-	      this.isShow = true;
 	      this.art.emit('subtitle:show', $subtitle);
 	    }
 	  }, {
@@ -2185,7 +2188,6 @@
 	    value: function hide() {
 	      var $subtitle = this.art.refs.$subtitle;
 	      $subtitle.style.display = 'none';
-	      this.isShow = false;
 	      this.art.emit('subtitle:hide', $subtitle);
 	    }
 	  }, {

docs/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../src/verification/scheme.js","../../src/verification/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n  if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n  if (Reflect.construct.sham) return false;\n  if (typeof Proxy === \"function\") return true;\n\n  try {\n    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nfunction _construct(Parent, args, Class) {\n  if (isNativeReflectConstruct()) {\n    module.exports = _construct = Reflect.construct;\n  } else {\n    module.exports = _construct = function _construct(Parent, args, Class) {\n      var a = [null];\n      a.push.apply(a, args);\n      var Constructor = Function.bind.apply(Parent, a);\n      var instance = new Constructor();\n      if (Class) setPrototypeOf(instance, Class.prototype);\n      return instance;\n    };\n  }\n\n  return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n  if (Array.isArray(arr)) {\n    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n      arr2[i] = arr[i];\n    }\n\n    return arr2;\n  }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n  throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.definLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../src/verification/scheme.js","../../src/verification/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n  if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n  if (Reflect.construct.sham) return false;\n  if (typeof Proxy === \"function\") return true;\n\n  try {\n    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nfunction _construct(Parent, args, Class) {\n  if (isNativeReflectConstruct()) {\n    module.exports = _construct = Reflect.construct;\n  } else {\n    module.exports = _construct = function _construct(Parent, args, Class) {\n      var a = [null];\n      a.push.apply(a, args);\n      var Constructor = Function.bind.apply(Parent, a);\n      var instance = new Constructor();\n      if (Class) setPrototypeOf(instance, Class.prototype);\n      return instance;\n    };\n  }\n\n  return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n  if (Array.isArray(arr)) {\n    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n      arr2[i] = arr[i];\n    }\n\n    return arr2;\n  }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread() {\n  throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","var arrayWithoutHoles = require(\"./arrayWithoutHoles\");\n\nvar iterableToArray = require(\"./iterableToArray\");\n\nvar nonIterableSpread = require(\"./nonIterableSpread\");\n\nfunction _toConsumableArray(arr) {\n  return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();\n}\n\nmodule.exports = _toConsumableArray;","function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.definLine truncated

src/controls/subtitle.js

@@ -9,18 +9,21 @@ export default class Subtitle {
   apply(art) {
     const { events: { proxy }, subtitle, i18n } = art;
     this.$subtitle = append(this.option.$control, icons.subtitle);
+    this.$subtitleClose = append(this.option.$control, icons.subtitleClose);
     tooltip(this.$subtitle, i18n.get('Hide subtitle'));
+    tooltip(this.$subtitleClose, i18n.get('Show subtitle'));
+    this.$subtitleClose.style.display = 'none';
 
     proxy(this.$subtitle, 'click', () => {
-      if (subtitle.isShow) {
-        subtitle.hide();
-        tooltip(this.$subtitle, i18n.get('Show subtitle'));
-        this.$subtitle.style.opacity = '.5';
-      } else {
-        subtitle.show();
-        tooltip(this.$subtitle, i18n.get('Hide subtitle'));
-        this.$subtitle.style.opacity = '1';
-      }
+      subtitle.hide();
+      this.$subtitle.style.display = 'none';
+      this.$subtitleClose.style.display = 'block';
+    });
+
+    proxy(this.$subtitleClose, 'click', () => {
+      subtitle.show();
+      this.$subtitle.style.display = 'block';
+      this.$subtitleClose.style.display = 'none';
     });
   }
 }

src/icons/index.js

@@ -5,6 +5,7 @@ import pause from './pause.svg';
 import volume from './volume.svg';
 import volumeClose from './volume-close.svg';
 import subtitle from './subtitle.svg';
+import subtitleClose from './subtitle-close.svg';
 
 const icons = {
   loading,
@@ -13,7 +14,8 @@ const icons = {
   pause,
   volume,
   volumeClose,
-  subtitle
+  subtitle,
+  subtitleClose
 };
 
 function creatDomFromSvg(map) {

src/icons/subtitle-close.svg

@@ -0,0 +1,4 @@
+<svg style="width: 100%; height: 100%; opacity: .5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"/>
+</svg>

src/subtitle.js

@@ -3,7 +3,6 @@ import { errorHandle, getExt, setStyle } from './utils';
 export default class Subtitle {
   constructor(art) {
     this.art = art;
-    this.isShow = true;
 
     const { url } = this.art.option.subtitle;
     if (url) {
@@ -93,14 +92,12 @@ export default class Subtitle {
   show() {
     const { $subtitle } = this.art.refs;
     $subtitle.style.display = 'block';
-    this.isShow = true;
     this.art.emit('subtitle:show', $subtitle);
   }
 
   hide() {
     const { $subtitle } = this.art.refs;
     $subtitle.style.display = 'none';
-    this.isShow = false;
     this.art.emit('subtitle:hide', $subtitle);
   }