build all packages

packages/artplayer/dist/artplayer.js

@@ -5,4 +5,4 @@
  * Released under the MIT License.
  */
 
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,function(){"use strict";var o=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var r=function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t,e){return t(e={exports:{}},e.exports),e.exports}var s=t(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=i=function(t){return n(t)}:e.exports=i=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},i(t)}e.exports=i});var a=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var c=function(t,e){return!e||"object"!==s(e)&&"function"!=typeof e?a(t):e},l=t(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),u=t(function(n){function i(t,e){return n.exports=i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},i(t,e)}n.exports=i});var e=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)},d=t(function(t,e){function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t){return t.constructor?t.constructor.name:null}function a(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];for(var i in u(t,e,n),d(t,e,n),f(t,e,n),e)if(e.hasOwnProperty(i)){var r=t[i],a=e[i],o=n.concat(i);if(l(t,i,a,o))continue;u(r,a,o),d(r,a,o),f(r,a,o)}}function l(t,e,n,i){if(!Object.prototype.hasOwnProperty.call(t,e)){if(!0===n.__required__||!0===n.required)throw new TypeError("'".concat(i.join("."),"' is required"));return!0}}function u(t,e,n){var i;if("string"===o(e)?i=e:"function"===o(e)?e.___validator__=e:e.__type__?i=e.__type__:e.type&&(i=e.type),i&&"string"===o(i)){i=i.trim().toLowerCase();var r=o(t),a=r===i;if(-1<i.indexOf("|")&&(a=i.split("|").filter(Boolean).some(function(t){return r===t.trim()})),!a)throw new TypeError("'".concat(n.join("."),"' require '").concat(i,"' type, but got '").concat(r,"'"))}}function d(t,e,n){var i;if(e.___validator__?i=e.___validator__:e.validator&&(i=e.validator),"function"===o(i)){var r=i(n,t,o(t));if(!0!==r)throw new TypeError("The scheme for '".concat(n.join("."),"' validator function require return true, but got '").concat(r,"'"))}}function f(t,e,n){var i;if(e.___child__?i=e.___child__:e.child&&(i=e.child),"object"===o(i)){var r=o(t);"object"===r?a(t,i,n):"array"===r&&t.forEach(function(t,e){a(t,i,n.concat(e))})}}var p,o;t.exports=(p=Object.prototype.toString,a.kindOf=o=function(t){if(void 0===t)return"undefined";if(null===t)return"null";var e,n,i,r,a,o=s(t);if("boolean"===o)return"boolean";if("string"===o)return"string";if("number"===o)return"number";if("symbol"===o)return"symbol";if("function"===o)return"GeneratorFunction"===c(t)?"generatorfunction":"function";if(e=t,Array.isArray?Array.isArray(e):e instanceof Array)return"array";if(function(t){return!(!t.constructor||"function"!=typeof t.constructor.isBuffer)&&t.constructor.isBuffer(t)}(t))return"buffer";if(function(t){try{if("number"==typeof t.length&&"function"==typeof t.callee)return!0}catch(t){if(-1!==t.message.indexOf("callee"))return!0}return!1}(t))return"arguments";if((n=t)instanceof Date||"function"==typeof n.toDateString&&"function"==typeof n.getDate&&"function"==typeof n.setDate)return"date";if((i=t)instanceof Error||"string"==typeof i.message&&i.constructor&&"number"==typeof i.constructor.stackTraceLimit)return"error";if((r=t)instanceof RegExp||"string"==typeof r.flags&&"boolean"==typeof r.ignoreCase&&"boolean"==typeof r.multiline&&"boolean"==typeof r.global)return"regexp";switch(c(t)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uint8clampedarray";case"Int16Array":return"int16Line truncated
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,function(){"use strict";var a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var r=function(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t,e){return t(e={exports:{}},e.exports),e.exports}var s=t(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=i=function(t){return n(t)}:e.exports=i=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},i(t)}e.exports=i});var o=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var c=function(t,e){return!e||"object"!==s(e)&&"function"!=typeof e?o(t):e},l=t(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),u=t(function(n){function i(t,e){return n.exports=i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},i(t,e)}n.exports=i});var e=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)},f=t(function(t,e){function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t){return t.constructor?t.constructor.name:null}function o(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];for(var i in u(t,e,n),f(t,e,n),d(t,e,n),e)if(e.hasOwnProperty(i)){var r=t[i],o=e[i],a=n.concat(i);if(l(t,i,o,a))continue;u(r,o,a),f(r,o,a),d(r,o,a)}}function l(t,e,n,i){if(!Object.prototype.hasOwnProperty.call(t,e)){if(!0===n.__required__||!0===n.required)throw new TypeError("'".concat(i.join("."),"' is required"));return!0}}function u(t,e,n){var i;if("string"===a(e)?i=e:"function"===a(e)?e.___validator__=e:e.__type__?i=e.__type__:e.type&&(i=e.type),i&&"string"===a(i)){i=i.trim().toLowerCase();var r=a(t),o=r===i;if(-1<i.indexOf("|")&&(o=i.split("|").filter(Boolean).some(function(t){return r===t.trim()})),!o)throw new TypeError("'".concat(n.join("."),"' require '").concat(i,"' type, but got '").concat(r,"'"))}}function f(t,e,n){var i;if(e.___validator__?i=e.___validator__:e.validator&&(i=e.validator),"function"===a(i)){var r=i(n,t,a(t));if(!0!==r)throw new TypeError("The scheme for '".concat(n.join("."),"' validator function require return true, but got '").concat(r,"'"))}}function d(t,e,n){var i;if(e.___child__?i=e.___child__:e.child&&(i=e.child),"object"===a(i)){var r=a(t);"object"===r?o(t,i,n):"array"===r&&t.forEach(function(t,e){o(t,i,n.concat(e))})}}var p,a;t.exports=(p=Object.prototype.toString,o.kindOf=a=function(t){if(void 0===t)return"undefined";if(null===t)return"null";var e,n,i,r,o,a=s(t);if("boolean"===a)return"boolean";if("string"===a)return"string";if("number"===a)return"number";if("symbol"===a)return"symbol";if("function"===a)return"GeneratorFunction"===c(t)?"generatorfunction":"function";if(e=t,Array.isArray?Array.isArray(e):e instanceof Array)return"array";if(function(t){return!(!t.constructor||"function"!=typeof t.constructor.isBuffer)&&t.constructor.isBuffer(t)}(t))return"buffer";if(function(t){try{if("number"==typeof t.length&&"function"==typeof t.callee)return!0}catch(t){if(-1!==t.message.indexOf("callee"))return!0}return!1}(t))return"arguments";if((n=t)instanceof Date||"function"==typeof n.toDateString&&"function"==typeof n.getDate&&"function"==typeof n.setDate)return"date";if((i=t)instanceof Error||"string"==typeof i.message&&i.constructor&&"number"==typeof i.constructor.stackTraceLimit)return"error";if((r=t)instanceof RegExp||"string"==typeof r.flags&&"boolean"==typeof r.ignoreCase&&"boolean"==typeof r.multiline&&"boolean"==typeof r.global)return"regexp";switch(c(t)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uint8clampedarray";case"Int16Array":return"int16Line truncated

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -16,7 +16,7 @@ export default function aspectRatio(menuOption) {
                 const { ratio } = target.dataset;
                 if (ratio) {
                     player.aspectRatio = ratio;
-                    art.contextmenu.hide();
+                    art.contextmenu.show = false;
                 }
             },
             mounted: $menu => {

packages/artplayer/src/contextmenu/close.js

@@ -3,7 +3,7 @@ export default function close(menuOption) {
         ...menuOption,
         html: art.i18n.get('Close'),
         click: () => {
-            art.contextmenu.hide();
+            art.contextmenu.show = false;
         },
     });
 }

packages/artplayer/src/contextmenu/index.js

@@ -15,7 +15,7 @@ export default class Contextmenu {
         });
 
         this.art.on('blur', () => {
-            this.hide();
+            this.show = false;
         });
     }
 
