fix(ui): keyboard with fn key

shiyiya · Feb 23, 2024 · 2350040 · 2350040
1 parent 043c8e1
commit 2350040
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 55 deletions.
diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -23,11 +23,10 @@ import vercel from '../../packages/docs/public/vercel.svg'
 import { MenuBar } from '@oplayer/ui/src/types'
 import { FORMAT_MENU, highlight, VIDEO_LIST } from './constants'
 import emptyBuffer from './emptyBuffer'
-import { Hello, vttThumbnails, ad, PlaylistPlugin } from '@oplayer/plugins'
+import { vttThumbnails, ad, PlaylistPlugin } from '@oplayer/plugins'
 
 interface Ctx {
   ui: ReturnType<typeof ui>
-  hello: Hello
   hls: ReturnType<typeof hls>
   dash: ReturnType<typeof dash>
   mpegts: ReturnType<typeof mpegts>
@@ -105,22 +104,21 @@ const player = Player.make<Ctx>('#player', {
       // displaySender: true,
       source: DANMAKU //SUPER_DANMAKU
     }),
-    new Hello(),
     new PlaylistPlugin({
       initialIndex: 0,
-      m3uList: {
-        sourceFormat(info) {
-          const chunk = info.title.substring(3).split(' ')
-          const titleWith = chunk.find((it) => it.includes('title')).split('=')[1]
-          const posterWith = chunk.find((it) => it.includes('logo'))?.split('=')[1]
-          return {
-            src: info.uri,
-            format: 'm3u8',
-            title: titleWith.substring(1, titleWith.length),
-            poster: posterWith?.substring(1, posterWith.length)
-          }
-        }
-      },
+      // m3uList: {
+      //   sourceFormat(info) {
+      //     const chunk = info.title.substring(3).split(' ')
+      //     const titleWith = chunk.find((it) => it.includes('title')).split('=')[1]
+      //     const posterWith = chunk.find((it) => it.includes('logo'))?.split('=')[1]
+      //     return {
+      //       src: info.uri,
+      //       format: 'm3u8',
+      //       title: titleWith.substring(1, titleWith.length),
+      //       poster: posterWith?.substring(1, posterWith.length)
+      //     }
+      //   }
+      // },
       sources: [
         {
           title: '君の名は - MP4',
@@ -135,7 +133,7 @@ const player = Player.make<Ctx>('#player', {
             {
               name: 'Default',
               default: true,
-              src: SRT,
+              src: SRT, //'https://mentoor-st.s3.ir-thr-at1.arvanstorage.ir/media/courses/videos/a220374676eb40e4/001f4770a44497047661e446/subtitle/001f4770a44497047661e446_subtitle.srt', //SRT,
               offset: 2
             },
             {
@@ -166,10 +164,6 @@ const player = Player.make<Ctx>('#player', {
   ])
   .create()
 
-// setTimeout(() => {
-//   player.changeQuality(Promise.resolve({ src, title: '君の名は' }))
-// }, 1000)
-
 //@ts-ignore
 if (false) {
   player.applyPlugin(
@@ -214,10 +208,6 @@ player.context.ui?.menu.register(<MenuBar>{
   }
 })
 
-console.log(player.context)
-
-player.context.hello.say()
-
 function stopLoad() {
   player.loader?.destroy()
   const u8 = Uint8Array.from(emptyBuffer)

diff --git a/examples/standalone/package-lock.json b/examples/standalone/package-lock.json
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [1.2.35.beta-2]
+
+- fix keyboard (fn).
+- improve custom errorBuilder.
+
 ## [1.2.34-beta.1]
 
 - try fix subtitle not working.

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

diff --git a/packages/ui/src/components/Error.ts b/packages/ui/src/components/Error.ts
@@ -1,4 +1,4 @@
-import type { Player, PlayerEvent } from '@oplayer/core'
+import type { Player } from '@oplayer/core'
 import { $ } from '@oplayer/core'
 import { error } from '../style'
 import { ErrorPayload, UiConfig } from '../types'
@@ -30,13 +30,6 @@ const VIDEO_ERROR_MAP = {
 }
 
 const render = (player: Player, el: HTMLElement, config: UiConfig) => {
-  if (config.errorBuilder) {
-    player.on('error', ({ payload }: PlayerEvent) => {
-      config.errorBuilder!(payload)
-    })
-    return
-  }
-
   const $dom = $.render($.create(`div.${errorCls}`, { 'aria-label': 'Error Overlay' }), el)
 
   function show(payload: ErrorPayload) {
@@ -70,8 +63,16 @@ const render = (player: Player, el: HTMLElement, config: UiConfig) => {
     $dom.innerText = ''
   }
 
+  const cx = (payload: ErrorPayload) => {
+    if (config.errorBuilder) {
+      config.errorBuilder!(payload, $dom, () => show(payload))
+    } else {
+      show(payload)
+    }
+  }
+
   player.on(['videosourcechange', 'videoqualitychange'], clear)
-  player.on('error', ({ payload }) => show(payload))
+  player.on('error', ({ payload }) => cx(payload))
 
   return show
 }

diff --git a/packages/ui/src/functions/keyboard.ts b/packages/ui/src/functions/keyboard.ts
@@ -68,10 +68,10 @@ export default function (it: UIInterface) {
       document.activeElement?.getAttribute('contenteditable') ||
       (!config.keyboard?.global && !config.keyboard?.focused) ||
       (config.keyboard.focused && !isFocused(player)) ||
-      !e.altKey ||
-      !e.ctrlKey ||
-      !e.metaKey ||
-      !e.shiftKey
+      e.altKey ||
+      e.ctrlKey ||
+      e.metaKey ||
+      e.shiftKey
     ) {
       return
     }

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -50,7 +50,7 @@ export type Setting<T = any> = {
   type: 'selector' | 'switcher'
   icon?: string
   children?: Setting[]
-  onChange?: (a: T /* Setting | boolean */, b?: { index: number, player: Player }) => void | Promise<void>
+  onChange?: (a: T /* Setting | boolean */, b?: { index: number; player: Player }) => void | Promise<void>
   default?: any
   value?: T
 }
@@ -165,7 +165,7 @@ export type UiConfig = {
 
   menu?: MenuBar[]
 
-  errorBuilder?: (error: Error | Event | { code: number; message: string }) => void
+  errorBuilder?: (error: ErrorPayload, target: HTMLDivElement, cb: () => void) => void
 
   icons?: {
     play?: string
@@ -191,9 +191,9 @@ export type UiConfig = {
 export type ErrorPayload =
   | Event
   | {
-    message: string
-    code?: number
-  }
+      message: string
+      code?: number
+    }
 
 export interface UIInterface extends PlayerPlugin {
   config: UiConfig