add subtitle

src/controls/playAndPause.js

@@ -7,13 +7,7 @@ export default class PlayAndPause {
   }
 
   apply(art) {
-    this.art = art;
-    this.init();
-  }
-
-  init() {
-    const { events: { proxy }, player, i18n } = this.art;
-
+    const { events: { proxy }, player, i18n } = 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);
   }