调整switcher结构

docs/uncompiled/artplayer.js

@@ -2335,50 +2335,60 @@
         var name = option.name || "".concat(this.name).concat(this.id);
         errorHandle(!has(this, name), "Cannot add an existing name [".concat(name, "] to the [").concat(this.name, "]"));
         this.id += 1;
-        var $ref = document.createElement('div');
+        var result = {};
-        $ref.classList.value = "art-".concat(this.name, " art-").concat(this.name, "-").concat(name);
+        result.$ref = document.createElement('div');
-        var $value = document.createElement('div');
+        addClass(result.$ref, "art-".concat(this.name));
+        addClass(result.$ref, "art-".concat(this.name, "-").concat(name));
 
         if (option.html) {
-          append($value, option.html);
+          append(result.$ref, option.html);
-          append($ref, $value);
         }
 
-        if (option.switcher) ;
+        if (option.position !== 'top') {
+          // if (!(result.$ref.firstElementChild && result.$ref.firstElementChild.tagName === 'I')) {
+          //     addClass(result.$ref, 'art-control-onlyText');
+          // }
+          if (option.switcher) {
+            var hover = this.art.events.hover;
+            addClass(result.$ref, 'art-control-switcher');
+            result.$value = document.createElement('div');
+            result.$value.classList.value = "art-switcher-value";
+            append(result.$value, option.html);
+            result.$ref.innerHTML = '';
+            append(result.$ref, result.$value);
+            var $list = option.switcher.map(function (item) {
+              return "<div class=\"art-switcher-item\">".concat(item, "</div>");
+            }).join('');
+            result.$switcher = document.createElement('div');
+            addClass(result.$switcher, 'art-switcher-list');
+            append(result.$switcher, $list);
+            append(result.$ref, result.$switcher);
+            hover(result.$ref, function () {
+              result.$switcher.style.left = "-".concat(getStyle(result.$switcher, 'width') / 2 - getStyle(result.$ref, 'width') / 2, "px");
+            });
+          }
+        }
 
         if (option.style) {
-          setStyles($ref, option.style);
+          setStyles(result.$ref, option.style);
         }
 
         if (option.tooltip) {
-          tooltip($ref, option.tooltip);
+          tooltip(result.$ref, option.tooltip);
         }
 
         var childs = Array.from(this.$parent.children);
-        $ref.dataset.index = option.index || this.id;
+        result.$ref.dataset.index = option.index || this.id;
         var nextChild = childs.find(function (item) {
-          return Number(item.dataset.index) >= Number($ref.dataset.index);
+          return Number(item.dataset.index) >= Number(result.$ref.dataset.index);
         });
 
         if (nextChild) {
-          nextChild.insertAdjacentElement('beforebegin', $ref);
+          nextChild.insertAdjacentElement('beforebegin', result.$ref);
         } else {
-          append(this.$parent, $ref);
+          append(this.$parent, result.$ref);
         }
 
-        var result = {
-          $ref: $ref,
-          $value: $value,
-
-          get value() {
-            return $value.innerHTML;
-          },
-
-          set value(html) {
-            $value.innerHTML = html;
-          }
-
-        };
         def(this, name, {
           get: function get() {
             return result;
@@ -2386,18 +2396,15 @@
         });
 
         if (option.click) {
-          this.art.events.proxy($ref, 'click', function (event) {
+          this.art.events.proxy(result.$ref, 'click', function (event) {
+            result.event = event;
             event.preventDefault();
-            option.click.call(_this.art, event);
+            option.click.call(_this.art, result);
           });
         }
 
         if (option.mounted) {
-          option.mounted.call(this.art, $ref);
+          option.mounted.call(this.art, result.$ref);
-        }
-
-        if (option.position !== 'top' && !($ref.firstElementChild && $ref.firstElementChild.tagName === 'I')) {
-          addClass($ref, 'art-control-onlyText');
         }
       }
     }, {
@@ -4486,79 +4493,6 @@
     };
   }
 
