update docs

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -6,20 +6,20 @@ export default function aspectRatio(option) {
         return {
             ...option,
             html: `${i18n.get('Aspect Ratio')}:
-                <span data-ratio="default" class="art-current">${i18n.get('Default')}</span>
-                <span data-ratio="4:3">4:3</span>
-                <span data-ratio="16:9">16:9</span>
+                <span data-value="default" class="art-current">${i18n.get('Default')}</span>
+                <span data-value="4:3">4:3</span>
+                <span data-value="16:9">16:9</span>
             `,
             click: (contextmenu, event) => {
-                const { ratio } = event.target.dataset;
-                if (ratio) {
-                    art.aspectRatio = ratio;
+                const { value } = event.target.dataset;
+                if (value) {
+                    art.aspectRatio = value;
                     contextmenu.show = false;
                 }
             },
-            mounted: ($menu) => {
-                art.on('aspectRatio', (ratio) => {
-                    const $current = queryAll('span', $menu).find((item) => item.dataset.ratio === ratio);
+            mounted: ($panel) => {
+                art.on('aspectRatio', (value) => {
+                    const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
                     if ($current) {
                         inverseClass($current, 'art-current');
                     }

packages/artplayer/src/contextmenu/flip.js

@@ -6,20 +6,20 @@ export default function flip(option) {
         return {
             ...option,
             html: `${i18n.get('Video Flip')}:
-                <span data-flip="normal" class="art-current">${i18n.get('Normal')}</span>
-                <span data-flip="horizontal">${i18n.get('Horizontal')}</span>
-                <span data-flip="vertical">${i18n.get('Vertical')}</span>
+                <span data-value="normal" class="art-current">${i18n.get('Normal')}</span>
+                <span data-value="horizontal">${i18n.get('Horizontal')}</span>
+                <span data-value="vertical">${i18n.get('Vertical')}</span>
             `,
             click: (contextmenu, event) => {
-                const { flip } = event.target.dataset;
-                if (flip) {
-                    art.flip = flip;
+                const { value } = event.target.dataset;
+                if (value) {
+                    art.flip = value;
                     contextmenu.show = false;
                 }
             },
-            mounted: ($menu) => {
-                art.on('flip', (flip) => {
-                    const $current = queryAll('span', $menu).find((item) => item.dataset.flip === flip);
+            mounted: ($panel) => {
+                art.on('flip', (value) => {
+                    const $current = queryAll('span', $panel).find((item) => item.dataset.value === value);
                     if ($current) {
                         inverseClass($current, 'art-current');
                     }

packages/artplayer/src/contextmenu/playbackRate.js

@@ -6,23 +6,23 @@ export default function playbackRate(option) {
         return {
             ...option,
             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.0" class="art-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>
+                <span data-value="0.5">0.5</span>
+                <span data-value="0.75">0.75</span>
+                <span data-value="1.0" class="art-current">${i18n.get('Normal')}</span>
+                <span data-value="1.25">1.25</span>
+                <span data-value="1.5">1.5</span>
+                <span data-value="2.0">2.0</span>
             `,
             click: (contextmenu, event) => {
-                const { rate } = event.target.dataset;
-                if (rate) {
-                    art.playbackRate = Number(rate);
+                const { value } = event.target.dataset;
+                if (value) {
+                    art.playbackRate = Number(value);
                     contextmenu.show = false;
                 }
             },
-            mounted: ($menu) => {
-                art.on('playbackRate', (rate) => {
-                    const $current = queryAll('span', $menu).find((item) => Number(item.dataset.rate) === rate);
+            mounted: ($panel) => {
+                art.on('playbackRate', (value) => {
+                    const $current = queryAll('span', $panel).find((item) => Number(item.dataset.value) === value);
                     if ($current) {
                         inverseClass($current, 'art-current');
                     }

packages/artplayer/src/player/aspectRatioMix.js

@@ -9,7 +9,7 @@ export default function aspectRatioMix(art) {
 
     def(art, 'aspectRatio', {
         get() {
-            return $player.dataset.aspectRatio || '';
+            return $player.dataset.aspectRatio || 'default';
         },
         set(ratio) {
             if (!ratio) ratio = 'default';

packages/artplayer/src/player/flipMix.js

@@ -9,7 +9,7 @@ export default function flipMix(art) {
 
     def(art, 'flip', {
         get() {
-            return $player.dataset.flip;
+            return $player.dataset.flip || 'normal';
         },
         set(flip) {
             if (!flip) flip = 'normal';

packages/artplayer/src/player/playbackRateMix.js

@@ -9,7 +9,7 @@ export default function playbackRateMix(art) {
 
     def(art, 'playbackRate', {
         get() {
-            return $player.dataset.playbackRate;
+            return $player.dataset.playbackRate || 1.0;
         },
         set(rate) {
             if (rate) {

packages/artplayer/src/setting/aspectRatio.js

@@ -1,18 +1,31 @@
+import { inverseClass, queryAll } from '../utils';
+
 export default function aspectRatio(art) {
     const { i18n, icons } = art;
 
+    console.log(art.aspectRatio);
+
     return {
         width: 150,
         html: i18n.get('Aspect Ratio'),
         icon: icons.aspectRatio,
         selector: ['default', '4:3', '16:9'].map((item) => {
             return {
+                value: item,
+                default: item === art.aspectRatio,
                 html: item === 'default' ? i18n.get('Default') : item,
-                default: item === 'default',
-                onSelect() {
-                    art.aspectRatio = item;
-                },
             };
         }),
+        onSelect(item) {
+            art.aspectRatio = item.value;
+        },
+        mounted: ($panel) => {
+            art.on('aspectRatio', (value) => {
+                const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
+                if ($current) {
+                    inverseClass($current, 'art-current');
+                }
+            });
+        },
     };
 }

packages/artplayer/src/setting/flip.js

@@ -1,3 +1,5 @@
+import { inverseClass, queryAll } from '../utils';
+
 export default function flip(art) {
     const { i18n } = art;
 
@@ -10,14 +12,23 @@ export default function flip(art) {
     return {
         width: 150,
         html: i18n.get('Video Flip'),
-        selector: Object.keys(keys).map((key) => {
+        selector: Object.keys(keys).map((item) => {
             return {
-                html: i18n.get(keys[key]),
-                default: key === 'normal',
-                onSelect() {
-                    art.flip = key;
-                },
+                value: item,
+                default: item === art.flip,
+                html: i18n.get(keys[item]),
             };
         }),
+        onSelect(item) {
+            art.flip = item.value;
+        },
+        mounted: ($panel) => {
+            art.on('flip', (value) => {
+                const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
+                if ($current) {
+                    inverseClass($current, 'art-current');
+                }
+            });
+        },
     };
 }

packages/artplayer/src/setting/index.js

@@ -5,16 +5,13 @@ import subtitleOffset from './subtitleOffset';
 import Component from '../utils/component';
 import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../utils';
 
-function makeRecursion(option) {
+function makeRecursion(option, parentItem, parentList) {
     for (let index = 0; index < option.length; index++) {
         const item = option[index];
-        if (!item.back && item.selector) {
-            item.selector.unshift({
-                html: item.html,
-                selector: option,
-                back: true,
-            });
-            makeRecursion(item.selector);
+        item.parentItem = parentItem;
+        item.parentList = parentList;
+        if (item.selector) {
+            makeRecursion(item.selector, item, option);
         }
     }
     return option;
@@ -39,29 +36,29 @@ export default class Setting extends Component {
         this.cache = new Map();
 
         if (option.setting) {
-            if (option.playbackRate) {
-                this.option.push(playbackRate(art));
-            }
-
-            if (option.aspectRatio) {
-                this.option.push(aspectRatio(art));
-            }
-
-            if (option.flip) {
-                this.option.push(flip(art));
-            }
-
-            if (option.subtitleOffset) {
-                this.option.push(subtitleOffset(art));
-            }
-
-            for (let index = 0; index < option.settings.length; index++) {
-                this.option.push(option.settings[index]);
-            }
-
-            this.option = makeRecursion(this.option);
-
             art.once('ready', () => {
+                if (option.playbackRate) {
+                    this.option.push(playbackRate(art));
+                }
+
+                if (option.aspectRatio) {
+                    this.option.push(aspectRatio(art));
+                }
+
+                if (option.flip) {
+                    this.option.push(flip(art));
+                }
+
+                if (option.subtitleOffset) {
+                    this.option.push(subtitleOffset(art));
+                }
+
+                for (let index = 0; index < option.settings.length; index++) {
+                    this.option.push(option.settings[index]);
+                }
+
+                this.option = makeRecursion(this.option);
+
                 this.init(this.option);
             });
 
@@ -83,6 +80,29 @@ export default class Setting extends Component {
         }
     }
 
+    creatHeader(item) {
+        const {
+            icons,
+            events: { proxy },
+        } = this.art;
+
+        const $item = document.createElement('div');
+        addClass($item, 'art-setting-item');
+        addClass($item, 'art-setting-item-back');
+        const $left = append($item, '<div class="art-setting-item-left"></div>');
+        const $icon = document.createElement('div');
+        addClass($icon, 'art-setting-item-left-icon');
+        append($icon, icons.arrowLeft);
+        append($left, $icon);
+        append($left, item.parentItem.html);
+
+        proxy($item, 'click', () => {
+            this.init(item.parentList);
+        });
+
+        return $item;
+    }
+
     creatItem(item) {
         const {
             icons,
@@ -91,7 +111,14 @@ export default class Setting extends Component {
 
         const $item = document.createElement('div');
         addClass($item, 'art-setting-item');
-        if (item.default) addClass($item, 'art-current');
+
+        if (item.default) {
+            addClass($item, 'art-current');
+        }
+
+        if (item.value) {
+            $item.dataset.value = item.value;
+        }
 
         const $left = append($item, '<div class="art-setting-item-left"></div>');
         const $right = append($item, '<div class="art-setting-item-right"></div>');
@@ -100,16 +127,11 @@ export default class Setting extends Component {
         addClass($icon, 'art-setting-item-left-icon');
         const hasChildren = item.selector && item.selector.length;
 
-        if (item.back) {
-            addClass($item, 'art-setting-item-back');
-            append($icon, icons.arrowLeft);
+        if (hasChildren) {
+            append($icon, item.icon || icons.config);
+            append($right, icons.arrowRight);
         } else {
-            if (hasChildren) {
-                append($icon, item.icon || icons.config);
-                append($right, icons.arrowRight);
-            } else {
-                append($icon, icons.check);
-            }
+            append($icon, icons.check);
         }
 
         append($left, $icon);
@@ -120,8 +142,8 @@ export default class Setting extends Component {
                 this.init(item.selector, item.width);
             } else {
                 inverseClass($item, 'art-current');
-                if (item.onSelect) {
-                    const result = item.onSelect.call(this.art, item, $item, event);
+                if (item.parentItem && item.parentItem.onSelect) {
+                    const result = item.parentItem.onSelect.call(this.art, item, $item, event);
                     if (typeof result === 'string') {
                         $item.innerHTML = result;
                     }
@@ -146,14 +168,24 @@ export default class Setting extends Component {
         } else {
             const $panel = document.createElement('div');
             addClass($panel, 'art-setting-panel');
+
+            if (option[0] && option[0].parentItem) {
+                append($panel, this.creatHeader(option[0]));
+            }
+
             for (let index = 0; index < option.length; index++) {
                 append($panel, this.creatItem(option[index]));
             }
+
             $panel.dataset.width = width || this.width;
             append(this.$parent, $panel);
             this.cache.set(option, $panel);
             inverseClass($panel, 'art-current');
             setStyle(this.$parent, 'width', `${$panel.dataset.width}px`);
+
+            if (option[0] && option[0].parentItem && option[0].parentItem.mounted) {
+                option[0].parentItem.mounted.call(this.art, $panel);
+            }
         }
     }
 }

packages/artplayer/src/setting/playbackRate.js

@@ -1,3 +1,5 @@
+import { inverseClass, queryAll } from '../utils';
+
 export default function playbackRate(art) {
     const { i18n, icons } = art;
 
@@ -7,12 +9,23 @@ export default function playbackRate(art) {
         icon: icons.playbackRate,
         selector: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
             return {
+                value: item,
+                default: item === art.playbackRate,
                 html: item === 1.0 ? i18n.get('Normal') : item,
-                default: item === 1.0,
-                onSelect() {
-                    art.playbackRate = item;
-                },
             };
         }),
+        onSelect(item) {
+            art.playbackRate = item.value;
+        },
+        mounted: ($panel) => {
+            art.on('playbackRate', (value) => {
+                const $current = queryAll('.art-setting-item', $panel).find(
+                    (item) => Number(item.dataset.value) === value,
+                );
+                if ($current) {
+                    inverseClass($current, 'art-current');
+                }
+            });
+        },
     };
 }

packages/artplayer/src/setting/subtitleOffset.js

@@ -1,3 +1,5 @@
+import { inverseClass, queryAll } from '../utils';
+
 export default function subtitleOffset(art) {
     const { i18n, icons } = art;
 
@@ -7,12 +9,21 @@ export default function subtitleOffset(art) {
         icon: icons.subtitle,
         selector: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
             return {
+                value: item,
+                default: item === art.subtitleOffset,
                 html: item === 0 ? i18n.get('Normal') : item,
-                default: item === 0,
-                onSelect() {
-                    art.subtitleOffset = item;
-                },
             };
         }),
+        onSelect(item) {
+            art.subtitleOffset = item.value;
+        },
+        mounted: ($panel) => {
+            art.on('subtitleOffset', (value) => {
+                const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
+                if ($current) {
+                    inverseClass($current, 'art-current');
+                }
+            });
+        },
     };
 }