typofix

src/icons/close.svg

@@ -1,3 +0,0 @@
-<svg height="100%" viewBox="0 0 24 24" width="100%">
-    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="#fff"></path>
-</svg>

src/index.js

@@ -1,6 +1,6 @@
 import './style';
 import 'balloon-css/balloon.min.css';
-import { deepMerge } from './utils';
+import { instances, deepMerge } from './utils';
 import optionValidator from 'option-validator';
 import scheme from './scheme';
 import config from './config';
@@ -22,8 +22,6 @@ import Mask from './mask';
 import Setting from './setting';
 
 let id = 0;
-export const instances = [];
-
 class Artplayer extends Emitter {
   constructor(option) {
     super();
@@ -72,6 +70,7 @@ class Artplayer extends Emitter {
       setting: false,
       hotkey: true,
       pip: true,
+      mutex: true,
       fullscreen: true,
       fullscreenWeb: true,
       subtitle: {
@@ -91,20 +90,19 @@ class Artplayer extends Emitter {
     };
   }
 
-  static use(Plugin) {
-    const name = Plugin.name.toLowerCase();
-    const installedPlugins = this.plugins || (this.plugins = {});
-    if (!installedPlugins[name]) {
+  static use(plugin) {
+    const installedPlugins = this.plugins || (this.plugins = []);
+    if (installedPlugins.indexOf === -1) {
+      installedPlugins.push(plugin);
       const args = Array.from(arguments).slice(1);
       args.unshift(this);
-      installedPlugins[name] = new Plugin(...args);
-      this.prototype.emit('use', Plugin);
+      plugin.apply(null, args);
+      this.prototype.emit('use', plugin);
     }
     return this;
   }
 
   init() {
-    this.isError = false;
     this.isFocus = false;
     this.isPlaying = false;
     this.refs = {};
@@ -133,7 +131,6 @@ class Artplayer extends Emitter {
 
     this.id = id++;
     instances.push(this);
-    return this;
   }
 
   destroy(removeHtml = false) {

src/loading.js

@@ -4,11 +4,7 @@ import { append, setStyle } from './utils';
 export default class Loading {
   constructor(art) {
     this.art = art;
-    this.init();
-  }
-
-  init() {
-    const { option, refs: { $loading } } = this.art;
+    const { option, refs: { $loading } } = art;
     append($loading, option.loading || icons.loading);
   }
 

src/mask.js

@@ -4,11 +4,7 @@ import { append, setStyle } from './utils';
 export default class Mask {
   constructor(art) {
     this.art = art;
-    this.init();
-  }
-
-  init() {
-    const { option, refs: { $mask } } = this.art;
+    const { option, refs: { $mask } } = art;
     append($mask, option.play || icons.playBig);
   }
 

src/player/eventInit.js

@@ -75,7 +75,6 @@ export default function eventInit(art, player) {
         notice.show(`${i18n.get('Reconnect')}: ${player.reconnectTime}`);
       });
     } else {
-      art.isError = true;
       art.isPlaying = false;
       art.loading.hide();
       art.controls.hide();

src/player/playMix.js

@@ -1,5 +1,7 @@
+import { instances } from '../utils';
+
 export default function playMix(art, player) {
-  const { refs: { $video }, i18n, notice } = art;
+  const { refs: { $video }, i18n, notice, option: { mutex } } = art;
 
   Object.defineProperty(player, 'play', {
     value: () => {
@@ -10,6 +12,11 @@ export default function playMix(art, player) {
           console.warn(err);
         });
       }
+
+      if (mutex) {
+        instances.forEach(item => item.player.pause());
+      }
+
       notice.show(i18n.get('Play'));
       art.emit('play', $video);
     }

src/scheme/index.js

@@ -65,6 +65,7 @@ export default {
   theme: 'string',
   hotkey: 'boolean',
   pip: 'boolean',
+  mutex: 'boolean',
   fullscreen: 'boolean',
   fullscreenWeb: 'boolean',
   subtitle: {

src/subtitle.js

@@ -4,6 +4,7 @@ export default class Subtitle {
   constructor(art) {
     this.art = art;
     this.isOpen = true;
+    this.vttText = '';
     const { url } = this.art.option.subtitle;
     if (url) {
       this.checkExt(url);
@@ -50,18 +51,21 @@ export default class Subtitle {
       })
       .then(text => {
         if ((/x-subrip/gi).test(type)) {
-          return this.srtToVtt(text);
+          this.vttText = this.srtToVtt(text);
+        } else {
+          this.vttText = text;
         }
-        return url;
+        return this.vttToBlob(this.vttText);
       })
       .catch(err => {
         notice.show(err);
+        console.warn(err);
         throw err;
       });
   }
 
   srtToVtt(text) {
-    const vttText = 'WEBVTT \r\n\r\n'.concat(
+    return 'WEBVTT \r\n\r\n'.concat(
       text
         .replace(/\{\\([ibu])\}/g, '</$1>')
         .replace(/\{\\([ibu])1\}/g, '<$1>')
@@ -70,6 +74,9 @@ export default class Subtitle {
         .replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g, '$1.$2')
         .concat('\r\n\r\n')
     );
+  }
+
+  vttToBlob(vttText) {
     return URL.createObjectURL(
       new Blob([vttText], {
         type: 'text/vtt'
@@ -101,7 +108,7 @@ export default class Subtitle {
     this.art.emit('subtitle:hide', $subtitle);
   }
 
-  switch(url, name = '') {
+  switch(url, name = 'unknown') {
     const { $track, i18n, notice } = this.art.refs;
     this.checkExt(url);
     errorHandle($track, 'You need to initialize the subtitle option first.');

src/utils/index.js

@@ -1,3 +1,5 @@
+export const instances = [];
+
 export class ArtPlayerError extends Error {
   constructor(message, context) {
     super(message);