add new icons

packages/artplayer/src/icons/index.js

@@ -21,6 +21,8 @@ import fullscreenOff from 'bundle-text:./fullscreen-off.svg';
 import fullscreenOn from 'bundle-text:./fullscreen-on.svg';
 import fullscreenWebOff from 'bundle-text:./fullscreen-web-off.svg';
 import fullscreenWebOn from 'bundle-text:./fullscreen-web-on.svg';
+import switchOn from 'bundle-text:./switch-on.svg';
+import switchOff from 'bundle-text:./switch-off.svg';
 
 export default class Icons {
     constructor(art) {
@@ -47,6 +49,8 @@ export default class Icons {
             fullscreenOn,
             fullscreenWebOff,
             fullscreenWebOn,
+            switchOn,
+            switchOff,
             ...art.option.icons,
         };
 

packages/artplayer/src/icons/switch-off.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#ffffff" d="M687.814 197.137H336.186c-175.814 0-319.67 141.708-319.67 314.88s143.856 314.846 319.67 314.846h351.612c175.83 0 319.686-141.675 319.686-314.846s-143.856-314.88-319.67-314.88zM335.591 756.57c-135.085 0-244.57-109.502-244.57-244.554 0-135.07 109.485-244.555 244.57-244.555 135.053 0 244.538 109.486 244.538 244.555 0 135.052-109.485 244.554-244.538 244.554z" />
+</svg>

packages/artplayer/src/icons/switch-on.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="icon" width="200px" height="120.05px" viewBox="0 0 1706 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#ffffff" d="M1053.866667 827.733333c170.666667 0 311.466667-136.533333 311.466666-307.2S1224.533333 213.333333 1053.866667 213.333333h-396.8C482.133333 213.333333 341.333333 349.866667 341.333333 520.533333s140.8 307.2 311.466667 307.2h401.066667zM1049.6 256c145.066667 0 264.533333 119.466667 264.533333 264.533333s-119.466667 264.533333-264.533333 264.533334-264.533333-119.466667-264.533333-264.533334S904.533333 256 1049.6 256z"  />
+</svg>

packages/artplayer/src/setting/index.js

@@ -3,7 +3,7 @@ import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
 import subtitleOffset from './subtitleOffset';
 import Component from '../utils/component';
-import { append, addClass, setStyle, inverseClass, includeFromEvent, def } from '../utils';
+import { append, addClass, setStyle, inverseClass, includeFromEvent, def, has } from '../utils';
 
 function makeRecursion(option, parentItem, parentList) {
     for (let index = 0; index < option.length; index++) {
@@ -223,8 +223,45 @@ export default class Setting extends Component {
         return $item;
     }
 
-    creatSwitch() {
-        //
+    creatSwitch(item) {
+        const {
+            icons,
+            events: { proxy },
+        } = this.art;
+
+        const $item = document.createElement('div');
+        addClass($item, 'art-setting-item');
+
+        const $left = append($item, '<div class="art-setting-item-left"></div>');
+        const $right = append($item, '<div class="art-setting-item-right"></div>');
+
+        const $icon = document.createElement('div');
+        addClass($icon, 'art-setting-item-left-icon');
+        append($icon, item.icon || icons.config);
+        append($left, $icon);
+
+        const $html = document.createElement('div');
+        addClass($html, 'art-setting-item-left-text');
+        append($html, item.html || '');
+        append($left, $html);
+
+        const $switch = document.createElement('div');
+        addClass($switch, 'art-setting-item-right-switch');
+        append($switch, item.switch ? icons.switchOn : icons.switchOff);
+        append($right, $switch);
+
+        const event = proxy($item, 'click', async (event) => {
+            if (item.onSwitch) {
+                const result = await item.onSwitch.call(this.art, item, $item, event);
+                item.switch = result;
+                $switch.innerHTML = '';
+                append($switch, result ? icons.switchOn : icons.switchOff);
+            }
+        });
+
+        this.events.push(event);
+
+        return $item;
     }
 
     init(option, width) {
@@ -247,7 +284,12 @@ export default class Setting extends Component {
             }
 
             for (let index = 0; index < option.length; index++) {
-                append($panel, this.creatSelector(option[index]));
+                const item = option[index];
+                if (has(item, 'switch')) {
+                    append($panel, this.creatSwitch(item));
+                } else {
+                    append($panel, this.creatSelector(item));
+                }
             }
 
             append(this.$parent, $panel);