优化全屏的错误处理

docs/js/artplayer.js

@@ -1447,26 +1447,16 @@
 	          proxy = _art$events.proxy,
 	          i18n = art.i18n,
 	          player = art.player,
-	          notice = art.notice,
+	          controls = art.controls,
-	          $player = art.refs.$player;
+	          notice = art.notice;
 	      this.$fullscreen = append($control, icons$1.fullscreen);
 	      tooltip(this.$fullscreen, i18n.get('Fullscreen'));
 	      proxy($control, 'click', function () {
-	        if (screenfull.enabled) {
+	        if (controls.fullscreenWeb) {
-	          if (screenfull.isFullscreen) {
+	          controls.fullscreenWeb.exit();
-	            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.');
 	        }
+
+	        _this.toggle();
 	      });
 
 	      var screenfullChange = function screenfullChange() {
@@ -1474,21 +1464,49 @@
 	        art.emit('fullscreen', screenfull.isFullscreen);
 	      };
 
+	      var screenfullError = function screenfullError() {
+	        notice.show('Your browser does not seem to support full screen functionality.');
+	      };
+
 	      screenfull.on('change', screenfullChange);
+	      screenfull.on('error', screenfullError);
 	      destroyEvents.push(function () {
 	        screenfull.off('change', screenfullChange);
+	        screenfull.off('error', screenfullError);
 	      });
 	    }
+	  }, {
+	    key: "enabled",
+	    value: function enabled() {
+	      var _this$art = this.art,
+	          i18n = _this$art.i18n,
+	          $player = _this$art.refs.$player;
+	      $player.classList.add('artplayer-fullscreen');
+	      setStyle(this.$fullscreen, 'opacity', '0.8');
+	      tooltip(this.$fullscreen, i18n.get('Exit fullscreen'));
+	      screenfull.request($player);
+	    }
 	  }, {
 	    key: "exit",
 	    value: function exit() {
+	      var _this$art2 = this.art,
+	          i18n = _this$art2.i18n,
+	          $player = _this$art2.refs.$player;
+	      $player.classList.remove('artplayer-fullscreen');
+	      setStyle(this.$fullscreen, 'opacity', '1');
+	      tooltip(this.$fullscreen, i18n.get('Fullscreen'));
 	      screenfull.exit();
 	    }
 	  }, {
 	    key: "toggle",
 	    value: function toggle() {
-	      var $player = this.art.refs.$player;
+	      if (screenfull.enabled) {
-	      screenfull.toggle($player);
+	        if (screenfull.isFullscreen) {
+	          this.exit();
+	        } else {
+	          this.enabled();
+	        }
+	      }
 	    }
 	  }, {
 	    key: "state",
@@ -1515,11 +1533,11 @@
 	    value: function apply(art, $control) {
 	      var _this = this;
 
+	      this.art = art;
 	      var proxy = art.events.proxy,
 	          i18n = art.i18n,
 	          player = art.player,
-	          controls = art.controls,
+	          controls = art.controls;
-	          $player = art.refs.$player;
 	      this.$fullscreenWeb = append($control, icons$1.fullscreenWeb);
 	      tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
 	      proxy($control, 'click', function () {
@@ -1527,22 +1545,43 @@
 	          controls.fullscreen.exit();
 	        }
 
-	        if (_this.state) {
+	        _this.toggle();
-	          _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'));
-	        }
 
 	        player.resetAspectRatio();
 	        art.emit('fullscreenWeb', _this.state);
 	      });
 	    }
+	  }, {
+	    key: "enabled",
+	    value: function enabled() {
+	      var _this$art = this.art,
+	          i18n = _this$art.i18n,
+	          $player = _this$art.refs.$player;
+	      this.state = true;
+	      $player.classList.add('artplayer-web-fullscreen');
+	      setStyle(this.$fullscreenWeb, 'opacity', '0.8');
+	      tooltip(this.$fullscreenWeb, i18n.get('Exit web fullscreen'));
+	    }
+	  }, {
+	    key: "exit",
+	    value: function exit() {
+	      var _this$art2 = this.art,
+	          i18n = _this$art2.i18n,
+	          $player = _this$art2.refs.$player;
+	      this.state = false;
+	      $player.classList.remove('artplayer-web-fullscreen');
+	      setStyle(this.$fullscreenWeb, 'opacity', '1');
+	      tooltip(this.$fullscreenWeb, i18n.get('Web fullscreen'));
+	    }
+	  }, {
+	    key: "toggle",
+	    value: function toggle() {
+	      if (this.state) {
+	        this.exit();
+	      } else {
+	        this.enabled();
+	      }
+	    }
 	  }]);
 
 	  return FullscreenWeb;

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","../../node_modules/option-validator/dist/option-validator.js","../../src/scheme/validElement.js","../../src/scheme/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/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/index.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/danmu.js","../../node_modules/screenfull/dist/screenfull.js","../../src/controls/fullscreen.js","../../src/controls/fullscreen-web.js","../../src/controls/pip.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/screenshot.js","../../src/controls/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.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/setting/common.js","../../src/setting/index.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 = _nonItLine 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","../../node_modules/option-validator/dist/option-validator.js","../../src/scheme/validElement.js","../../src/scheme/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/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/index.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/danmu.js","../../node_modules/screenfull/dist/screenfull.js","../../src/controls/fullscreen.js","../../src/controls/fullscreen-web.js","../../src/controls/pip.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/screenshot.js","../../src/controls/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.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/setting/common.js","../../src/setting/index.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 = _nonItLine truncated

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.toggle();
-        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'));
-      }
       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 (controls.fullscreenWeb) {
-        if (screenfull.isFullscreen) {
+        controls.fullscreenWeb.exit();
-          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.');
       }
+
+      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;
+    if (screenfull.enabled) {
-    screenfull.toggle($player);
+      if (screenfull.isFullscreen) {
+        this.exit();
+      } else {
+        this.enabled();
+      }
+    }
   }
 }