From 01d4c414bf9ba973d22527a83820aaeb251c3218 Mon Sep 17 00:00:00 2001 From: shiyiya Date: Mon, 7 Oct 2024 21:02:30 +0800 Subject: [PATCH] feat(ui): handle subtitle fetch --- examples/standalone/main.ts | 7 ++- packages/docs/src/pages/docs/start.mdx | 76 +++++++++++++++++++++++++- packages/docs/src/pages/docs/ui.mdx | 7 ++- packages/ui/package.json | 2 +- packages/ui/src/components/Setting.ts | 2 +- packages/ui/src/components/Subtitle.ts | 21 ++++--- packages/ui/src/types.ts | 2 +- 7 files changed, 104 insertions(+), 13 deletions(-) diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts index 557cdbd0..64f5a230 100644 --- a/examples/standalone/main.ts +++ b/examples/standalone/main.ts @@ -143,7 +143,7 @@ const player = Player.make('#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('#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 index 8d489a92..d457c2b7 100644 --- 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 - + ```shell @@ -123,4 +123,78 @@ OPlayer.make('#oplayer', { + +```html filename="oplayer.html" + + + + + OPlayer + + + + + + + + + +
+ + + + +``` + + diff --git a/packages/docs/src/pages/docs/ui.mdx b/packages/docs/src/pages/docs/ui.mdx index 061b81d4..6ffca592 100644 --- 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 index 1f6bdcc6..8786b927 100644 --- 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 index 442e6719..89eabf91 100644 --- 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 index c228ba5c..061b55bb 100644 --- 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 index 20a809da..107b430b 100644 --- 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 } export type MenuBar<