Merge branch 'setting-switch'

packages/artplayer/src/control/index.js

@@ -5,7 +5,6 @@ import fullscreenWeb from './fullscreenWeb';
 import pip from './pip';
 import playAndPause from './playAndPause';
 import progress from './progress';
-import subtitle from './subtitle';
 import time from './time';
 import volume from './volume';
 import setting from './setting';
@@ -117,21 +116,12 @@ export default class Control extends Component {
                 }),
             );
 
-            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,
+                    index: 30,
                 }),
             );
 
@@ -140,7 +130,7 @@ export default class Control extends Component {
                     name: 'pip',
                     disable: !option.pip,
                     position: 'right',
-                    index: 50,
+                    index: 40,
                 }),
             );
 
@@ -149,7 +139,7 @@ export default class Control extends Component {
                     name: 'fullscreenWeb',
                     disable: !option.fullscreenWeb,
                     position: 'right',
-                    index: 60,
+                    index: 50,
                 }),
             );
 
@@ -158,7 +148,7 @@ export default class Control extends Component {
                     name: 'fullscreen',
                     disable: !option.fullscreen,
                     position: 'right',
-                    index: 70,
+                    index: 60,
                 }),
             );
 

packages/artplayer/src/control/subtitle.js

@@ -1,26 +0,0 @@
-import { append, tooltip } from '../utils';
-
-export default function subtitle(option) {
-    return art => ({
-        ...option,
-        tooltip: art.i18n.get('Hide Subtitle'),
-        mounted: $control => {
-            const {
-                events: { proxy },
-                icons,
-                i18n,
-                subtitle,
-            } = art;
-
-            append($control, icons.subtitle);
-
-            proxy($control, 'click', () => {
-                subtitle.toggle = true;
-            });
-
-            art.on('subtitle', value => {
-                tooltip($control, i18n.get(value ? 'Hide Subtitle' : 'Show Subtitle'));
-            });
-        },
-    });
-}

packages/artplayer/src/i18n/cs.json

@@ -11,8 +11,6 @@
     "Horizontal": "Horizontálně",
     "Vertical": "Vertikálně",
     "Reconnect": "Opětovné připojení",
-    "Hide Subtitle": "Skrýt titulky",
-    "Show Subtitle": "Ukázat titulky",
     "Show Setting": "Zobrazit nastavení",
     "Hide Setting": "Skrýt nastavení",
     "Screenshot": "Snímek obrazovky",

packages/artplayer/src/i18n/pl.json

@@ -11,8 +11,6 @@
     "Horizontal": "Pozioma",
     "Vertical": "Pionowa",
     "Reconnect": "Połącz ponownie",
-    "Hide Subtitle": "Ukryj napisy",
-    "Show Subtitle": "Pokaż napisy",
     "Show Setting": "Pokaż ustawienia",
     "Hide Setting": "Ukryj ustawienia",
     "Screenshot": "Zrzut ekranu",

packages/artplayer/src/i18n/zh-cn.json

@@ -11,8 +11,6 @@
     "Horizontal": "水平",
     "Vertical": "垂直",
     "Reconnect": "重新连接",
-    "Hide Subtitle": "隐藏字幕",
-    "Show Subtitle": "显示字幕",
     "Show Setting": "显示设置",
     "Hide Setting": "隐藏设置",
     "Screenshot": "截图",

packages/artplayer/src/i18n/zh-tw.json

@@ -11,8 +11,6 @@
     "Horizontal": "水平",
     "Vertical": "垂直",
     "Reconnect": "重新連接",
-    "Hide Subtitle": "隱藏字幕",
-    "Show Subtitle": "顯示字幕",
     "Show Setting": "顯示设置",
     "Hide Setting": "隱藏设置",
     "Screenshot": "截圖",

packages/artplayer/src/icons/index.js

@@ -6,7 +6,6 @@ import play from 'bundle-text:./play.svg';
 import pause from 'bundle-text:./pause.svg';
 import volume from 'bundle-text:./volume.svg';
 import volumeClose from 'bundle-text:./volume-close.svg';
-import subtitle from 'bundle-text:./subtitle.svg';
 import screenshot from 'bundle-text:./screenshot.svg';
 import setting from 'bundle-text:./setting.svg';
 import arrowLeft from 'bundle-text:./arrow-left.svg';