-  function switcher(art) {
-    var controls = art.controls,
-        option = art.option,
-        hover = art.events.hover;
-
-    function add(item) {
-      var list = item.list.map(function (child) {
-        return "<div class=\"art-switcher-item\" data-switcher-name=\"".concat(child.name, "\">").concat(child.text, "</div>");
-      }).join('');
-      var html = "<div class=\"art-switcher-list\">".concat(list, "</div><div class=\"art-switcher-current\"></div>");
-      var $list;
-      var $childs;
-      var $current;
-      controls.add({
-        name: item.name,
-        position: 'right',
-        index: item.index,
-        html: html,
-        mounted: function 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);
-          var active = item.list.find(function (child) {
-            return child.name === item.default;
-          }) || item.list[0];
-
-          if (active) {
-            $current.innerText = active.text;
-            var $active = $childs.find(function ($child) {
-              return $child.dataset.switcherName === active.name;
-            });
-
-            if ($active) {
-              inverseClass($active, 'art-current');
-            }
-          }
-
-          hover($switcher, function () {
-            $list.style.left = "-".concat(getStyle($list, 'width') / 2 - getStyle($switcher, 'width') / 2, "px");
-          });
-        },
-        click: function click(_, event) {
-          var name = event.target.dataset.switcherName;
-
-          if (name) {
-            var active = item.list.find(function (child) {
-              return child.name === name;
-            });
-
-            if (active) {
-              var $active = $childs.find(function ($child) {
-                return $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: add
-    };
-  }
-
   var Plugins =
   /*#__PURE__*/
   function () {
@@ -4591,7 +4525,6 @@
         this.add(networkMonitor);
       }
 
-      this.add(switcher);
       art.option.plugins.forEach(function (plugin) {
         _this.add(plugin);
       });

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/loop.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/gestureILine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/fullscreenRotateMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/lightMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/loop.js","../../packages/artplayer/src/control/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/gestureILine truncated

packages/artplayer/src/plugins/index.js

@@ -4,7 +4,6 @@ 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) {
@@ -33,8 +32,6 @@ export default class Plugins {
             this.add(networkMonitor);
         }
 
-        this.add(switcher);
-
         art.option.plugins.forEach((plugin) => {
             this.add(plugin);
         });

packages/artplayer/src/plugins/switcher.js

@@ -1,66 +0,0 @@
-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/utils/component.js

@@ -1,4 +1,4 @@
-import { hasClass, addClass, removeClass, append, setStyles, tooltip } from './dom';
+import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle } from './dom';
 import { has, def } from './property';
 import { errorHandle } from './error';
 
@@ -36,64 +36,76 @@ export default class Component {
         errorHandle(!has(this, name), `Cannot add an existing name [${name}] to the [${this.name}]`);
 
         this.id += 1;
-        const $ref = document.createElement('div');
+        const result = {};
-        $ref.classList.value = `art-${this.name} art-${this.name}-${name}`;
+
+        result.$ref = document.createElement('div');
+        addClass(result.$ref, `art-${this.name}`);
+        addClass(result.$ref, `art-${this.name}-${name}`);
 
-        const $value = document.createElement('div');
         if (option.html) {
-            append($value, option.html);
+            append(result.$ref, option.html);
-            append($ref, $value);
         }
 
-        if (option.switcher) {
+        if (option.position !== 'top') {
-            //
+            // if (!(result.$ref.firstElementChild && result.$ref.firstElementChild.tagName === 'I')) {
+            //     addClass(result.$ref, 'art-control-onlyText');
+            // }
+
+            if (option.switcher) {
+                const { hover } = this.art.events;
+
+                addClass(result.$ref, 'art-control-switcher');
+                result.$value = document.createElement('div');
+                result.$value.classList.value = `art-switcher-value`;
+                append(result.$value, option.html);
+                result.$ref.innerHTML = '';
+                append(result.$ref, result.$value);
+
+                const $list = option.switcher.map((item) => `<div class="art-switcher-item">${item}</div>`).join('');
+                result.$switcher = document.createElement('div');
+                addClass(result.$switcher, 'art-switcher-list');
+                append(result.$switcher, $list);
+                append(result.$ref, result.$switcher);
+
+                hover(result.$ref, () => {
+                    result.$switcher.style.left = `-${
+                        getStyle(result.$switcher, 'width') / 2 - getStyle(result.$ref, 'width') / 2
+                    }px`;
+                });
+            }
         }
 
         if (option.style) {
-            setStyles($ref, option.style);
+            setStyles(result.$ref, option.style);
         }
 
         if (option.tooltip) {
-            tooltip($ref, option.tooltip);
+            tooltip(result.$ref, option.tooltip);
         }
 
         const childs = Array.from(this.$parent.children);
-        $ref.dataset.index = option.index || this.id;
+        result.$ref.dataset.index = option.index || this.id;
-        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number($ref.dataset.index));
+        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number(result.$ref.dataset.index));
         if (nextChild) {
-            nextChild.insertAdjacentElement('beforebegin', $ref);
+            nextChild.insertAdjacentElement('beforebegin', result.$ref);
         } else {
-            append(this.$parent, $ref);
+            append(this.$parent, result.$ref);
         }
 
-        const result = {
-            $ref,
-            $value,
-            get value() {
-                return $value.innerHTML;
-            },
-            set value(html) {
-                $value.innerHTML = html;
-            },
-        };
-
         def(this, name, {
             get: () => result,
         });
 
         if (option.click) {
-            this.art.events.proxy($ref, 'click', (event) => {
+            this.art.events.proxy(result.$ref, 'click', (event) => {
+                result.event = event;
                 event.preventDefault();
-                option.click.call(this.art, event);
+                option.click.call(this.art, result);
             });
         }
 
         if (option.mounted) {
-            option.mounted.call(this.art, $ref);
+            option.mounted.call(this.art, result.$ref);
-        }
-
-        if (option.position !== 'top' && !($ref.firstElementChild && $ref.firstElementChild.tagName === 'I')) {
-            addClass($ref, 'art-control-onlyText');
         }
     }
 }