@@ -62,13 +62,13 @@ export default class Contextmenu {
 
         proxy($player, 'contextmenu', event => {
             event.preventDefault();
-            this.show();
+            this.show = true;
             this.setPos(event);
         });
 
         proxy($player, 'click', event => {
             if (!event.composedPath().includes($contextmenu)) {
-                this.hide();
+                this.show = false;
             }
         });
     }
@@ -100,17 +100,20 @@ export default class Contextmenu {
         setStyle($contextmenu, 'top', `${menuTop}px`);
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.add('artplayer-contextmenu-show');
-        this.art.emit('contextmenu:show');
+        if (value) {
+            this.state = true;
+            $player.classList.add('artplayer-contextmenu-show');
+            this.art.emit('contextmenu:show');
+        } else {
+            this.state = false;
+            $player.classList.remove('artplayer-contextmenu-show');
+            this.art.emit('contextmenu:hide');
+        }
     }
 
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.remove('artplayer-contextmenu-show');
-        this.art.emit('contextmenu:hide');
+    toggle() {
+        this.show = !this.state;
     }
 }

packages/artplayer/src/contextmenu/info.js

@@ -3,8 +3,8 @@ export default function info(menuOption) {
         ...menuOption,
         html: art.i18n.get('Video info'),
         click: () => {
-            art.info.show();
-            art.contextmenu.hide();
+            art.info.show = true;
+            art.contextmenu.show = false;
         },
     });
 }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -19,7 +19,7 @@ export default function playbackRate(menuOption) {
                 const { rate } = target.dataset;
                 if (rate) {
                     player.playbackRate = Number(rate);
-                    art.contextmenu.hide();
+                    art.contextmenu.show = false;
                 }
             },
             mounted: $menu => {

packages/artplayer/src/controls/index.js

@@ -161,17 +161,20 @@ export default class Controls {
         return component(this.art, this, parent, option, callback, 'control');
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.add('artplayer-controls-show');
-        this.art.emit('controls:show');
+        if (value) {
+            this.state = true;
+            $player.classList.add('artplayer-controls-show');
+            this.art.emit('controls:show');
+        } else {
+            this.state = false;
+            $player.classList.remove('artplayer-controls-show');
+            this.art.emit('controls:hide');
+        }
     }
 
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.remove('artplayer-controls-show');
-        this.art.emit('controls:hide');
+    toggle() {
+        this.show = !this.state;
     }
 }

