优化全屏的错误处理

src/controls/fullscreen-web.js

@@ -8,7 +8,8 @@ export default class FullscreenWeb {
   }
 
   apply(art, $control) {
-    const { events: { proxy }, i18n, player, controls, refs: { $player } } = art;
+    this.art = art;
+    const { events: { proxy }, i18n, player, controls } = art;
     this.$fullscreenWeb = append($control, icons.fullscreenWeb);
     tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
     proxy($control, 'click', () => {
@@ -16,19 +17,33 @@ export default class FullscreenWeb {
         controls.fullscreen.exit();
       }
 
-      if (this.state) {
-        this.state = false;
-        $player.classList.remove('artplayer-web-fullscreen');
-        setStyle(this.$fullscreenWeb, 'opacity', '1');
-        tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
-      } else {
-        this.state = true;
-        $player.classList.add('artplayer-web-fullscreen');
-        setStyle(this.$fullscreenWeb, 'opacity', '0.8');
-        tooltip(this.$fullscreenWeb, i18n.get('Exit web fullscreen'));
-      }
+      this.toggle();
       player.resetAspectRatio();
       art.emit('fullscreenWeb', this.state);
     });
   }
+
+  enabled() {
+    const { i18n, refs: { $player } } = this.art;
+    this.state = true;
+    $player.classList.add('artplayer-web-fullscreen');
+    setStyle(this.$fullscreenWeb, 'opacity', '0.8');
+    tooltip(this.$fullscreenWeb, i18n.get('Exit web fullscreen'));
+  }
+
+  exit() {
+    const { i18n, refs: { $player } } = this.art;
+    this.state = false;
+    $player.classList.remove('artplayer-web-fullscreen');
+    setStyle(this.$fullscreenWeb, 'opacity', '1');
+    tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
+  }
+
+  toggle() {
+    if (this.state) {
+      this.exit();
+    } else {
+      this.enabled();
+    }
+  }
 }

src/controls/fullscreen.js

@@ -1,4 +1,4 @@
-import { append, tooltip, setStyle, sleep } from '../utils';
+import { append, tooltip, setStyle } from '../utils';
 import icons from '../icons';
 import screenfull from 'screenfull';
 
@@ -13,26 +13,16 @@ export default class Fullscreen {
 
   apply(art, $control) {
     this.art = art;
-    const { events: { destroyEvents, proxy }, i18n, player, notice, refs: { $player } } = art;
+    const { events: { destroyEvents, proxy }, i18n, player, controls, notice } = art;
     this.$fullscreen = append($control, icons.fullscreen);
     tooltip(this.$fullscreen, i18n.get('Fullscreen'));
 
     proxy($control, 'click', () => {
-      if (screenfull.enabled) {
-        if (screenfull.isFullscreen) {
-          screenfull.exit();
-          $player.classList.remove('artplayer-fullscreen');
-          setStyle(this.$fullscreen, 'opacity', '1');
-          tooltip(this.$fullscreen, i18n.get('Fullscreen'));
-        } else {
-          $player.classList.add('artplayer-fullscreen');
-          setStyle(this.$fullscreen, 'opacity', '0.8');
-          tooltip(this.$fullscreen, i18n.get('Exit fullscreen'));
-          screenfull.request($player);
-        }
-      } else {
-        notice.show('Your browser does not seem to support full screen functionality.');
+      if (controls.fullscreenWeb) {
+        controls.fullscreenWeb.exit();
       }
+
+      this.toggle();
     });
 
     const screenfullChange = () => {
@@ -40,18 +30,41 @@ export default class Fullscreen {
       art.emit('fullscreen', screenfull.isFullscreen);
     };
 
+    const screenfullError = () => {
+      notice.show('Your browser does not seem to support full screen functionality.');
+    };
+
     screenfull.on('change', screenfullChange);
+    screenfull.on('error', screenfullError);
     destroyEvents.push(() => {
       screenfull.off('change', screenfullChange);
+      screenfull.off('error', screenfullError);
     });
   }
 
+  enabled() {
+    const { i18n, refs: { $player } } = this.art;
+    $player.classList.add('artplayer-fullscreen');
+    setStyle(this.$fullscreen, 'opacity', '0.8');
+    tooltip(this.$fullscreen, i18n.get('Exit fullscreen'));
+    screenfull.request($player);
+  }
+
   exit() {
+    const { i18n, refs: { $player } } = this.art;
+    $player.classList.remove('artplayer-fullscreen');
+    setStyle(this.$fullscreen, 'opacity', '1');
+    tooltip(this.$fullscreen, i18n.get('Fullscreen'));
     screenfull.exit();
   }
 
   toggle() {
-    const { $player } = this.art.refs;
-    screenfull.toggle($player);
+    if (screenfull.enabled) {
+      if (screenfull.isFullscreen) {
+        this.exit();
+      } else {
+        this.enabled();
+      }
+    }
   }
 }