feat: add subtitles toggle options (#118)

src/pages/home/previews/video.tsx

@@ -50,6 +50,7 @@ const Preview = () => {
     // highlight: [],
     plugins: [],
     whitelist: [],
+    settings: [],
     // subtitle:{}
     moreVideoAttr: {
       // @ts-ignore
@@ -87,7 +88,7 @@ const Preview = () => {
     autoOrientation: true,
     airplay: true,
   }
-  const subtitle = objStore.related.find((obj) => {
+  const subtitle = objStore.related.filter((obj) => {
     for (const ext of [".srt", ".ass", ".vtt"]) {
       if (obj.name.endsWith(ext)) {
         return true
@@ -103,12 +104,46 @@ const Preview = () => {
     }
     return false
   })
-  if (subtitle) {
+  if (subtitle.length != 0 ) {
     option.subtitle = {
-      url: proxyLink(subtitle, true),
-      type: ext(subtitle.name) as any,
+      url: proxyLink(subtitle[0], true),
+      type: ext(subtitle[0].name) as any,
     }
   }
+
+  if (subtitle.length != 0 ) {
+    const selector = []
+	selector.push({
+		html: "Display",
+		tooltip: "Show",
+		switch : true, 
+		onSwitch: function (item: Setting) {
+			item.tooltip = item.switch ? "Hide" : "Show"
+			this.subtitle.show = !item.switch
+			return !item.switch
+		}
+    })
+    subtitle.map((subtitleOne, i) => {
+        selector.push({
+            default:i == 0 ? true : false,
+            html: subtitleOne.name.length < 30 ? subtitleOne.name : subtitleOne.name.substr(-30,30),
+            url: proxyLink(subtitleOne, true),
+        })
+    })
+    option.settings.push({
+        html: "Subtitle",
+        tooltip: subtitle[0].name,
+        icon: '<img width="22" heigth="22" src="https://www.artplayer.org/assets/img/subtitle.svg">',
+        selector: selector,
+        onSelect: function (item: Setting) {
+            this.subtitle.switch(item.url, {
+                name: item.html,
+            })
+            return item.html
+        }
+    })
+  }
+
   if (danmu) {
     option.plugins = [
       artplayerPluginDanmuku({