调整组件嵌入规则

packages/artplayer-plugin-danmu/src/contextmenuMix.js

@@ -0,0 +1,3 @@
+export default function contextmenuMix(art) {
+    //
+}

packages/artplayer-plugin-danmu/src/controlMix.js

@@ -0,0 +1,9 @@
+export default class ControlMix {
+    constructor(option) {
+        this.option = option;
+    }
+
+    apply(art, $control) {
+        //
+    }
+}

packages/artplayer-plugin-danmu/src/i18nMix.js

@@ -0,0 +1,3 @@
+export default function i18n(art) {
+    //
+}

packages/artplayer-plugin-danmu/src/index.js

@@ -1,10 +1,16 @@
-import './style/index.scss';
+import './index.scss';
+import i18nMix from './i18nMix';
+import contextmenuMix from './contextmenuMix';
+import settingMix from './settingMix';
+import ControlMix from './controlMix';
 
-class ArtplayerPluginDanmu {
-    constructor() {
-        console.log(this);
-    }
+function artplayerPluginDanmu(Artplayer) {
+    const art = Artplayer.prototype;
+    i18nMix(art);
+    contextmenuMix(art);
+    settingMix(art);
+    ControlMix(art);
 }
 
-window.ArtplayerPluginDanmu = ArtplayerPluginDanmu;
-export default ArtplayerPluginDanmu;
+window.artplayerPluginDanmu = artplayerPluginDanmu;
+export default artplayerPluginDanmu;

packages/artplayer-plugin-danmu/src/settingMix.js

@@ -0,0 +1,3 @@
+export default function setting(art) {
+    //
+}

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,32 +1,32 @@
 import { inverseClass } from '../utils';
 
-export default function aspectRatio(art) {
-    const { option, i18n, player } = art;
-    return {
-        disable: !option.aspectRatio,
-        name: 'aspectRatio',
-        index: 20,
-        html: `
-          ${i18n.get('Aspect ratio')}:
-          <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
-          <span data-ratio="4:3">4:3</span>
-          <span data-ratio="16:9">16:9</span>
-        `,
-        click: event => {
-            const { target } = event;
-            const { ratio } = target.dataset;
-            if (ratio) {
-                player.aspectRatio(ratio.split(':'));
-                art.contextmenu.hide();
-            }
-        },
-        callback: $menu => {
-            art.on('aspectRatioChange', ratio => {
-                const $current = Array.from($menu.querySelectorAll('span')).find(
-                    item => item.dataset.ratio === ratio.join(':'),
-                );
-                inverseClass($current, 'current');
-            });
-        },
+export default function aspectRatio(menuOption) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...menuOption,
+            html: `
+                ${i18n.get('Aspect ratio')}:
+                <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
+                <span data-ratio="4:3">4:3</span>
+                <span data-ratio="16:9">16:9</span>
+            `,
+            click: event => {
+                const { target } = event;
+                const { ratio } = target.dataset;
+                if (ratio) {
+                    player.aspectRatio(ratio.split(':'));
+                    art.contextmenu.hide();
+                }
+            },
+            mounted: $menu => {
+                art.on('aspectRatioChange', ratio => {
+                    const $current = Array.from($menu.querySelectorAll('span')).find(
+                        item => item.dataset.ratio === ratio.join(':'),
+                    );
+                    inverseClass($current, 'current');
+                });
+            },
+        };
     };
 }

packages/artplayer/src/contextmenu/close.js

