chore(ui/subtitle): add onchange callback

shiyiya · Sep 9, 2024 · d243a14 · d243a14
1 parent aed6237
commit d243a14
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 143 deletions.
diff --git a/packages/docs/src/pages/docs/ui.mdx b/packages/docs/src/pages/docs/ui.mdx
@@ -32,142 +32,6 @@ const player = Player.make('#player', {
   .create()
 ```
 
-## Full-Options
-
-```typescript
-export type UiConfig = {
-  theme?: {
-    primaryColor?: string
-    watermark?: {
-      /** img or svg */
-      src: string
-      // make screenshot include watermark?
-      // set positioning here [top, left, right, bottom]
-      style?: Record<string, string>
-      attrs?: Record<string, string>
-    }
-
-    progress?: {
-      /**
-       * default: 'auto'
-       * auto: mobile->top pc->top
-       */
-      position?: 'auto' | 'top' | 'center'
-      backward?: number
-      forward?: number
-      /**
-       * default: true
-       * work only top
-       */
-      mini?: boolean
-    }
-
-    controller?: {
-      /**
-       * default: 'always'
-       */
-      display?: 'always' | 'played'
-      /**
-       * default: if(source.title)
-       */
-      header?: boolean | { back?: 'always' | 'fullscreen' }
-      /**
-       * default: true
-       */
-      coverButton?: boolean
-      /**
-       * default: hover
-       *
-       */
-      displayBehavior?: 'hover' | 'delay' | 'none'
-      /**
-       * default: 'none'
-       */
-      slideToSeek?: 'none' | 'always' | 'long-touch'
-    }
-
-    setting?: {
-      /**
-       * default: 'auto'
-       * auto: mobile->top pc->top
-       */
-      postion?: 'auto' | 'top' | 'bottom'
-    }
-  }
-  /**
-   * default: false
-   */
-  autoFocus?: boolean
-
-  /**
-   * default: false
-   */
-  screenshot?: boolean
-  /**
-   * default: true
-   * 全屏（如果不可用将会降级为网页全屏）
-   */
-  fullscreen?: boolean
-  /**
-   * default: false
-   */
-  pictureInPicture?: boolean
-
-  /**
-   *  default: true
-   *  Whether or not the device should rotate to landscape mode when the video
-   *  enters fullscreen.  Note that this behavior is based on an experimental
-   *  browser API, and may not work on all platforms.
-   *  Defaults to true.
-   */
-  forceLandscapeOnFullscreen?: boolean
-
-  /**
-   * PC only - default: { focused: true }
-   */
-  keyboard?: { focused?: boolean; global?: boolean }
-
-  /**
-   * default: ['2.0', '1.75', '1.25', '1.0', '0.75', '0.5']
-   */
-  speeds?: string[]
-
-  subtitle?: Subtitle
-
-  /**
-   * default: ['loop', 'speed']
-   */
-  settings?: (Setting | 'loop')[] | false
-
-  thumbnails?: Thumbnails
-
-  highlight?: {
-    color?: string
-    source?: Highlight[]
-  }
-
-  menu?: MenuBar[]
-
-  errorBuilder?: (error: ErrorPayload, target: HTMLDivElement, cb: (error: ErrorPayload) => void) => void
-
-  icons?: {
-    play?: string
-    pause?: string
-    volume?: [string, string] //on off
-    fullscreen?: [string, string]
-    pip?: [string, string]
-    setting?: string
-    screenshot?: string
-    playbackRate?: string
-    loop?: string
-    progressIndicator?: string
-    loadingIndicator?: string
-    next?: string
-    previous?: string
-  }
-}
-```
-
 ## Thumbnails
 
 ```js
@@ -185,6 +49,45 @@ thumbnails = {
 }
 ```
 
+## Subtitle
+
+```js
+OUI({
+  subtitle: {
+    source: [
+      {
+        name: 'en',
+        src: 'your-subtitle-file-path',
+        default: localStorage.getItem('pre-subtitle') == 'your-subtitle-file-path'
+      },
+      {
+        name: 'en-us',
+        src: 'your-subtitle-file-path',
+        default: localStorage.getItem('pre-subtitle') == 'your-subtitle-file-path'
+      }
+    ]
+  },
+  offset: 2, // delay any second
+  onChange(source) {
+    // persistedstate
+    localStorage.setItem('pre-subtitle', source.src)
+  }
+})
+```
+
+## How to display title ?
+
+```js
+const player = Player.make('#player', {
+  source: {
+    title: '君の名は' // required
+    // ...
+  }
+})
+  .use([OUI({ theme: { controller: { header: true } } })])
+  .create()
+```
+
 ## Add custom menu
 
 ```js

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oplayer/ui",
-  "version": "1.3.3-beta.8",
+  "version": "1.3.3-beta.9",
   "description": "ui plugin for oplayer",
   "type": "module",
   "main": "./dist/index.es.js",
@@ -16,7 +16,7 @@
     "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
     "tsc": "tsc --noEmit && echo",
     "build": "vite build && tsc --emitDeclarationOnly && pnpm run build:extra",
-    "build:extra": "vite build --config vite.core.config.ts"
+    "build:extra": "vite build --config vite.core.config.ts && cp ../core/dist/index.ui.min.js ./dist/"
   },
   "files": [
     "dist",

diff --git a/packages/ui/src/components/Subtitle.ts b/packages/ui/src/components/Subtitle.ts
@@ -171,7 +171,7 @@ export class Subtitle {
 
   processDefault(payload: SubtitleSource[]) {
     this.options.source = payload
-    this.currentSubtitle = findDefault(payload)
+    this.currentSubtitle = payload.find((st) => st.default)
   }
 
   update = () => {
@@ -270,6 +270,7 @@ export class Subtitle {
               this.currentSubtitle = value
               this.$dom.innerHTML = ''
               this.fetchSubtitle()
+              this.options.onChange?.(value)
             }
           } else {
             this.hide()
@@ -303,7 +304,3 @@ export class Subtitle {
     this.$track = this.$iosTrack = undefined as any
   }
 }
-
-function findDefault(o: SubtitleSource[]) {
-  return o.find((st) => st.default)
-}
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -23,6 +23,7 @@ export type Subtitle = {
   fontFamily?: string
   background?: boolean
   marginBottom?: string
+  onChange?: (s: SubtitleSource) => void
 }
 
 export type MenuBar<