packages/artplayer/src/events/doubleClickInit.js

@@ -1,8 +0,0 @@
-export default function doubleClickInit(art, events) {
-    const {
-        template: { $video },
-    } = art;
-    events.proxy($video, 'dblclick', () => {
-        art.emit('dblclick');
-    });
-}

packages/artplayer/src/events/mousemoveInit.js

@@ -9,7 +9,7 @@ export default function mousemoveInitInit(art, events) {
     const autoHide = debounce(() => {
         $player.classList.add('artplayer-hide-cursor');
         $player.classList.remove('artplayer-hover');
-        art.controls.hide();
+        art.controls.show = false;
     }, 5000);
 
     art.on('hoverleave', () => {
@@ -21,7 +21,7 @@ export default function mousemoveInitInit(art, events) {
     events.proxy($player, 'mousemove', event => {
         autoHide.clearTimeout();
         $player.classList.remove('artplayer-hide-cursor');
-        art.controls.show();
+        art.controls.show = true;
         if (!art.player.pip && player.playing && event.target === $video) {
             autoHide();
         }

packages/artplayer/src/hotkey.js

@@ -2,35 +2,34 @@ export default class Hotkey {
     constructor(art) {
         this.art = art;
         this.keys = {};
-
-        this.add(27, () => {
-            if (art.player.fullscreenWeb) {
-                art.player.fullscreenWeb = false;
-            }
-        });
-
-        this.add(32, () => {
-            art.player.toggle = true;
-        });
-
-        this.add(37, () => {
-            art.player.seek = art.player.currentTime - 10;
-        });
-
-        this.add(38, () => {
-            art.player.volume += 0.05;
-        });
-
-        this.add(39, () => {
-            art.player.seek = art.player.currentTime + 10;
-        });
-
-        this.add(40, () => {
-            art.player.volume -= 0.05;
-        });
-
         if (this.art.option.hotkey) {
             this.art.once('video:canplay', () => {
+                this.add(27, () => {
+                    if (art.player.fullscreenWeb) {
+                        art.player.fullscreenWeb = false;
+                    }
+                });
+
+                this.add(32, () => {
+                    art.player.toggle = true;
+                });
+
+                this.add(37, () => {
+                    art.player.seek = art.player.currentTime - 10;
+                });
+
+                this.add(38, () => {
+                    art.player.volume += 0.05;
+                });
+
+                this.add(39, () => {
+                    art.player.seek = art.player.currentTime + 10;
+                });
+
+                this.add(40, () => {
+                    art.player.volume -= 0.05;
+                });
+
                 this.init();
             });
         }

packages/artplayer/src/info.js

@@ -12,7 +12,7 @@ export default class Info {
             events: { proxy },
         } = this.art;
         proxy($infoClose, 'click', () => {
-            this.hide();
+            this.show = false;
         });
         this.art.on('destroy', () => {
             if (this.timer) {
@@ -92,23 +92,26 @@ export default class Info {
         }, 1000);
     }
 
-    show() {
+    set show(value) {
         const { $player, $infoPanel } = this.art.template;
-        this.state = true;
-        $player.classList.add('artplayer-info-show');
-        if (!$infoPanel.innerHTML) {
-            append($infoPanel, this.creatInfo());
+        if (value) {
+            this.state = true;
+            $player.classList.add('artplayer-info-show');
+            if (!$infoPanel.innerHTML) {
+                append($infoPanel, this.creatInfo());
+            }
+            clearTimeout(this.timer);
+            this.loop();
+            this.art.emit('info:show');
+        } else {
+            this.state = false;
+            $player.classList.remove('artplayer-info-show');
+            clearTimeout(this.timer);
+            this.art.emit('info:hide');
         }
-        clearTimeout(this.timer);
-        this.loop();
-        this.art.emit('info:show');
     }
 
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.remove('artplayer-info-show');
-        clearTimeout(this.timer);
-        this.art.emit('info:hide');
+    toggle() {
+        this.show = !this.state;
     }
 }

packages/artplayer/src/layers.js

@@ -18,17 +18,20 @@ export default class Layers {
         return component(this.art, this, $layers, item, callback, 'layer');
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.remove('artplayer-layers-hide');
-        this.art.emit('layers:show');
+        if (value) {
+            this.state = true;
+            $player.classList.remove('artplayer-layers-hide');
+            this.art.emit('layers:show');
+        } else {
+            this.state = false;
+            $player.classList.add('artplayer-layers-hide');
+            this.art.emit('layers:hide');
+        }
     }
 
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.add('artplayer-layers-hide');
-        this.art.emit('layers:hide');
+    toggle() {
+        this.show = !this.state;
     }
 }

packages/artplayer/src/loading.js

@@ -7,17 +7,20 @@ export default class Loading {
         append($loading, art.icons.loading);
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.add('artplayer-loading-show');
-        this.art.emit('loading:show');
+        if (value) {
+            this.state = true;
+            $player.classList.add('artplayer-loading-show');
+            this.art.emit('loading:show');
+        } else {
+            this.state = false;
+            $player.classList.remove('artplayer-loading-show');
+            this.art.emit('loading:hide');
+        }
     }
 
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.remove('artplayer-loading-show');
-        this.art.emit('loading:hide');
+    toggle() {
+        this.show = !this.state;
     }
 }

packages/artplayer/src/mask.js

@@ -8,17 +8,20 @@ export default class Mask {
         append($playBig, art.icons.state);
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.add('artplayer-mask-show');
-        this.art.emit('mask:show');
+        if (value) {
+            this.state = true;
+            $player.classList.add('artplayer-mask-show');
+            this.art.emit('mask:show');
+        } else {
+            this.state = false;
+            $player.classList.remove('artplayer-mask-show');
+            this.art.emit('mask:hide');
+        }
     }
 
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.remove('artplayer-mask-show');
-        this.art.emit('mask:hide');
+    toggle() {
+        this.show = !this.state;
     }
 }

packages/artplayer/src/player/attachUrlMix.js

@@ -13,7 +13,7 @@ export default function attachUrlMix(art, player) {
                     const typeName = type || getExt(videoUrl);
                     const typeCallback = customType[typeName];
                     if (typeName && typeCallback) {
-                        art.loading.show();
+                        art.loading.show = true;
                         art.emit('beforeCustomType', typeName);
                         typeCallback.call(art, $video, videoUrl, art);
                         art.emit('afterCustomType', typeName);
@@ -32,7 +32,7 @@ export default function attachUrlMix(art, player) {
                         'If url is a function, it needs to return a promise.',
                     );
                     return result.then(videoUrl => {
-                        art.loading.show();
+                        art.loading.show = true;
                         return attachUrl(videoUrl);
                     });
                 }

packages/artplayer/src/player/eventInit.js

@@ -29,9 +29,9 @@ export default function eventInit(art, player) {
 
     art.on('video:canplay', () => {
         reconnectTime = 0;
-        art.controls.show();
-        art.mask.show();
-        art.loading.hide();
+        art.controls.show = true;
+        art.mask.show = true;
+        art.loading.show = false;
     });
 
     // art.on('video:canplaythrough', () => {
@@ -47,8 +47,8 @@ export default function eventInit(art, player) {
     // });
 
     art.on('video:ended', () => {
-        art.controls.show();
-        art.mask.show();
+        art.controls.show = true;
+        art.mask.show = true;
         if (option.loop) {
             player.seek = 0;
             player.play = true;
@@ -63,8 +63,8 @@ export default function eventInit(art, player) {
                 notice.show(`${i18n.get('Reconnect')}: ${reconnectTime}`);
             });
         } else {
-            art.loading.hide();
-            art.controls.hide();
+            art.loading.show = false;
+            art.controls.show = false;
             $player.classList.add('artplayer-error');
             sleep(1000).then(() => {
                 notice.show(i18n.get('Video load failed'), false);
@@ -84,20 +84,20 @@ export default function eventInit(art, player) {
     });
 
     art.on('video:loadstart', () => {
-        art.loading.show();
+        art.loading.show = true;
     });
 
     art.on('video:pause', () => {
-        art.controls.show();
-        art.mask.show();
+        art.controls.show = true;
+        art.mask.show = true;
     });
 
     art.on('video:play', () => {
-        art.mask.hide();
+        art.mask.show = false;
     });
 
     art.on('video:playing', () => {
-        art.mask.hide();
+        art.mask.show = false;
     });
 
     // art.on('video:progress', () => {
@@ -109,11 +109,11 @@ export default function eventInit(art, player) {
     // });
 
     art.on('video:seeked', () => {
-        art.loading.hide();
+        art.loading.show = false;
     });
 
     art.on('video:seeking', () => {
-        art.loading.show();
+        art.loading.show = true;
     });
 
     // art.on('video:stalled', () => {
@@ -125,7 +125,7 @@ export default function eventInit(art, player) {
     // });
 
     art.on('video:timeupdate', () => {
-        art.mask.hide();
+        art.mask.show = false;
     });
 
     // art.on('video:volumechange', () => {
@@ -133,6 +133,6 @@ export default function eventInit(art, player) {
     // });
 
     art.on('video:waiting', () => {
-        art.loading.show();
+        art.loading.show = true;
     });
 }

packages/artplayer/src/setting/index.js

@@ -14,7 +14,7 @@ export default class Setting {
             });
 
             this.art.on('blur', () => {
-                this.hide();
+                this.show = false;
             });
         }
     }
@@ -28,7 +28,7 @@ export default class Setting {
 
         proxy($setting, 'click', e => {
             if (e.target === $setting) {
-                this.hide();
+                this.show = false;
             }
         });
 
@@ -60,25 +60,20 @@ export default class Setting {
         return component(this.art, this, $settingBody, item, callback, 'setting');
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.add('artplayer-setting-show');
-        this.art.emit('setting:show');
-    }
-
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.remove('artplayer-setting-show');
-        this.art.emit('setting:hide');
+        if (value) {
+            this.state = true;
+            $player.classList.add('artplayer-setting-show');
+            this.art.emit('setting:show');
+        } else {
+            this.state = false;
+            $player.classList.remove('artplayer-setting-show');
+            this.art.emit('setting:hide');
+        }
     }
 
     toggle() {
-        if (this.state) {
-            this.hide();
-        } else {
-            this.show();
-        }
+        this.show = !this.state;
     }
 }

packages/artplayer/src/subtitle.js

@@ -30,7 +30,7 @@ export default class Subtitle {
         this.load(url).then(url => {
             this.art.template.$track.src = url;
             this.art.emit('subtitle:load', url);
-            
+
             if ($video.textTracks && $video.textTracks[0]) {
                 const [track] = $video.textTracks;
                 proxy(track, 'cuechange', () => {
@@ -73,25 +73,20 @@ export default class Subtitle {
             });
     }
 
-    show() {
+    set show(value) {
         const { $player } = this.art.template;
-        this.state = true;
-        $player.classList.remove('artplayer-subtitle-hide');
-        this.art.emit('subtitle:show');
-    }
-
-    hide() {
-        const { $player } = this.art.template;
-        this.state = false;
-        $player.classList.add('artplayer-subtitle-hide');
-        this.art.emit('subtitle:hide');
+        if (value) {
+            this.state = true;
+            $player.classList.remove('artplayer-subtitle-hide');
+            this.art.emit('subtitle:show');
+        } else {
+            this.state = false;
+            $player.classList.add('artplayer-subtitle-hide');
+            this.art.emit('subtitle:hide');
+        }
     }
 
     toggle() {
-        if (this.state) {
-            this.hide();
-        } else {
-            this.show();
-        }
+        this.show = !this.state;
     }
 }

packages/artplayer/src/utils/component.js

@@ -4,7 +4,10 @@ export default function component(art, parent, target, getOption, callback, titl
     const option = typeof getOption === 'function' ? getOption(art) : getOption;
     if (!option.disable) {
         const name = option.name || `${title}${parent.id}`;
-        errorHandle(!hasOwnProperty(parent, name), `Cannot create a component that already has the same name: ${title} -> ${name}`);
+        errorHandle(
+            !hasOwnProperty(parent, name),
+            `Cannot create a component that already has the same name: ${title} -> ${name}`,
+        );
         const $element = document.createElement('div');
         $element.classList.value = `art-${title} art-${title}-${name}`;
 
@@ -41,22 +44,31 @@ export default function component(art, parent, target, getOption, callback, titl
             callback($element, parent, art);
         }
 
-        parent[name] = {
-            id: parent.id,
-            $ref: $element,
-            hide() {
-                setStyle($element, 'display', 'none');
-                art.emit(`${title}:hide`, $element);
+        Object.defineProperty(parent, name, {
+            value: {
+                get id() {
+                    return parent.id;
+                },
+                get $ref() {
+                    return $element;
+                },
+                set show(value) {
+                    if (value) {
+                        setStyle($element, 'display', 'block');
+                        art.emit(`${title}:show`, $element);
+                    } else {
+                        setStyle($element, 'display', 'none');
+                        art.emit(`${title}:hide`, $element);
+                    }
+                },
+                set remove(value) {
+                    if (value) {
+                        remove($element);
+                        art.emit(`${title}:remove`, $element);
+                    }
+                },
             },
-            show(type = 'block') {
-                setStyle($element, 'display', type);
-                art.emit(`${title}:show`, $element);
-            },
-            remove() {
-                remove($element);
-                art.emit(`${title}:remove`, $element);
-            },
-        };
+        });
 
         art.emit(`${title}:add`, option);
         return parent[name];

packages/artplayer/src/whitelist.js

@@ -8,21 +8,16 @@ export default class Whitelist {
             !this.isMobile ||
             whitelist.some(item => {
                 const type = kindOf(item);
-                let result = false;
                 switch (type) {
                     case 'string':
-                        result = this.userAgent.indexOf(item) > -1;
-                        break;
+                        return this.userAgent.indexOf(item) > -1;
                     case 'function':
-                        result = item(this.userAgent);
-                        break;
+                        return item(this.userAgent);
                     case 'regexp':
-                        result = item.test(this.userAgent);
-                        break;
+                        return item.test(this.userAgent);
                     default:
-                        break;
+                        return false;
                 }
-                return result;
             });
     }
 }