创建组件父类

2026-10-17 01:56:16 -08:00 · 2019-11-22 15:35:21 +08:00
1 parent 0c1c1273a6
commit 1d859e2049
@@ -11,11 +11,11 @@
    var $popups = document.querySelector('.popups');
    var loaddLib = [];

-    consola.creat({
-        target: '.console',
-        size: '100%',
-        zIndex: 99,
-    });
+    // consola.creat({
+    //     target: '.console',
+    //     size: '100%',
+    //     zIndex: 99,
+    // });

    var mirror = CodeMirror($codeMirror, {
        lineNumbers: true,
@@ -1,6 +1,6 @@
 .art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:10;width:100%;height:100%;outline:0;zoom:1;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}
 .art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}
-.art-video-player .art-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{margin:5px 0}.art-video-player.art-subtitle-hide .art-subtitle{display:none}
+.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}
 .art-video-player .art-danmuku{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
 .art-video-player .art-layers{position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layers-hide .art-layers{display:none}
 .art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute}.art-video-player .art-mask .art-state{right:30px;bottom:55px;width:60px;height:60px;opacity:.6}.art-video-player.art-mask-show .art-mask,.art-video-player .art-mask .art-state{display:-webkit-box;display:-ms-flexbox;display:flex}
@@ -1 +1 @@
-{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","danmuku.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.scss"],"names":[],"mappings":"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 truncated
+{"version":3,"sources":["artplayer.scss","video.scss","subtitle.scss","danmuku.scss","layers.scss","mask.scss","loading.scss","bottom.scss","notice.scss","contextmenu.scss","setting.scss","info.scss","hideCursor.scss","aspectRatio.scss","fullscreenWeb.scss","pip.scss","autoSize.scss","flip.scss","balloon.scss"],"names":[],"mappings":"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 truncated
@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../pLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/dom.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/components.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.jsLine truncated
@@ -1,4 +1,5 @@
-import { setStyle, addClass, removeClass } from '../utils';
+import { setStyle } from '../utils';
+import Component from '../utils/components';
 import component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
@@ -6,13 +7,89 @@ import info from './info';
 import version from './version';
 import close from './close';

-export default class Contextmenu {
+export default class Contextmenu extends Component {
    constructor(art) {
-        this.id = 0;
-        this.art = art;
+        super(art);

        art.on('ready', () => {
-            this.init();
+            const {
+                option,
+                template: { $player, $contextmenu },
+                events: { proxy },
+            } = art;
+
+            this.add(
+                playbackRate({
+                    disable: !option.playbackRate,
+                    name: 'playbackRate',
+                    index: 10,
+                }),
+            );
+
+            this.add(
+                aspectRatio({
+                    disable: !option.aspectRatio,
+                    name: 'aspectRatio',
+                    index: 20,
+                }),
+            );
+
+            this.add(
+                info({
+                    disable: false,
+                    name: 'info',
+                    index: 30,
+                }),
+            );
+
+            this.add(
+                version({
+                    disable: false,
+                    name: 'version',
+                    index: 40,
+                }),
+            );
+
+            this.add(
+                close({
+                    disable: false,
+                    name: 'close',
+                    index: 50,
+                }),
+            );
+
+            option.contextmenu.forEach(item => {
+                this.add(item);
+            });
+
+            proxy($player, 'contextmenu', event => {
+                event.preventDefault();
+                this.show = true;
+                
+                const mouseX = event.clientX;
+                const mouseY = event.clientY;
+                const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
+                const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
+                let menuLeft = mouseX - cLeft;
+                let menuTop = mouseY - cTop;
+
+                if (mouseX + mWidth > cLeft + cWidth) {
+                    menuLeft = cWidth - mWidth;
+                }
+
+                if (mouseY + mHeight > cTop + cHeight) {
+                    menuTop = cHeight - mHeight;
+                }
+
+                setStyle($contextmenu, 'left', `${menuLeft}px`);
+                setStyle($contextmenu, 'top', `${menuTop}px`);
+            });
+
+            proxy($player, 'click', event => {
+                if (!event.composedPath().includes($contextmenu)) {
+                    this.show = false;
+                }
+            });
        });

        art.on('blur', () => {
@@ -20,105 +97,9 @@ export default class Contextmenu {
        });
    }

-    init() {
-        const {
-            option,
-            template: { $player, $contextmenu },
-            events: { proxy },
-        } = this.art;
-
-        this.add(
-            playbackRate({
-                disable: !option.playbackRate,
-                name: 'playbackRate',
-                index: 10,
-            }),
-        );
-
-        this.add(
-            aspectRatio({
-                disable: !option.aspectRatio,
-                name: 'aspectRatio',
-                index: 20,
-            }),
-        );
-
-        this.add(
-            info({
-                disable: false,
-                name: 'info',
-                index: 30,
-            }),
-        );
-
-        this.add(
-            version({
-                disable: false,
-                name: 'version',
-                index: 40,
-            }),
-        );
-
-        this.add(
-            close({
-                disable: false,
-                name: 'close',
-                index: 50,
-            }),
-        );
-
-        option.contextmenu.forEach(item => {
-            this.add(item);
-        });
-
-        proxy($player, 'contextmenu', event => {
-            event.preventDefault();
-            this.show = true;
-            this.setPos(event);
-        });
-
-        proxy($player, 'click', event => {
-            if (!event.composedPath().includes($contextmenu)) {
-                this.show = false;
-            }
-        });
-    }
-
    add(item, callback) {
        this.id += 1;
        const { $contextmenu } = this.art.template;
        return component(this.art, this, $contextmenu, item, callback, 'contextmenu');
    }
-
-    setPos(event) {
-        const { $player, $contextmenu } = this.art.template;
-        const mouseX = event.clientX;
-        const mouseY = event.clientY;
-        const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
-        const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
-        let menuLeft = mouseX - cLeft;
-        let menuTop = mouseY - cTop;
-
-        if (mouseX + mWidth > cLeft + cWidth) {
-            menuLeft = cWidth - mWidth;
-        }
-
-        if (mouseY + mHeight > cTop + cHeight) {
-            menuTop = cHeight - mHeight;
-        }
-
-        setStyle($contextmenu, 'left', `${menuLeft}px`);
-        setStyle($contextmenu, 'top', `${menuTop}px`);
-    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            addClass($player, 'art-contextmenu-show');
-            this.art.emit('contextmenu:show');
-        } else {
-            removeClass($player, 'art-contextmenu-show');
-            this.art.emit('contextmenu:hide');
-        }
-    }
 }
@@ -1,4 +1,5 @@
-import { errorHandle, addClass, removeClass } from '../utils';
+import { errorHandle, addClass } from '../utils';
+import Component from '../utils/components';
 import component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
@@ -13,128 +14,124 @@ import thumbnails from './thumbnails';
 import screenshot from './screenshot';
 import quality from './quality';

-export default class Controls {
+export default class Controls extends Component {
    constructor(art) {
-        this.id = 0;
-        this.art = art;
-        this.art.on('ready', () => {
-            this.init();
-        });
-    }
+        super(art);

-    init() {
-        const { option } = this.art;
+        art.on('ready', () => {
+            const { option } = art;

-        this.add(
-            progress({
-                name: 'progress',
-                disable: option.isLive,
-                position: 'top',
-                index: 10,
-            }),
-        );
+            this.add(
+                progress({
+                    name: 'progress',
+                    disable: option.isLive,
+                    position: 'top',
+                    index: 10,
+                }),
+            );

-        this.add(
-            thumbnails({
-                name: 'thumbnails',
-                disable: !option.thumbnails.url || option.isLive,
-                position: 'top',
-                index: 20,
-            }),
-        );
+            this.add(
+                thumbnails({
+                    name: 'thumbnails',
+                    disable: !option.thumbnails.url || option.isLive,
+                    position: 'top',
+                    index: 20,
+                }),
+            );

-        this.add(
-            playAndPause({
-                name: 'playAndPause',
-                disable: false,
-                position: 'left',
-                index: 10,
-            }),
-        );
+            this.add(
+                playAndPause({
+                    name: 'playAndPause',
+                    disable: false,
+                    position: 'left',
+                    index: 10,
+                }),
+            );

-        this.add(
-            volume({
-                name: 'volume',
-                disable: false,
-                position: 'left',
-                index: 20,
-            }),
-        );
+            this.add(
+                volume({
+                    name: 'volume',
+                    disable: false,
+                    position: 'left',
+                    index: 20,
+                }),
+            );

-        this.add(
-            time({
-                name: 'time',
-                disable: option.isLive,
-                position: 'left',
-                index: 30,
-            }),
-        );
+            this.add(
+                time({
+                    name: 'time',
+                    disable: option.isLive,
+                    position: 'left',
+                    index: 30,
+                }),
+            );

-        this.add(
-            quality({
-                name: 'quality',
-                disable: option.quality.length === 0,
-                position: 'right',
-                index: 10,
-            }),
-        );
+            this.add(
+                quality({
+                    name: 'quality',
+                    disable: option.quality.length === 0,
+                    position: 'right',
+                    index: 10,
+                }),
+            );

-        this.add(
-            screenshot({
-                name: 'screenshot',
-                disable: !option.screenshot,
-                position: 'right',
-                index: 20,
-            }),
-        );
+            this.add(
+                screenshot({
+                    name: 'screenshot',
+                    disable: !option.screenshot,
+                    position: 'right',
+                    index: 20,
+                }),
+            );

-        this.add(
-            subtitle({
-                name: 'subtitle',
-                disable: !option.subtitle.url,
-                position: 'right',
-                index: 30,
-            }),
-        );
+            this.add(
+                subtitle({
+                    name: 'subtitle',
+                    disable: !option.subtitle.url,
+                    position: 'right',
+                    index: 30,
+                }),
+            );

-        this.add(
-            setting({
-                name: 'setting',
-                disable: !option.setting,
-                position: 'right',
-                index: 40,
-            }),
-        );
+            this.add(
+                setting({
+                    name: 'setting',
+                    disable: !option.setting,
+                    position: 'right',
+                    index: 40,
+                }),
+            );

-        this.add(
-            pip({
-                name: 'pip',
-                disable: !option.pip,
-                position: 'right',
-                index: 50,
-            }),
-        );
+            this.add(
+                pip({
+                    name: 'pip',
+                    disable: !option.pip,
+                    position: 'right',
+                    index: 50,
+                }),
+            );

-        this.add(
-            fullscreenWeb({
-                name: 'fullscreenWeb',
-                disable: !option.fullscreenWeb,
-                position: 'right',
-                index: 60,
-            }),
-        );
+            this.add(
+                fullscreenWeb({
+                    name: 'fullscreenWeb',
+                    disable: !option.fullscreenWeb,
+                    position: 'right',
+                    index: 60,
+                }),
+            );

-        this.add(
-            fullscreen({
-                name: 'fullscreen',
-                disable: !option.fullscreen,
-                position: 'right',
-                index: 70,
-            }),
-        );
+            this.add(
+                fullscreen({
+                    name: 'fullscreen',
+                    disable: !option.fullscreen,
+                    position: 'right',
+                    index: 70,
+                }),
+            );

-        option.controls.forEach(item => {
-            this.add(item);
+            option.controls.forEach(item => {
+                this.add(item);
+            });
        });
    }

@@ -168,15 +165,4 @@ export default class Controls {
        }
        return control;
    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            addClass($player, 'art-controls-show');
-            this.art.emit('controls:show');
-        } else {
-            removeClass($player, 'art-controls-show');
-            this.art.emit('controls:hide');
-        }
-    }
 }
@@ -18,14 +18,14 @@ export default function subtitle(option) {
                subtitle.toggle();
            });

-            art.on('subtitle:show', () => {
-                setStyle($subtitle, 'opacity', '1');
-                tooltip($subtitle, i18n.get('Hide subtitle'));
-            });
-
-            art.on('subtitle:hide', () => {
-                setStyle($subtitle, 'opacity', '0.8');
-                tooltip($subtitle, i18n.get('Show subtitle'));
+            art.on('subtitle:toggle', value => {
+                if (value) {
+                    setStyle($subtitle, 'opacity', '1');
+                    tooltip($subtitle, i18n.get('Hide subtitle'));
+                } else {
+                    setStyle($subtitle, 'opacity', '0.8');
+                    tooltip($subtitle, i18n.get('Show subtitle'));
+                }
            });
        },
    });
@@ -1,59 +1,41 @@
-import { addClass, removeClass, queryAll } from './utils';
+import { queryAll } from './utils';
+import Component from './utils/components';

-export default class Info {
+export default class Info extends Component {
    constructor(art) {
-        this.art = art;
-        this.timer = null;
+        super(art);

        const {
-            template: { $infoPanel, $infoClose },
+            template: { $infoPanel, $infoClose, $video },
            events: { proxy },
        } = art;

-        this.types = queryAll('[data-video]', $infoPanel);
-
        proxy($infoClose, 'click', () => {
            this.show = false;
        });

-        this.art.on('destroy', () => {
-            clearTimeout(this.timer);
+        let timer = null;
+        const types = queryAll('[data-video]', $infoPanel);
+
+        art.on('destroy', () => {
+            clearTimeout(timer);
        });
-    }

-    readInfo() {
-        const { $video } = this.art.template;
-        this.types.forEach(item => {
-            const value = $video[item.dataset.video];
-            item.innerHTML = typeof value === 'number' ? value.toFixed(2) : value;
-        });
-    }
-
-    loop() {
-        this.readInfo();
-        this.timer = setTimeout(() => {
-            this.readInfo();
-            this.loop();
-        }, 1000);
-    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            this.state = true;
-            addClass($player, 'art-info-show');
-            clearTimeout(this.timer);
-            this.loop();
-            this.art.emit('info:show');
-        } else {
-            this.state = false;
-            removeClass($player, 'art-info-show');
-            clearTimeout(this.timer);
-            this.art.emit('info:hide');
+        function loop() {
+            types.forEach(item => {
+                const value = $video[item.dataset.video];
+                item.innerHTML = typeof value === 'number' ? value.toFixed(2) : value;
+            });
+            timer = setTimeout(() => {
+                loop();
+            }, 1000);
        }
-    }

-    toggle() {
-        this.show = !this.state;
+        art.on('info:toggle', value => {
+            clearTimeout(timer);
+            if (value) {
+                loop();
+            }
+        });
    }
 }
@@ -1,10 +1,9 @@
-import { addClass, removeClass } from './utils';
 import component from './utils/component';
+import Component from './utils/components';

-export default class Layers {
+export default class Layers extends Component {
    constructor(art) {
-        this.id = 0;
-        this.art = art;
+        super(art);
        this.add = this.add.bind(this);
        this.art.on('ready', () => {
            this.art.option.layers.forEach(item => {
@@ -18,21 +17,4 @@ export default class Layers {
        const { $layers } = this.art.template;
        return component(this.art, this, $layers, item, callback, 'layer');
    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            this.state = true;
-            removeClass($player, 'art-layers-hide');
-            this.art.emit('layers:show');
-        } else {
-            this.state = false;
-            addClass($player, 'art-layers-hide');
-            this.art.emit('layers:hide');
-        }
-    }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }
@@ -1,26 +1,10 @@
-import { append, addClass, removeClass } from './utils';
+import { append } from './utils';
+import Component from './utils/components';

-export default class Loading {
+export default class Loading extends Component {
    constructor(art) {
-        this.art = art;
+        super(art);
        const { $loading } = art.template;
        append($loading, art.icons.loading);
    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            this.state = true;
-            addClass($player, 'art-loading-show');
-            this.art.emit('loading:show');
-        } else {
-            this.state = false;
-            removeClass($player, 'art-loading-show');
-            this.art.emit('loading:hide');
-        }
-    }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }
@@ -1,26 +1,10 @@
-import { append, addClass, removeClass } from './utils';
+import { append } from './utils';
+import Component from './utils/components';

-export default class Mask {
+export default class Mask extends Component {
    constructor(art) {
-        this.art = art;
+        super(art);
        const { $state } = art.template;
        append($state, art.icons.state);
    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            this.state = true;
-            addClass($player, 'art-mask-show');
-            this.art.emit('mask:show');
-        } else {
-            this.state = false;
-            removeClass($player, 'art-mask-show');
-            this.art.emit('mask:hide');
-        }
-    }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }
@@ -8,7 +8,6 @@ export default class Notice {

    show(msg, autoHide = true, time = 1000) {
        const { $player, $noticeInner } = this.art.template;
-        this.state = true;
        addClass($player, 'art-notice-show');
        $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
        clearTimeout(this.timer);
@@ -22,7 +21,6 @@ export default class Notice {

    hide() {
        const { $player } = this.art.template;
-        this.state = false;
        removeClass($player, 'art-notice-show');
        this.art.emit('notice:hide');
    }
@@ -1,17 +1,47 @@
-import { addClass, removeClass } from '../utils';
+import Component from '../utils/components';
 import component from '../utils/component';
 import flip from './flip';
 import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';

-export default class Setting {
+export default class Setting extends Component {
    constructor(art) {
-        this.id = 0;
-        this.art = art;
-        this.state = false;
+        super(art);
+
+        const {
+            option,
+            template: { $setting },
+            events: { proxy },
+        } = this.art;
+
        if (art.option.setting) {
            this.art.on('ready', () => {
-                this.init();
+                proxy($setting, 'click', e => {
+                    if (e.target === $setting) {
+                        this.show = false;
+                    }
+                });
+
+                this.add(
+                    flip({
+                        disable: !option.flip,
+                        name: 'flip',
+                    }),
+                );
+
+                this.add(
+                    aspectRatio({
+                        disable: !option.aspectRatio,
+                        name: 'aspectRatio',
+                    }),
+                );
+
+                this.add(
+                    playbackRate({
+                        disable: !option.playbackRate,
+                        name: 'playbackRate',
+                    }),
+                );
            });

            this.art.on('blur', () => {
@@ -20,61 +50,9 @@ export default class Setting {
        }
    }

-    init() {
-        const {
-            option,
-            template: { $setting },
-            events: { proxy },
-        } = this.art;
-
-        proxy($setting, 'click', e => {
-            if (e.target === $setting) {
-                this.show = false;
-            }
-        });
-
-        this.add(
-            flip({
-                disable: !option.flip,
-                name: 'flip',
-            }),
-        );
-
-        this.add(
-            aspectRatio({
-                disable: !option.aspectRatio,
-                name: 'aspectRatio',
-            }),
-        );
-
-        this.add(
-            playbackRate({
-                disable: !option.playbackRate,
-                name: 'playbackRate',
-            }),
-        );
-    }
-
    add(item, callback) {
        this.id += 1;
        const { $settingBody } = this.art.template;
        return component(this.art, this, $settingBody, item, callback, 'setting');
    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            this.state = true;
-            addClass($player, 'art-setting-show');
-            this.art.emit('setting:show');
-        } else {
-            this.state = false;
-            removeClass($player, 'art-setting-show');
-            this.art.emit('setting:hide');
-        }
-    }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }
@@ -1,5 +1,6 @@
 .art-video-player {
    .art-subtitle {
+        display: none;
        position: absolute;
        z-index: 20;
        bottom: 40px;
@@ -10,15 +11,15 @@
        font-size: 20px;
        pointer-events: none;
        text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
-    
+
        p {
            margin: 5px 0;
        }
    }

-    &.art-subtitle-hide {
+    &.art-subtitle-show {
        .art-subtitle {
-            display: none;
+            display: block;
        }
    }
 }
@@ -1,9 +1,9 @@
-import { setStyles, srtToVtt, vttToBlob, getExt, addClass, removeClass, assToVtt } from './utils';
+import { setStyles, srtToVtt, vttToBlob, getExt, assToVtt } from './utils';
+import Component from './utils/components';

-export default class Subtitle {
+export default class Subtitle extends Component {
    constructor(art) {
-        this.art = art;
-        this.state = true;
+        super(art);

        const {
            events: { proxy },
@@ -88,21 +88,4 @@ export default class Subtitle {
                throw err;
            });
    }
-
-    set show(value) {
-        const { $player } = this.art.template;
-        if (value) {
-            this.state = true;
-            removeClass($player, 'art-subtitle-hide');
-            this.art.emit('subtitle:show');
-        } else {
-            this.state = false;
-            addClass($player, 'art-subtitle-hide');
-            this.art.emit('subtitle:hide');
-        }
-    }
-
-    toggle() {
-        this.show = !this.state;
-    }
 }
@@ -3,6 +3,7 @@ import { errorHandle, query, addClass } from './utils';
 export default class Template {
    constructor(art) {
        this.art = art;
+        
        if (art.option.container instanceof Element) {
            this.$container = art.option.container;
        } else {
@@ -33,7 +34,7 @@ export default class Template {

    initDesktop() {
        this.$container.innerHTML = `
-<div class="art-video-player" style="--theme: ${this.art.option.theme}">
+<div class="art-video-player art-subtitle-show" style="--theme: ${this.art.option.theme}">
  <video class="art-video">
    <track default kind="metadata"></track>
  </video>
@@ -127,9 +128,9 @@ export default class Template {

    initMobile() {
        this.$container.innerHTML = `
-          <div class="art-video-player">
-            <video class="art-video"></video>
-          </div>
+<div class="art-video-player">
+  <video class="art-video"></video>
+</div>
        `;
        this.$player = this.query('.art-video-player');
        this.$video = this.query('.art-video');
@@ -0,0 +1,30 @@
+import { hasClass, addClass, removeClass } from './dom';
+import { errorHandle } from './error';
+
+export default class Component {
+    constructor(art) {
+        this.id = 0;
+        this.art = art;
+        this.$player = art.template.$player;
+        this.name = this.constructor.name.toLowerCase();
+        this.showClassName = `art-${this.name}-show`;
+    }
+
+    get show() {
+        return hasClass(this.$player, this.showClassName);
+    }
+
+    set show(value) {
+        errorHandle(value === false || value === true, 'The show attribute expects a boolean value');
+        if (value) {
+            addClass(this.$player, this.showClassName);
+        } else {
+            removeClass(this.$player, this.showClassName);
+        }
+        this.art.emit(`${this.name}:toggle`, value);
+    }
+
+    toggle() {
+        this.show = !this.show;
+    }
+}
@@ -1,3 +1,5 @@
+import { defineProperty } from './property';
+
 export function query(selector, parent = document) {
    return parent.querySelector(selector);
 }
@@ -61,3 +63,28 @@ export function tooltip(target, msg, pos = 'up') {
    target.setAttribute('aria-label', msg);
    target.setAttribute('data-balloon-pos', pos);
 }
+
+export function addShowProperty(target, ref, name) {
+    const className = `art-${name}-show`;
+    
+    defineProperty(target, 'show', {
+        get() {
+            return hasClass(ref, className);
+        },
+        set(value) {
+            if (value) {
+                addClass(ref, className);
+            } else {
+                removeClass(ref, className);
+            }
+
+            target.art.emit(`${name}:toggle`, value);
+        },
+    });
+
+    defineProperty(target, 'toggle', {
+        value: () => {
+            target.show = !target.show;
+        },
+    });
+}
@@ -4,6 +4,10 @@ export function hasOwnProperty(obj, name) {
    return Object.prototype.hasOwnProperty.call(obj, name);
 }

+export function defineProperty(obj, key, prop) {
+    return Object.defineProperty(obj, key, prop);
+}
+
 export function proxyPropertys(target, ...sources) {
    return sources.reduce((result, source) => {
        Object.getOwnPropertyNames(source).forEach(key => {