Merge branch 'setting-switch'

docs/assets/example/index.js

@@ -33,16 +33,32 @@ var art = new Artplayer({
     settings: [
         {
             width: 200,
-            html: 'Custom Selector',
-            tooltip: 'Click This',
-            icon: '<img width="22" heigth="22" src="/assets/img/indicator.svg">',
+            html: 'Switch Subtitle',
+            tooltip: 'Bilingual',
+            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
             selector: [
                 {
-                    default: true,
-                    html: 'Setting 01',
+                    html: 'Display',
+                    switch: true,
+                    tooltip: 'Show',
+                    onSwitch: function (item) {
+                        item.tooltip = item.switch ? 'Hide' : 'Show';
+                        art.subtitle.show = !item.switch;
+                        return !item.switch;
+                    },
                 },
                 {
-                    html: 'Setting 02',
+                    default: true,
+                    html: 'Bilingual',
+                    url: '/assets/sample/subtitle.srt',
+                },
+                {
+                    html: 'Chinese',
+                    url: '/assets/sample/subtitle.cn.srt',
+                },
+                {
+                    html: 'Japanese',
+                    url: '/assets/sample/subtitle.jp.srt',
                 },
                 {
                     html: 'Setting 03',
@@ -53,7 +69,9 @@ var art = new Artplayer({
                 },
             ],
             onSelect: function (item) {
-                console.info('You clicked on the custom selector', item.html);
+                art.subtitle.switch(item.url, {
+                    name: item.html,
+                });
                 return item.html;
             },
         },

docs/assets/img/subtitle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path fill="#ffffff" d="M40 8H8c-2.21 0-4 1.79-4 4v24c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zM8 24h8v4H8v-4zm20 12H8v-4h20v4zm12 0h-8v-4h8v4zm0-8H20v-4h20v4z"/>
+</svg>