创建组件父类

packages/artplayer/src/utils/components.js

@@ -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;
+    }
+}

packages/artplayer/src/utils/dom.js

@@ -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;
+        },
+    });
+}

packages/artplayer/src/utils/property.js

@@ -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 => {