From 111d62132dc931c59fba97f171bdf981c30e8965 Mon Sep 17 00:00:00 2001 From: CY Date: Fri, 15 Mar 2024 01:36:49 +0000 Subject: [PATCH] fix #117 --- packages/docs/src/pages/plugins/playlist.mdx | 91 +++++++++++--------- packages/plugins/src/playlist.ts | 2 +- packages/ui/src/functions/keyboard.ts | 26 +++--- packages/ui/src/index.ts | 6 +- packages/ui/src/types.ts | 2 +- 5 files changed, 69 insertions(+), 58 deletions(-) diff --git a/packages/docs/src/pages/plugins/playlist.mdx b/packages/docs/src/pages/plugins/playlist.mdx index b76b9c84..1ada1a2e 100644 --- a/packages/docs/src/pages/plugins/playlist.mdx +++ b/packages/docs/src/pages/plugins/playlist.mdx @@ -6,8 +6,16 @@ npm i @oplayer/ui @oplayer/plugins ``` +```html + + + +``` + ```jsx -import Player from '@oplayer/react' +import Player from '@oplayer/core' import ui from '@oplayer/ui' import { PlaylistPlugin } from '@oplayer/plugins' @@ -74,56 +82,59 @@ Player.make('#player') ]) .create() ``` -## methods + +## methods ```ts export default class PlaylistPlugin implements PlayerPlugin { - key: string; - name: string; - version: string; - static m3u8Parser: any; - player: Player; - currentIndex?: number; - $root: HTMLDivElement; - options: PartialRequired; - constructor(options?: PlaylistOptions); - apply(player: Player): this | undefined; - _init(): Promise; - get isWaiting(): boolean; - changeSource(idx: number): Promise; - changeSourceList(sources: PlaylistSource[]): void; - next(): void; - previous(): void; - showUI(): void; - hideUI(): void; - render(): void; - renderList(sources: PlaylistSource[]): void; - destroy(): void; + player: Player + currentIndex?: number + $root: HTMLDivElement + constructor(options?: PlaylistOptions) + get isWaiting(): boolean + changeSource(idx: number): Promise + changeSourceList(sources: PlaylistSource[]): void + next(): void + previous(): void + showUI(): void + hideUI(): void + render(): void + destroy(): void } interface Segment { - uri: string; - timeline: number; - title: string; + uri: string + timeline: number + title: string } export interface PlaylistOptions { - sources: PlaylistSource[]; - customFetcher?: (source: PlaylistSource, index: number) => Promise | PlaylistSource; - autoNext?: boolean; - autoHide?: boolean; - initialIndex?: number; - m3uList?: { - sourceFormat?: (info: Segment) => Source; - } | true; + sources: PlaylistSource[] + customFetcher?: (source: PlaylistSource, index: number) => Promise | PlaylistSource + autoNext?: boolean + autoHide?: boolean + initialIndex?: number + m3uList?: + | { + sourceFormat?: (info: Segment) => Source + } + | true } export interface PlaylistSource extends Omit { - src?: string; - duration?: string; - subtitles?: SubtitleSource[]; - thumbnails?: Thumbnails; - highlights?: Highlight[]; + src?: string + duration?: string + subtitles?: SubtitleSource[] + thumbnails?: Thumbnails + highlights?: Highlight[] } - ``` + +## Event + +- `playlistsourcechange` +- `playlistsourceerror` + +## Keyboard + +- `l`: toggle list slide diff --git a/packages/plugins/src/playlist.ts b/packages/plugins/src/playlist.ts index 17f6067e..5f4e73e4 100644 --- a/packages/plugins/src/playlist.ts +++ b/packages/plugins/src/playlist.ts @@ -75,7 +75,7 @@ export default class PlaylistPlugin implements PlayerPlugin { this.next() }) } - this.player.context.ui.keyboard.register({ + this.player.context.ui.keyboard?.register({ l: () => { this.$root.classList.toggle('active') } diff --git a/packages/ui/src/functions/keyboard.ts b/packages/ui/src/functions/keyboard.ts index d6516cae..b0707136 100644 --- a/packages/ui/src/functions/keyboard.ts +++ b/packages/ui/src/functions/keyboard.ts @@ -64,16 +64,11 @@ const KEY_FN: Record void> = { export default function (it: UIInterface) { const { player, config } = it - if (typeof config.keyboard == 'undefined') { - config.keyboard = { focused: true } - } - function keydown(e: KeyboardEvent) { if ( document.activeElement?.tagName == 'INPUT' || document.activeElement?.tagName == 'TEXTAREA' || document.activeElement?.getAttribute('contenteditable') || - (!config.keyboard!.global && !config.keyboard!.focused) || (config.keyboard!.focused && !isFocused(player)) || e.altKey || e.ctrlKey || @@ -91,20 +86,21 @@ export default function (it: UIInterface) { } } - it.keyboard.register = function register(payload: any) { - for (const key in payload) { - if (Object.prototype.hasOwnProperty.call(payload, key)) { - KEY_FN[key] = payload[key] + it.keyboard = { + register: function register(payload: any) { + for (const key in payload) { + if (Object.prototype.hasOwnProperty.call(payload, key)) { + KEY_FN[key] = payload[key] + } } + }, + unregister: function unregister(payload: string[]) { + payload.forEach((k) => { + delete KEY_FN[k] + }) } } - it.keyboard.unregister = function unregister(payload: string[]) { - payload.forEach((k) => { - delete KEY_FN[k] - }) - } - document.addEventListener('keydown', keydown) player.on('destroy', () => { document.removeEventListener('keydown', keydown) diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 58b8be06..6fdebd0d 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -32,8 +32,9 @@ const defaultConfig: UiConfig = { autoFocus: true, forceLandscapeOnFullscreen: true, - showControls: 'always', settings: ['loop'], + showControls: 'always', + keyboard: { focused: true }, theme: { primaryColor: '#6668ab' }, speeds: ['2.0', '1.5', '1.25', '1.0', '0.75', '0.5'], ctrlHideBehavior: 'hover' @@ -106,6 +107,9 @@ class UI implements UIInterface { constructor(public config: UiConfig) { this.config = mergeDeep({}, defaultConfig, config) + if (this.config.keyboard?.global) { + this.config.keyboard!.focused = false + } } apply(player: Player) { diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 5204bf5a..ee51025a 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -220,7 +220,7 @@ export interface UIInterface extends PlayerPlugin { | 'left-bottom' ) => void - keyboard: { + keyboard?: { register: (payload: Record void>) => void unregister: (keys: string[]) => void }