修正icon

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);
   }