add switcher

packages/artplayer/src/control/quality.js

@@ -20,7 +20,7 @@ export default function quality(option) {
             const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
 
             hover($control, () => {
-                $qualitys.style.left = `-${getStyle($qualitys, 'width') / 2 - $control.clientWidth / 2}px`;
+                $qualitys.style.left = `-${getStyle($qualitys, 'width') / 2 - getStyle($control, 'width') / 2}px`;
             });
 
             proxy($qualitys, 'click', event => {

packages/artplayer/src/index.js

@@ -137,6 +137,7 @@ export default class Artplayer extends Emitter {
             highlight: [],
             plugins: [],
             whitelist: [],
+            switcher: [],
             thumbnails: {
                 url: '',
                 number: 60,

packages/artplayer/src/plugins/index.js

@@ -4,6 +4,7 @@ import localVideo from './localVideo';
 import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
 import networkMonitor from './networkMonitor';
+import switcher from './switcher';
 
 export default class Plugins {
     constructor(art) {
@@ -32,7 +33,9 @@ export default class Plugins {
             this.add(networkMonitor);
         }
 
-        art.option.plugins.forEach(plugin => {
+        this.add(switcher);
+
+        art.option.plugins.forEach((plugin) => {
             this.add(plugin);
         });
     }

packages/artplayer/src/plugins/switcher.js

@@ -0,0 +1,66 @@
+import { queryAll, query, inverseClass, getStyle, addClass } from '../utils';
+
+export default function switcher(art) {
+    const {
+        controls,
+        option,
+        events: { hover },
+    } = art;
+
+    function add(item) {
+        const list = item.list
+            .map((child) => `<div class="art-switcher-item" data-switcher-name="${child.name}">${child.text}</div>`)
+            .join('');
+        const html = `<div class="art-switcher-list">${list}</div><div class="art-switcher-current"></div>`;
+
+        let $list;
+        let $childs;
+        let $current;
+
+        controls.add({
+            name: item.name,
+            position: 'right',
+            index: item.index,
+            html,
+            mounted($switcher) {
+                addClass($switcher, 'art-control-switcher');
+                $list = query('.art-switcher-list', $switcher);
+                $childs = queryAll('.art-switcher-item', $switcher);
+                $current = query('.art-switcher-current', $switcher);
+                const active = item.list.find((child) => child.name === item.default) || item.list[0];
+                if (active) {
+                    $current.innerText = active.text;
+                    const $active = $childs.find(($child) => $child.dataset.switcherName === active.name);
+                    if ($active) {
+                        inverseClass($active, 'art-current');
+                    }
+                }
+
+                hover($switcher, () => {
+                    $list.style.left = `-${getStyle($list, 'width') / 2 - getStyle($switcher, 'width') / 2}px`;
+                });
+            },
+            click(_, event) {
+                const name = event.target.dataset.switcherName;
+                if (name) {
+                    const active = item.list.find((child) => child.name === name);
+                    if (active) {
+                        const $active = $childs.find(($child) => $child.dataset.switcherName === active.name);
+                        $current.innerText = active.text;
+                        inverseClass($active, 'art-current');
+                        if (item.click) {
+                            item.click.call(art, name, event);
+                        }
+                    }
+                }
+            },
+        });
+    }
+
+    option.switcher.forEach(add);
+
+    return {
+        name: 'switcher',
+        add,
+    };
+}

packages/artplayer/src/scheme/index.js

@@ -72,6 +72,20 @@ export default {
             url: 'string',
         },
     ],
+    switcher: [
+        {
+            index: 'number|undefined',
+            click: 'function|undefined',
+            name: 'string|undefined',
+            default: 'string|undefined',
+            list: [
+                {
+                    name: 'string',
+                    text: 'string',
+                },
+            ],
+        },
+    ],
     highlight: [
         {
             time: 'number',

packages/artplayer/src/style/index.scss

@@ -17,4 +17,5 @@
 @import './mini.scss';
 @import './autoSize.scss';
 @import './flip.scss';
+@import './switcher.scss';
 @import './balloon.scss';

packages/artplayer/src/style/switcher.scss

@@ -0,0 +1,30 @@
+.art-video-player {
+    .art-control-switcher {
+        position: relative;
+        .art-switcher-list {
+            display: none;
+            position: absolute;
+            bottom: 35px;
+            width: 100px;
+            padding: 5px 0;
+            text-align: center;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: 3px;
+            .art-switcher-item {
+                height: 30px;
+                line-height: 30px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
+        &:hover .art-switcher-list {
+            display: block;
+        }
+    }
+}

packages/artplayer/types/artplayer.d.ts

@@ -52,6 +52,16 @@ export default class Artplayer {
             name: string;
             url: string;
         }[];
+        switcher?: {
+            index?: number;
+            click?: Function;
+            name?: string;
+            default?: string;
+            list: {
+                name: string;
+                text: string;
+            }[];
+        }[];
         highlight?: {
             time: number;
             text: string;