From 7bb8c3d0e5f664554d22fb7bf808d247440c45e7 Mon Sep 17 00:00:00 2001 From: Harvey Date: Fri, 11 Feb 2022 11:18:42 +0800 Subject: [PATCH] update --- docs/assets/ts/artplayer.d.ts | 6 +- .../en/Questions/How to add setting panel.md | 105 +++++++++++++++++- .../Questions/How to add setting panel.md | 81 ++++++++++++-- packages/artplayer/types/artplayer.d.ts | 6 +- 4 files changed, 182 insertions(+), 16 deletions(-) diff --git a/docs/assets/ts/artplayer.d.ts b/docs/assets/ts/artplayer.d.ts index b215e5386..af454a395 100644 --- a/docs/assets/ts/artplayer.d.ts +++ b/docs/assets/ts/artplayer.d.ts @@ -89,15 +89,15 @@ type SettingOption = { /** * Whether the default is selected */ - current?: boolean; + default?: boolean; /** - * Custom selector list, use in controls + * Custom selector list */ selector?: SettingOption[]; /** - * When selector item click, use in controls + * When selector item click */ onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void; }; diff --git a/packages/artplayer-document/docs/en/Questions/How to add setting panel.md b/packages/artplayer-document/docs/en/Questions/How to add setting panel.md index baf1203fa..fa7e75ba8 100644 --- a/packages/artplayer-document/docs/en/Questions/How to add setting panel.md +++ b/packages/artplayer-document/docs/en/Questions/How to add setting panel.md @@ -1,4 +1,107 @@ --- title: How to add setting panel sidebar_position: 6 ---- \ No newline at end of file +--- + +Settings panels are similar to a collection of list selections, and support multi-layer nested + +| Property | Type | Description | +| ---------- | ------------------- | ------------------------ | +| `html` | `String`、`Element` | DOM elements of selector | +| `icon` | `String`、`Element` | Icon of selector | +| `selector` | `Array` | Selector List | +| `onSelect` | `Function` | Selector Click event | +| `width` | `Number` | Panel width | +| `default` | `Boolean` | Default selected | + +
▶ Run Code
+ +```js +function onSubtitleSelect(item, $dom) { + console.info(item, $dom); + this.subtitle.url = item.url; +} + +function onQualitySelect(item, $dom) { + console.info(item, $dom); + this.switchQuality(item.url, item.html); +} + +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + flip: true, + playbackRate: true, + aspectRatio: true, + settings: [ + { + html: 'Select Subtitle', + width: 250, + selector: [ + { + default: true, + html: 'Subtitle 01', + url: '/assets/sample/subtitle.srt?id=1', + onSelect: onSubtitleSelect, + }, + { + html: 'Subtitle 02', + url: '/assets/sample/subtitle.srt?id=2', + onSelect: onSubtitleSelect, + }, + ], + + }, + { + html: 'Select Quality', + width: 150, + selector: [ + { + default: true, + html: '1080P', + url: '/assets/sample/video.mp4?id=1080', + onSelect: onQualitySelect, + }, + { + html: '720P', + url: '/assets/sample/video.mp4?id=720', + onSelect: onQualitySelect, + }, + { + html: '360P', + url: '/assets/sample/video.mp4?id=360', + onSelect: onQualitySelect, + }, + ], + }, + { + html: 'Multi-layer nested', + selector: [ + { + html: 'Nested 01', + selector: [ + { + html: 'Nested 02', + }, + { + html: 'Nested 02', + }, + ], + }, + { + html: 'Nested 01', + selector: [ + { + html: 'Nested 02', + }, + { + html: 'Nested 02', + }, + ], + }, + ], + }, + ], +}); +``` \ No newline at end of file diff --git a/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md b/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md index 9e86b2808..564e7313f 100644 --- a/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md +++ b/packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md @@ -5,11 +5,28 @@ sidebar_position: 6 设置面板类似于列表选择的集合，而且支持多层嵌套 -### 切换字幕 +| 属性 | 类型 | 描述 | +| ---------- | ------------------- | --------------- | +| `html` | `String`、`Element` | 元素的 DOM 元素 | +| `icon` | `String`、`Element` | 元素的图标 | +| `selector` | `Array` | 元素列表 | +| `onSelect` | `Function` | 元素点击事件 | +| `width` | `Number` | 列表宽度 | +| `default` | `Boolean` | 是否默认选中 |
▶ Run Code
```js +function onSubtitleSelect(item, $dom) { + console.info(item, $dom); + this.subtitle.url = item.url; +} + +function onQualitySelect(item, $dom) { + console.info(item, $dom); + this.switchQuality(item.url, item.html); +} + var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', @@ -19,25 +36,71 @@ var art = new Artplayer({ aspectRatio: true, settings: [ { - html: 'Subtitle', + html: '选择字幕', + width: 250, selector: [ { default: true, html: 'Subtitle 01', url: '/assets/sample/subtitle.srt?id=1', + onSelect: onSubtitleSelect, }, { html: 'Subtitle 02', url: '/assets/sample/subtitle.srt?id=2', + onSelect: onSubtitleSelect, + }, + ], + + }, + { + html: '选择画质', + width: 150, + selector: [ + { + default: true, + html: '1080P', + url: '/assets/sample/video.mp4?id=1080', + onSelect: onQualitySelect, + }, + { + html: '720P', + url: '/assets/sample/video.mp4?id=720', + onSelect: onQualitySelect, + }, + { + html: '360P', + url: '/assets/sample/video.mp4?id=360', + onSelect: onQualitySelect, + }, + ], + }, + { + html: '多层嵌套', + selector: [ + { + html: '嵌套01', + selector: [ + { + html: '嵌套02', + }, + { + html: '嵌套02', + }, + ], + }, + { + html: '嵌套01', + selector: [ + { + html: '嵌套02', + }, + { + html: '嵌套02', + }, + ], }, ], - onSelect: function (item, $dom) { - console.info(item, $dom); - - art.subtitle.url = item.url; - - return '你点击了 ' + item.html; - }, }, ], }); diff --git a/packages/artplayer/types/artplayer.d.ts b/packages/artplayer/types/artplayer.d.ts index b215e5386..af454a395 100644 --- a/packages/artplayer/types/artplayer.d.ts +++ b/packages/artplayer/types/artplayer.d.ts @@ -89,15 +89,15 @@ type SettingOption = { /** * Whether the default is selected */ - current?: boolean; + default?: boolean; /** - * Custom selector list, use in controls + * Custom selector list */ selector?: SettingOption[]; /** - * When selector item click, use in controls + * When selector item click */ onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void; };