add subtitle

docs/js/artplayer.js

@@ -702,7 +702,9 @@
 	    'Pause': '暂停',
 	    'Rate': '速度',
 	    'Mute': '静音',
-	    'Reconnect': '重新连接'
+	    'Reconnect': '重新连接',
+	    'Hide subtitle': '隐藏字幕',
+	    'Show subtitle': '显示字幕'
 	  },
 	  'zh-tw': {
 	    'About author': '關於作者',
@@ -714,7 +716,9 @@
 	    'Pause': '暫停',
 	    'Rate': '速度',
 	    'Mute': '靜音',
-	    'Reconnect': '重新連接'
+	    'Reconnect': '重新連接',
+	    'Hide subtitle': '隱藏字幕',
+	    'Show subtitle': '顯示字幕'
 	  }
 	};
 
@@ -1094,13 +1098,16 @@
 
 	var volumeClose = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 100%; height: 100%\" viewBox=\"0 0 22 22\">\n    <path d=\"M15 11a3.998 3.998 0 0 0-2-3.465v2.636l1.865 1.865A4.02 4.02 0 0 0 15 11z\"></path>\n    <path d=\"M13.583 5.583A5.998 5.998 0 0 1 17 11a6 6 0 0 1-.585 2.587l1.477 1.477a8.001 8.001 0 0 0-3.446-11.286 1 1 0 0 0-.863 1.805zM18.778 18.778l-2.121-2.121-1.414-1.414-1.415-1.415L13 13l-2-2-3.889-3.889-3.889-3.889a.999.999 0 1 0-1.414 1.414L5.172 8H5a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1l4.188 3.35a.5.5 0 0 0 .812-.39v-3.131l2.587 2.587-.01.005a1 1 0 0 0 .86 1.806c.215-.102.424-.214.627-.333l2.3 2.3a1.001 1.001 0 0 0 1.414-1.416zM11 5.04a.5.5 0 0 0-.813-.39L8.682 5.854 11 8.172V5.04z\"></path>\n</svg>";
 
