feat(ui): handle subtitle fetch

shiyiya · Oct 7, 2024 · 01d4c41 · 01d4c41
1 parent bd5047d
commit 01d4c41
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 13 deletions.
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -143,7 +143,7 @@ const player = Player.make<Ctx>('#player', {
       // source: DANMAKU //SUPER_DANMAKU
     }),
     new Playlist({
-      initialIndex: 6,
+      initialIndex: 3,
       sources: [
         {
           title: 'hls - muti quality & subtitle & audio',
@@ -178,6 +178,11 @@ const player = Player.make<Ctx>('#player', {
             number: 100
           },
           subtitles: [
+            {
+              name: 'ass',
+              type: 'ass',
+              src: `https://web.opendrive.com/api/v1/download/file.json/MjBfMzA2MTA2OThf?temp_key=%EF%BF%BD%11%2Bj*%EF%BF%BD%EF%BF%BD%EF%BF%BDC%EF%BF%BDD%EF%BF%BD%EF%BF%BD%EF%BF%BDn%EF%BF%BDm%01%EF%BF%BD%D6%B6%D1%86%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%06%EF%BF%BD%EF%BF%BD%EF%BF%BDm%06%EF%BF%BD%EF%BF%BDv%EF%BF%BD%27%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BDz6%D1%8B%EF%BF%BD%7Bm0%EF%BF%BDm%0C%EF%BF%BDv%EF%BF%BD%EF%BF%BDM%EF%BF%BD%EF%BF%BD%5D%EF%BF%BD%EF%BF%BD%1E%EF%BF%BD%D2%9EC%EF%BF%BD%13.%EF%BF%BD%D8%A9%EF%BF%BD%EF%BF%BD%EF%BF%BDJ%EF%BF%BD%EF%BF%BD%EF%BF%BD%5E%EF%BF%BD%3Bki%EF%BF%BD9%EF%BF%BD%EF%BF%BD%DA%B2&inline=1` //'https://mentoor-st.s3.ir-thr-at1.arvanstorage.ir/media/courses/videos/a220374676eb40e4/001f4770a44497047661e446/subtitle/001f4770a44497047661e446_subtitle.srt', //SRT,
+            },
             {
               name: 'Default',
               default: true,

diff --git a/packages/docs/src/pages/docs/start.mdx b/packages/docs/src/pages/docs/start.mdx
@@ -2,7 +2,7 @@ import { Callout, Tab, Tabs } from 'nextra-theme-docs'
 
 ## Install
 
-<Tabs items={['npm', 'script', 'script (with streams loader)']}>
+<Tabs items={['npm', 'script', 'simple script', 'maccms']}>
 
 <Tab>
 ```shell
@@ -123,4 +123,78 @@ OPlayer.make('#oplayer', {
 
 </Tab>
 
+<Tab>
+```html filename="oplayer.html"
+<!--
+1. 上传至苹果CMS的目录“/static/player/”
+2.登录苹果CMS后台：“视频→播放器→添加”
+3.基本设置好了以后，点击“播放器代码”，并粘贴：
+MacPlayer.Html = '<iframe border="0" src="'+maccms.path+'/static/player/oplayer.html" width="100%" height="100%" marginWidth="0" frameSpacing="0" marginHeight="0" frameBorder="0" scrolling="no" vspale="0" noResize></iframe>';
+MacPlayer.Show();
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>OPlayer</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
+    <meta name="referrer" content="never" />
+    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/@oplayer/full@latest/dist/index.min.js"></script>
+  </head>
+  <body marginwidth="0" marginheight="0">
+    <div id="oplayer"></div>
+    <script type="text/javascript">
+      var player = OPlayer.make('#oplayer', {
+        source: {
+          // title: '',
+          // poster: ''
+          src: parent.MacPlayer.PlayUrl
+        },
+        autoplay: true
+      })
+        .use([
+          OUI({
+            theme: {
+              primaryColor: '#6668ab',
+              controller: {
+                slideToSeek: 'always'
+              }
+            },
+            keyboard: { global: true },
+            screenshot: true,
+            pictureInPicture: true
+          }),
+          OHls({
+            forceHLS: true,
+            library: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js'
+          }),
+          ODash({ library: 'https://cdn.dashjs.org/latest/dash.all.min.js' }),
+          OMpegts({ library: 'https://cdn.jsdelivr.net/npm/mpegts.js@latest/dist/mpegts.min.js' }),
+          OTorrent({ library: 'https://cdn.jsdelivr.net/npm/[email protected]/webtorrent.min.js' })
+        ])
+        .create()
+
+      if (parent.MacPlayer.PlayLinkNext != '') {
+        player.on('ended', function () {
+          top.location.href = parent.MacPlayer.PlayLinkNext
+        })
+      }
+    </script>
+
+  </body>
+</html>
+```
+</Tab>
+
 </Tabs>
diff --git a/packages/docs/src/pages/docs/ui.mdx b/packages/docs/src/pages/docs/ui.mdx
@@ -74,8 +74,13 @@ OUI({
     onChange(source) {
       // persistedstate
       localStorage.setItem('pre-subtitle', source.src)
+
+      if (source.src == 'abc') {
+        // or custom fetch
+        return yourFetch(`https://abc.com/subtile/${source.src}`, { mode: 'cors' })
+      }
     }
-  },
+  }
 })
 ```
 

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.3.3",
+  "version": "1.3.4-beta.0",
   "description": "ui plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",

diff --git a/packages/ui/src/components/Setting.ts b/packages/ui/src/components/Setting.ts
@@ -319,7 +319,7 @@ function createPanel(
         // TODO: update methond
       } else {
         if (type == 'option' || (type == undefined && !isSelectorOptionsPanel)) {
-          $row.addEventListener('click', (event) => (onChange || options.parenOnChange)?.({ value, event }))
+          $row.addEventListener('click', () => (onChange || options.parenOnChange)?.(value))
         }
       }
     }

diff --git a/packages/ui/src/components/Subtitle.ts b/packages/ui/src/components/Subtitle.ts
@@ -212,15 +212,23 @@ export class Subtitle {
   fetchSubtitle() {
     if (!this.currentSubtitle) return
     if (!this.$track) this.createTrack()
-    const { currentSubtitle, player, $track, $iosTrack } = this
+    const { currentSubtitle, player, $track, $iosTrack, options } = this
     const { src, encoding, type = 'auto', offset } = currentSubtitle
 
-    return fetch(src)
-      .then((response) => response.arrayBuffer())
-      .then((buffer) => {
-        const decoder = new TextDecoder(encoding)
-        const text = decoder.decode(buffer)
+    return Promise.resolve(options.onChange?.(currentSubtitle))
+      .then((rsp) => {
+        if (rsp == undefined) {
+          return fetch(src)
+            .then((response) => response.arrayBuffer())
+            .then((buffer) => {
+              return new TextDecoder(encoding).decode(buffer)
+            })
+        }
 
+        return rsp
+      })
+      .then((text) => {
+        if (!text) throw new Error('Empty Subtitle')
         switch (type == 'auto' ? /srt|ass|vtt(#|\?|$)/i.exec(src)?.[0] : type) {
           case 'srt':
             return vttToBlob(srtToVtt(text))
@@ -270,7 +278,6 @@ export class Subtitle {
               this.currentSubtitle = value
               this.$dom.innerHTML = ''
               this.fetchSubtitle()
-              this.options.onChange?.(value)
             }
           } else {
             this.hide()

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -23,7 +23,7 @@ export type Subtitle = {
   fontFamily?: string
   background?: boolean
   marginBottom?: string
-  onChange?: (s: SubtitleSource) => void
+  onChange?: (s: SubtitleSource) => void | Promise<string>
 }
 
 export type MenuBar<