@@ -1,11 +1,9 @@
-export default function close(art) {
-    return {
-        disable: false,
-        name: 'close',
-        index: 50,
+export default function close(menuOption) {
+    return art => ({
+        ...menuOption,
         html: art.i18n.get('Close'),
         click: () => {
             art.contextmenu.hide();
         },
-    };
+    });
 }

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { append, insertByIndex, setStyles, setStyle } from '../utils';
+import { append, insertByIndex, setStyle } from '../utils';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
@@ -22,7 +22,35 @@ export default class Contextmenu {
             events: { proxy },
         } = this.art;
 
-        option.contextmenu.push(playbackRate, aspectRatio, info, version, close);
+        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);
@@ -44,16 +72,17 @@ export default class Contextmenu {
     add(item, callback) {
         const menu = typeof item === 'function' ? item(this.art) : item;
         if (!menu.disable) {
-            id += 1;
             const {
                 refs: { $contextmenu },
                 events: { proxy },
             } = this.art;
+            id += 1;
             const name = menu.name || `contextmenu${id}`;
             const $menu = document.createElement('div');
             $menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
-            setStyles($menu, menu.style || {});
-            append($menu, menu.html);
+            if (menu.html) {
+                append($menu, menu.html);
+            }
             if (menu.click) {
                 proxy($menu, 'click', event => {
                     event.preventDefault();
@@ -62,13 +91,13 @@ export default class Contextmenu {
                 });
             }
             insertByIndex($contextmenu, $menu, menu.index || id);
-            this[name] = $menu;
-            if (menu.callback) {
-                menu.callback($menu);
+            if (menu.mounted) {
+                menu.mounted($menu);
             }
             if (callback) {
                 callback($menu);
             }
+            this[name] = $menu;
             this.art.emit('contextmenu:add', $menu);
         }
     }

packages/artplayer/src/contextmenu/info.js

@@ -1,12 +1,10 @@
-export default function info(art) {
-    return {
-        disable: false,
-        name: 'info',
-        index: 30,
+export default function info(menuOption) {
+    return art => ({
+        ...menuOption,
         html: art.i18n.get('Video info'),
         click: () => {
             art.info.show();
             art.contextmenu.hide();
         },
-    };
+    });
 }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,35 +1,35 @@
 import { inverseClass } from '../utils';
 
-export default function playbackRate(art) {
-    const { option, i18n, player } = art;
-    return {
-        disable: !option.playbackRate,
-        name: 'playbackRate',
-        index: 10,
-        html: `
-          ${i18n.get('Play speed')}:
-          <span data-rate="0.5">0.5</span>
-          <span data-rate="0.75">0.75</span>
-          <span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
-          <span data-rate="1.25">1.25</span>
-          <span data-rate="1.5">1.5</span>
-          <span data-rate="2.0">2.0</span>
-        `,
-        click: event => {
-            const { target } = event;
-            const { rate } = target.dataset;
-            if (rate) {
-                player.playbackRate(Number(rate));
-                art.contextmenu.hide();
-            }
-        },
-        callback: $menu => {
-            art.on('playbackRateChange', rate => {
-                const $current = Array.from($menu.querySelectorAll('span')).find(
-                    item => Number(item.dataset.rate) === rate,
-                );
-                inverseClass($current, 'current');
-            });
-        },
+export default function playbackRate(menuOption) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...menuOption,
+            html: `
+                ${i18n.get('Play speed')}:
+                <span data-rate="0.5">0.5</span>
+                <span data-rate="0.75">0.75</span>
+                <span data-rate="1" class="normal current">${i18n.get('Normal')}</span>
+                <span data-rate="1.25">1.25</span>
+                <span data-rate="1.5">1.5</span>
+                <span data-rate="2.0">2.0</span>
+            `,
+            click: event => {
+                const { target } = event;
+                const { rate } = target.dataset;
+                if (rate) {
+                    player.playbackRate(Number(rate));
+                    art.contextmenu.hide();
+                }
+            },
+            mounted: $menu => {
+                art.on('playbackRateChange', rate => {
+                    const $current = Array.from($menu.querySelectorAll('span')).find(
+                        item => Number(item.dataset.rate) === rate,
+                    );
+                    inverseClass($current, 'current');
+                });
+            },
+        };
     };
 }

packages/artplayer/src/contextmenu/version.js

@@ -1,6 +1,6 @@
-export default {
-    disable: false,
-    name: 'version',
-    index: 40,
-    html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
-};
+export default function version(menuOption) {
+    return {
+        ...menuOption,
+        html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>',
+    };
+}

packages/artplayer/src/controls/index.js

@@ -1,4 +1,4 @@
-import { insertByIndex, setStyle } from '../utils';
+import { insertByIndex, setStyle, append } from '../utils';
 import Fullscreen from './fullscreen';
 import FullscreenWeb from './fullscreenWeb';
 import Pip from './pip';
@@ -23,6 +23,7 @@ export default class Controls {
     }
 
     init() {
+        const { option } = this.art;
         this.add(
             new Progress({
                 name: 'progress',
@@ -35,7 +36,7 @@ export default class Controls {
         this.add(
             new Thumbnails({
                 name: 'thumbnails',
-                disable: !this.art.option.thumbnails.url,
+                disable: !option.thumbnails.url,
                 position: 'top',
                 index: 20,
             }),
@@ -71,7 +72,7 @@ export default class Controls {
         this.add(
             new Quality({
                 name: 'quality',
-                disable: this.art.option.quality.length === 0,
+                disable: option.quality.length === 0,
                 position: 'right',
                 index: 10,
             }),
@@ -80,7 +81,7 @@ export default class Controls {
         this.add(
             new Screenshot({
                 name: 'screenshot',
-                disable: !this.art.option.screenshot,
+                disable: !option.screenshot,
                 position: 'right',
                 index: 20,
             }),
@@ -89,7 +90,7 @@ export default class Controls {
         this.add(
             new Subtitle({
                 name: 'subtitle',
-                disable: !this.art.option.subtitle.url,
+                disable: !option.subtitle.url,
                 position: 'right',
                 index: 30,
             }),
@@ -98,7 +99,7 @@ export default class Controls {
         this.add(
             new Setting({
                 name: 'setting',
-                disable: !this.art.option.setting,
+                disable: !option.setting,
                 position: 'right',
                 index: 40,
             }),
@@ -107,7 +108,7 @@ export default class Controls {
         this.add(
             new Pip({
                 name: 'pip',
-                disable: !this.art.option.pip,
+                disable: !option.pip,
                 position: 'right',
                 index: 50,
             }),
@@ -116,7 +117,7 @@ export default class Controls {
         this.add(
             new FullscreenWeb({
                 name: 'fullscreenWeb',
-                disable: !this.art.option.fullscreenWeb,
+                disable: !option.fullscreenWeb,
                 position: 'right',
                 index: 60,
             }),
@@ -125,33 +126,50 @@ export default class Controls {
         this.add(
             new Fullscreen({
                 name: 'fullscreen',
-                disable: !this.art.option.fullscreen,
+                disable: !option.fullscreen,
                 position: 'right',
                 index: 70,
             }),
         );
 
-        this.art.option.controls.forEach(item => {
+        option.controls.forEach(item => {
             this.add(item);
         });
     }
 
-    add(control, callback) {
-        const { option } = control;
-        if (option && !option.disable) {
+    add(item, callback) {
+        const control = typeof item === 'function' ? item(this.art) : item.option;
+        if (control && !control.disable) {
+            const {
+                events: { proxy },
+            } = this.art;
             id += 1;
-            const name = option.name || `control${id}`;
+            const name = control.name || `control${id}`;
             const $control = document.createElement('div');
             $control.classList.value = `art-control art-control-${name}`;
-            this.mount(option.position, $control, option.index || id);
-            this.commonMethod(control, $control);
-            if (control.apply) {
-                control.apply(this.art, $control);
+            if (control.html) {
+                append($control, control.html);
+            }
+            if (control.click) {
+                proxy($control, 'click', event => {
+                    event.preventDefault();
+                    control.click.call(this, event);
+                    this.art.emit('control:click', $control);
+                });
+            }
+            if (item.apply) {
+                item.apply(this.art, $control);
+            }
+            this.mount(control.position, $control, control.index || id);
+            if (control.mounted) {
+                control.mounted($control);
             }
             if (callback) {
                 callback($control);
             }
+            this.commonMethod(control, $control);
             this[name] = control;
+            this.art.emit('control:add', $control);
         }
     }
 

packages/artplayer/src/layers.js

@@ -14,16 +14,18 @@ export default class Layers {
     add(item, callback) {
         const layer = typeof item === 'function' ? item(this.art) : item;
         if (!layer.disable) {
-            id += 1;
             const {
                 refs: { $layers },
                 events: { proxy },
             } = this.art;
+            id += 1;
             const name = layer.name || `layer${id}`;
             const $layer = document.createElement('div');
             $layer.classList.value = `art-layer art-layer-${name}`;
             setStyles($layer, layer.style || {});
-            append($layer, layer.html);
+            if (layer.html) {
+                append($layer, layer.html);
+            }
             if (layer.click) {
                 proxy($layer, 'click', event => {
                     event.preventDefault();
@@ -32,13 +34,13 @@ export default class Layers {
                 });
             }
             insertByIndex($layers, $layer, layer.index || id);
-            this[name] = $layer;
-            if (item.callback) {
-                item.callback($layer);
+            if (item.mounted) {
+                item.mounted($layer);
             }
             if (callback) {
                 callback($layer);
             }
+            this[name] = $layer;
             this.art.emit('layers:add', $layer);
         }
     }

packages/artplayer/src/scheme/index.js

@@ -35,8 +35,8 @@ export default {
     layers: {
         type: 'array',
         child: {
-            disable: 'boolean',
             type: 'object|function',
+            disable: 'boolean',
             name: 'string',
             index: 'number',
             html: validElement,
@@ -47,8 +47,8 @@ export default {
     contextmenu: {
         type: 'array',
         child: {
-            disable: 'boolean',
             type: 'object|function',
+            disable: 'boolean',
             name: 'string',
             index: 'number',
             html: validElement,
@@ -67,7 +67,7 @@ export default {
     controls: {
         type: 'array',
         child: {
-            type: 'object',
+            type: 'object|function',
             option: {
                 type: 'object',
                 child: {

packages/artplayer/src/setting/flip.js

@@ -1,46 +1,38 @@
-import { append, inverseClass } from '../utils';
+import { inverseClass } from '../utils';
 
-export default class Flip {
-    constructor(option) {
-        this.option = option;
-    }
-
-    apply(art, $setting) {
-        const {
-            i18n,
-            events: { proxy },
-            player,
-        } = art;
-        this.$header = $setting.querySelector('.art-setting-header');
-        this.$body = $setting.querySelector('.art-setting-body');
-        this.$btns = append(
-            this.$body,
-            `
-              <div class="art-setting-btns">
-                <div class="art-setting-btn current">
-                  <span data-flip="normal">${i18n.get('Normal')}</span>
+export default function flip(settingOption) {
+    return art => {
+        const { i18n, player } = art;
+        return {
+            ...settingOption,
+            html: `
+                <div class="art-setting-btns">
+                    <div class="art-setting-btn current">
+                        <span data-flip="normal">${i18n.get('Normal')}</span>
+                    </div>
+                    <div class="art-setting-btn">
+                        <span data-flip="horizontal">${i18n.get('Horizontal')}</span>
+                    </div>
+                    <div class="art-setting-btn">
+                        <span data-flip="vertical">${i18n.get('Vertical')}</span>
+                    </div>
                 </div>
-                <div class="art-setting-btn">
-                  <span data-flip="horizontal">${i18n.get('Horizontal')}</span>
-                </div>
-                <div class="art-setting-btn">
-                  <span data-flip="vertical">${i18n.get('Vertical')}</span>
-                </div>
-              </div>
             `,
-        );
-
-        proxy(this.$btns, 'click', event => {
-            const { target } = event;
-            const { flip } = target.dataset;
-            if (flip) {
-                player.flip(flip);
-            }
-        });
-
-        art.on('flipChange', flip => {
-            const $current = Array.from(this.$btns.querySelectorAll('span')).find(item => item.dataset.flip === flip);
-            inverseClass($current.parentElement, 'current');
-        });
-    }
+            click: event => {
+                const { target } = event;
+                const { flip } = target.dataset;
+                if (flip) {
+                    player.flip(flip);
+                }
+            },
+            mounted: $setting => {
+                art.on('flipChange', flip => {
+                    const $current = Array.from($setting.querySelectorAll('span')).find(
+                        item => item.dataset.flip === flip,
+                    );
+                    inverseClass($current.parentElement, 'current');
+                });
+            },
+        };
+    };
 }

packages/artplayer/src/setting/index.js

@@ -1,5 +1,5 @@
 import { setStyle, append, insertByIndex } from '../utils';
-import Flip from './flip';
+import flip from './flip';
 
 let id = 0;
 export default class Setting {
@@ -24,35 +24,47 @@ export default class Setting {
             this.hide();
         });
 
-        this.add(
-            new Flip({
-                name: 'flip',
-                title: 'Flip',
-                disable: false,
-                index: 10,
-            }),
-        );
+        this.add(flip({
+            disable: false,
+            title: 'Flip',
+            name: 'flip',
+            index: 10,
+        }));
     }
 
-    add(setting, callback) {
-        const { option } = setting;
-        if (option && !option.disable) {
+    add(item, callback) {
+        const setting = typeof item === 'function' ? item(this.art) : item;
+        if (!setting.disable) {
+            const {
+                i18n,
+                refs: { $settingBody },
+                events: { proxy },
+            } = this.art;
             id += 1;
-            const { refs, i18n } = this.art;
-            const name = option.name || `setting${id}`;
-            const title = option.title || name;
+            const name = setting.name || `setting${id}`;
+            const title = setting.title || name;
             const $setting = document.createElement('div');
-            $setting.setAttribute('class', `art-setting art-setting-${name}`);
+            $setting.classList.value = `art-setting art-setting-${name}`;
             append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
-            append($setting, '<div class="art-setting-body"></div>');
-            if (setting.apply) {
-                setting.apply(this.art, $setting);
+            const $settingInner = append($setting, '<div class="art-setting-body"></div>');
+            if (setting.html) {
+                append($settingInner , setting.html);
+            }
+            if ($settingInner.click) {
+                proxy($settingInner, 'click', event => {
+                    event.preventDefault();
+                    setting.click.call(this, event);
+                    this.art.emit('setting:click', $setting);
+                });
+            }
+            insertByIndex($settingBody, $setting, setting.index || id);
+            if (setting.mounted) {
+                setting.mounted($settingInner);
             }
-            insertByIndex(refs.$settingBody, $setting, option.index || id);
-            this[name] = $setting;
             if (callback) {
-                callback($setting);
+                callback($settingInner);
             }
+            this[name] = $setting;
             this.art.emit('setting:add', $setting);
         }
     }