+	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 icons = {
 	  loading: loading,
 	  playBig: playBig,
 	  play: play,
 	  pause: pause,
 	  volume: volume,
-	  volumeClose: volumeClose
+	  volumeClose: volumeClose,
+	  subtitle: subtitle
 	};
 
 	function creatDomFromSvg(map) {
@@ -1130,18 +1137,11 @@
 	  createClass(PlayAndPause, [{
 	    key: "apply",
 	    value: function apply(art) {
-	      this.art = art;
-	      this.init();
-	    }
-	  }, {
-	    key: "init",
-	    value: function init() {
 	      var _this = this;
 
-	      var _this$art = this.art,
+	      var proxy = art.events.proxy,
-	          proxy = _this$art.events.proxy,
+	          player = art.player,
-	          player = _this$art.player,
+	          i18n = art.i18n;
-	          i18n = _this$art.i18n;
 	      this.$play = append(this.option.$control, icons$1.play);
 	      this.$pause = append(this.option.$control, icons$1.pause);
 	      tooltip(this.$play, i18n.get('Play'));
@@ -1153,11 +1153,11 @@
 	      proxy(this.$pause, 'click', function () {
 	        player.pause();
 	      });
-	      this.art.on('video:playing', function () {
+	      art.on('video:playing', function () {
 	        _this.$play.style.display = 'none';
 	        _this.$pause.style.display = 'block';
 	      });
-	      this.art.on('video:pause', function () {
+	      art.on('video:pause', function () {
 	        _this.$play.style.display = 'block';
 	        _this.$pause.style.display = 'none';
 	      });
@@ -1174,16 +1174,16 @@
 	    classCallCheck(this, Progress);
 
 	    this.option = option;
+	    this.isDroging = false;
+	    this.getLoaded = this.getLoaded.bind(this);
+	    this.getPlayed = this.getPlayed.bind(this);
+	    this.set = this.set.bind(this);
 	  }
 
 	  createClass(Progress, [{
 	    key: "apply",
 	    value: function apply(art) {
 	      this.art = art;
-	      this.isDroging = false;
-	      this.getLoaded = this.getLoaded.bind(this);
-	      this.getPlayed = this.getPlayed.bind(this);
-	      this.set = this.set.bind(this);
 	      this.init();
 	    }
 	  }, {
@@ -1353,7 +1353,24 @@
 	  createClass(Subtitle, [{
 	    key: "apply",
 	    value: function apply(art) {
-	      this.art = art;
+	      var _this = this;
+
+	      var proxy = art.events.proxy,
+	          subtitle = art.subtitle,
+	          i18n = art.i18n;
+	      this.$subtitle = append(this.option.$control, icons$1.subtitle);
+	      tooltip(this.$subtitle, i18n.get('Hide subtitle'));
+	      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';
+	        }
+	      });
 	    }
 	  }]);
 
@@ -1409,13 +1426,13 @@
 	    classCallCheck(this, Volume);
 
 	    this.option = option;
+	    this.isDroging = false;
 	  }
 
 	  createClass(Volume, [{
 	    key: "apply",
 	    value: function apply(art) {
 	      this.art = art;
-	      this.isDroging = false;
 	      this.init();
 	    }
 	  }, {
@@ -2070,6 +2087,7 @@
 	    classCallCheck(this, Subtitle);
 
 	    this.art = art;
+	    this.isShow = true;
 	    var url = this.art.option.subtitle.url;
 
 	    if (url) {
@@ -2159,6 +2177,7 @@
 	    value: function show() {
 	      var $subtitle = this.art.refs.$subtitle;
 	      $subtitle.style.display = 'block';
+	      this.isShow = true;
 	      this.art.emit('subtitle:show', $subtitle);
 	    }
 	  }, {
@@ -2166,6 +2185,7 @@
 	    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/playAndPause.js

@@ -7,13 +7,7 @@ export default class PlayAndPause {
   }
 
   apply(art) {
-    this.art = art;
+    const { events: { proxy }, player, i18n } = art;
-    this.init();
-  }
-
-  init() {
-    const { events: { proxy }, player, i18n } = this.art;
-
     this.$play = append(this.option.$control, icons.play);
     this.$pause = append(this.option.$control, icons.pause);
     tooltip(this.$play, i18n.get('Play'));
@@ -28,12 +22,12 @@ export default class PlayAndPause {
       player.pause();
     });
 
-    this.art.on('video:playing', () => {
+    art.on('video:playing', () => {
       this.$play.style.display = 'none';
       this.$pause.style.display = 'block';
     });
 
-    this.art.on('video:pause', () => {
+    art.on('video:pause', () => {
       this.$play.style.display = 'block';
       this.$pause.style.display = 'none';
     });

src/controls/progress.js

@@ -3,14 +3,14 @@ import { append, clamp, secondToTime } from '../utils';
 export default class Progress {
   constructor(option) {
     this.option = option;
-  }
-
-  apply(art) {
-    this.art = art;
     this.isDroging = false;
     this.getLoaded = this.getLoaded.bind(this);
     this.getPlayed = this.getPlayed.bind(this);
     this.set = this.set.bind(this);
+  }
+
+  apply(art) {
+    this.art = art;
     this.init();
   }
 

src/controls/subtitle.js

@@ -1,9 +1,26 @@
+import { append, tooltip } from '../utils';
+import icons from '../icons';
+
 export default class Subtitle {
   constructor(option) {
     this.option = option;
   }
 
   apply(art) {
-    this.art = art;
+    const { events: { proxy }, subtitle, i18n } = art;
+    this.$subtitle = append(this.option.$control, icons.subtitle);
+    tooltip(this.$subtitle, i18n.get('Hide subtitle'));
+
+    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';
+      }
+    });
   }
 }

src/controls/volume.js

@@ -4,11 +4,11 @@ import icons from '../icons';
 export default class Volume {
   constructor(option) {
     this.option = option;
+    this.isDroging = false;
   }
 
   apply(art) {
     this.art = art;
-    this.isDroging = false;
     this.init();
   }
 

src/i18n.js

@@ -9,7 +9,9 @@ let i18nMap = {
     'Pause': '暂停',
     'Rate': '速度',
     'Mute': '静音',
-    'Reconnect': '重新连接'
+    'Reconnect': '重新连接',
+    'Hide subtitle': '隐藏字幕',
+    'Show subtitle': '显示字幕'
   },
   'zh-tw': {
     'About author': '關於作者',
@@ -21,7 +23,9 @@ let i18nMap = {
     'Pause': '暫停',
     'Rate': '速度',
     'Mute': '靜音',
-    'Reconnect': '重新連接'
+    'Reconnect': '重新連接',
+    'Hide subtitle': '隱藏字幕',
+    'Show subtitle': '顯示字幕'
   }
 };
 

src/icons/index.js

@@ -4,6 +4,7 @@ import play from './play.svg';
 import pause from './pause.svg';
 import volume from './volume.svg';
 import volumeClose from './volume-close.svg';
+import subtitle from './subtitle.svg';
 
 const icons = {
   loading,
@@ -11,7 +12,8 @@ const icons = {
   play,
   pause,
   volume,
-  volumeClose
+  volumeClose,
+  subtitle
 };
 
 function creatDomFromSvg(map) {

src/icons/subtitle.svg

@@ -0,0 +1,4 @@
+<svg style="width: 100%; height: 100%" 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,6 +3,7 @@ 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) {
@@ -92,12 +93,14 @@ 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);
   }