@@ -34,7 +33,6 @@ export default class Icons {
             check,
             volume,
             volumeClose,
-            subtitle,
             screenshot,
             setting,
             pip,

packages/artplayer/src/setting/index.js

@@ -122,18 +122,21 @@ export default class Setting extends Component {
         return $item;
     }
 
+<<<<<<< HEAD
     creatSelector(item) {
+=======
+    creatItem(type, item) {
+>>>>>>> setting-switch
         const {
             icons,
             events: { proxy },
         } = this.art;
 
-        const hasChildren = item.selector && item.selector.length;
         const $item = document.createElement('div');
         addClass($item, 'art-setting-item');
 
-        if (item.default) {
-            addClass($item, 'art-current');
+        if (item.name) {
+            addClass($item, `art-setting-item-${item.name}`);
         }
 
         const $left = append($item, '<div class="art-setting-item-left"></div>');
@@ -141,7 +144,18 @@ export default class Setting extends Component {
 
         const $icon = document.createElement('div');
         addClass($icon, 'art-setting-item-left-icon');
-        append($icon, hasChildren ? item.icon || icons.config : icons.check);
+
+        switch (type) {
+            case 'switch':
+                append($icon, item.icon || icons.config);
+                break;
+            case 'selector':
+                append($icon, item.selector && item.selector.length ? item.icon || icons.config : icons.check);
+                break;
+            default:
+                break;
+        }
+
         append($left, $icon);
         item._$icon = $icon;
 
@@ -150,9 +164,7 @@ export default class Setting extends Component {
                 return $icon.innerHTML;
             },
             set(value) {
-                if (typeof value === 'string' || typeof value === 'number') {
-                    $icon.innerHTML = value;
-                }
+                $icon.innerHTML = String(value || '');
             },
         });
 
@@ -167,59 +179,111 @@ export default class Setting extends Component {
                 return $html.innerHTML;
             },
             set(value) {
-                if (typeof value === 'string' || typeof value === 'number') {
-                    $html.innerHTML = value;
-                }
+                $html.innerHTML = String(value || '');
             },
         });
 
-        if (hasChildren) {
-            const $tooltip = document.createElement('div');
-            addClass($tooltip, 'art-setting-item-right-tooltip');
-            append($tooltip, item.tooltip || '');
-            append($right, $tooltip);
-            item._$tooltip = $tooltip;
+        const $tooltip = document.createElement('div');
+        addClass($tooltip, 'art-setting-item-right-tooltip');
+        append($tooltip, item.tooltip || '');
+        append($right, $tooltip);
+        item._$tooltip = $tooltip;
 
-            def(item, 'tooltip', {
-                get() {
-                    return $tooltip.innerHTML;
-                },
-                set(value) {
-                    if (typeof value === 'string' || typeof value === 'number') {
-                        $tooltip.innerHTML = value;
-                    }
-                },
-            });
+        def(item, 'tooltip', {
+            get() {
+                return $tooltip.innerHTML;
+            },
+            set(value) {
+                $tooltip.innerHTML = String(value || '');
+            },
+        });
 
-            const $arrow = document.createElement('div');
-            addClass($arrow, 'art-setting-item-right-icon');
-            append($arrow, icons.arrowRight);
-            append($right, $arrow);
+        switch (type) {
+            case 'switch': {
+                const $state = document.createElement('div');
+                addClass($state, 'art-setting-item-right-icon');
+                const $switchOn = append($state, icons.switchOn);
+                const $switchOff = append($state, icons.switchOff);
+                setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
+                append($right, $state);
+                item._$switch = item.switch;
+
+                def(item, 'switch', {
+                    get() {
+                        return item._$switch;
+                    },
+                    set(value) {
+                        item._$switch = value;
+                        if (value) {
+                            setStyle($switchOff, 'display', 'none');
+                            setStyle($switchOn, 'display', null);
+                        } else {
+                            setStyle($switchOff, 'display', null);
+                            setStyle($switchOn, 'display', 'none');
+                        }
+                    },
+                });
+                break;
+            }
+            case 'selector':
+                if (item.selector && item.selector.length) {
+                    const $state = document.createElement('div');
+                    addClass($state, 'art-setting-item-right-icon');
+                    append($state, icons.arrowRight);
+                    append($right, $state);
+                }
+                break;
+            default:
+                break;
         }
 
         const event = proxy($item, 'click', async (event) => {
-            if (hasChildren) {
-                this.init(item.selector, item.width);
-            } else {
-                inverseClass($item, 'art-current');
+            switch (type) {
+                case 'switch':
+                    if (item.onSwitch) {
+                        item.switch = await item.onSwitch.call(this.art, item, $item, event);
+                    }
+                    break;
+                case 'selector':
+                    if (item.selector && item.selector.length) {
+                        this.init(item.selector, item.width);
+                    } else {
+                        inverseClass($item, 'art-current');
 
-                if (item._parentList) {
-                    this.init(item._parentList);
-                }
+                        if (item._parentList) {
+                            this.init(item._parentList);
+                        }
 
-                if (item._parentItem && item._parentItem.onSelect) {
-                    const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
-                    if (item._parentItem._$tooltip) {
-                        if (typeof result === 'string' || typeof result === 'number') {
-                            item._parentItem._$tooltip.innerHTML = result;
+                        if (item._parentItem && item._parentItem.onSelect) {
+                            const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
+                            if (item._parentItem._$tooltip) {
+                                item._parentItem._$tooltip.innerHTML = String(result || '');
+                            }
                         }
                     }
-                }
+                    break;
+                default:
+                    break;
             }
         });
 
         this.events.push(event);
 
+        switch (type) {
+            case 'switch':
+                if (item.mounted) {
+                    item.mounted.call(this.art, item, $item);
+                }
+                break;
+            case 'selector':
+                if (item.default) {
+                    addClass($item, 'art-current');
+                }
+                break;
+            default:
+                break;
+        }
+
         return $item;
     }
 
@@ -327,9 +391,15 @@ export default class Setting extends Component {
             for (let index = 0; index < option.length; index++) {
                 const item = option[index];
                 if (has(item, 'switch')) {
+<<<<<<< HEAD
                     append($panel, this.creatSwitch(item));
                 } else {
                     append($panel, this.creatSelector(item));
+=======
+                    append($panel, this.creatItem('switch', item));
+                } else {
+                    append($panel, this.creatItem('selector', item));
+>>>>>>> setting-switch
                 }
             }
 

packages/artplayer/src/style/mini.less

@@ -66,7 +66,7 @@
         .art-info,
         .art-layers,
         .art-notice,
-        .art-setting,
+        .art-settings,
         .art-subtitle {
             display: none !important;
         }

packages/artplayer/src/style/setting.less

@@ -75,6 +75,7 @@
 
                     .art-setting-item-right-tooltip {
                         font-size: 12px;
+                        margin-right: 5px;
                         white-space: nowrap;
                         color: rgba(255, 255, 255, 0.5);
                     }