x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-25 16:11:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

添加滑动设置

Browse Source
This commit is contained in:
Harvey Zack committed 2022-05-15 17:49:46 +08:00
1 parent 4c12972101
commit fc978e9d85
54 files changed
+462 -205
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-document/docs/en/Questions/How_to_add_setting_panel.mdx
+76
View File
@@ -181,3 +181,79 @@ var art = new Artplayer({
],
});
```
## Add range slider
| Property | Type | Description |
| --------- | ------------------- | ------------------------ |
| `html` | `String`、`Element` | DOM elements of selector |
| `icon` | `String`、`Element` | Icon of selector |
| `range` | `Array` | Range default state |
| `onRange` | `Function` | Range change event |
| `tooltip` | `String` | Tooltip text |
```js
const range = [5, 1, 10, 1];
const value = range[0];
const min = range[1];
const max = range[2];
const step = range[3];
```
<div className="run-code">▶ Run Code</div>
```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
settings: [
{
html: 'Range',
tooltip: '5x',
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
range: [5, 1, 10, 1],
onRange: function (item) {
// Change the tooltip
return item.range + 'x';
},
},
{
html: 'Use with selector',
width: 240,
selector: [
{
default: true,
html: 'Setting 01',
},
{
html: 'Setting 02',
},
{
html: 'Setting 03',
tooltip: '5x',
range: [5, 1, 10, 1],
onRange: function (item) {
return item.range + 'x';
},
},
{
html: 'Setting 04',
icon: '',
tooltip: '5x',
range: [5, 1, 10, 1],
onRange: function (item) {
return item.range + 'x';
},
},
],
onSelect: function (item) {
return item.html;
},
},
],
});
```
packages/artplayer-document/docs/zh-cn/Questions/How_to_add_setting_panel.mdx
+76 -2
View File
@@ -111,8 +111,6 @@ var art = new Artplayer({
## 添加切换按钮
设置面板类似于列表选择的集合，而且支持多层嵌套
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | --------------- |
| `html` | `String`、`Element` | 元素的 DOM 元素 |
@@ -183,3 +181,79 @@ var art = new Artplayer({
],
});
```
## 添加范围滑动
| 属性 | 类型 | 描述 |
| --------- | ------------------- | --------------- |
| `html` | `String`、`Element` | 元素的 DOM 元素 |
| `icon` | `String`、`Element` | 元素的图标 |
| `range` | `Array` | 默认状态数组 |
| `onRange` | `Function` | 滑块滑动事件 |
| `tooltip` | `String` | 提示文本 |
```js
const range = [5, 1, 10, 1];
const value = range[0];
const min = range[1];
const max = range[2];
const step = range[3];
```
<div className="run-code">▶ Run Code</div>
```js
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
setting: true,
flip: true,
playbackRate: true,
aspectRatio: true,
settings: [
{
html: '滑块',
tooltip: '5x',
icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
range: [5, 1, 10, 1],
onRange: function (item) {
// 改变提示文本
return item.range + 'x';
},
},
{
html: '和列表组合',
width: 200,
selector: [
{
default: true,
html: '设置 01',
},
{
html: '设置 02',
},
{
html: '设置 03',
tooltip: '5x',
range: [5, 1, 10, 1],
onRange: function (item) {
return item.range + 'x';
},
},
{
html: '设置 04',
icon: '',
tooltip: '5x',
range: [5, 1, 10, 1],
onRange: function (item) {
return item.range + 'x';
},
},
],
onSelect: function (item) {
return item.html;
},
},
],
});
```
packages/artplayer/src/scheme/index.js
+5 -1
View File
@@ -20,10 +20,14 @@ export const ComponentOption = {
style: `?${o}`,
click: `?${f}`,
mounted: `?${f}`,
tooltip: `?${s}`,
tooltip: `?${s}|${n}`,
width: `?${n}`,
selector: `?${a}`,
onSelect: `?${f}`,
switch: `?${b}`,
onSwitch: `?${f}`,
range: `?${a}`,
onRange: `?${f}`,
};
export default {
packages/artplayer/src/setting/index.js
+69 -37
View File
@@ -151,6 +151,7 @@ export default class Setting extends Component {
switch (type) {
case 'switch':
case 'range':
append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
break;
case 'selector':
@@ -242,6 +243,29 @@ export default class Setting extends Component {
});
break;
}
case 'range':
{
const $state = document.createElement('div');
addClass($state, 'art-setting-item-right-icon');
const $range = append($state, '<input type="range">');
$range.value = item.range[0] || 0;
$range.min = item.range[1] || 0;
$range.max = item.range[2] || 10;
$range.step = item.range[3] || 1;
addClass($range, 'art-setting-range');
append($right, $state);
item.$range = $range;
def(item, 'range', {
get() {
return $range.valueAsNumber;
},
set(value) {
$range.value = Number(value);
},
});
}
break;
case 'selector':
if (item.selector && item.selector.length) {
const $state = document.createElement('div');
@@ -254,47 +278,53 @@ export default class Setting extends Component {
break;
}
const event = proxy($item, 'click', async (event) => {
switch (type) {
case 'switch':
if (item.onSwitch) {
item.switch = await item.onSwitch.call(this.art, item, $item, event);
}
break;
case 'selector':
if (item.selector && item.selector.length) {
this.init(item.selector, item.width);
} else {
inverseClass($item, 'art-current');
if (item._parentList) {
this.init(item._parentList);
}
if (item._parentItem && item._parentItem.onSelect) {
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
if (item._parentItem.$tooltip && isStringOrNumber(result)) {
item._parentItem.$tooltip.innerHTML = result;
}
}
}
break;
default:
break;
}
});
this.events.push(event);
switch (type) {
case 'switch':
if (item.mounted) {
item.mounted.call(this.art, item, $item);
case 'switch': {
if (item.onSwitch) {
const event = proxy($item, 'click', async (event) => {
item.switch = await item.onSwitch.call(this.art, item, $item, event);
});
this.events.push(event);
}
break;
}
case 'range': {
if (item.onRange && item.$range) {
const event = proxy(item.$range, 'change', async (event) => {
item.tooltip = await item.onRange.call(this.art, item, $item, event);
});
this.events.push(event);
}
break;
}
case 'selector':
if (item.default) {
addClass($item, 'art-current');
{
const event = proxy($item, 'click', async (event) => {
if (item.selector && item.selector.length) {
this.init(item.selector, item.width);
} else {
inverseClass($item, 'art-current');
if (item._parentList) {
this.init(item._parentList);
}
if (item._parentItem && item._parentItem.onSelect) {
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
if (item._parentItem.$tooltip && isStringOrNumber(result)) {
item._parentItem.$tooltip.innerHTML = result;
}
}
}
});
this.events.push(event);
if (item.default) {
addClass($item, 'art-current');
}
}
break;
default:
@@ -327,6 +357,8 @@ export default class Setting extends Component {
const item = option[index];
if (has(item, 'switch')) {
append($panel, this.creatItem('switch', item));
} else if (has(item, 'range')) {
append($panel, this.creatItem('range', item));
} else {
append($panel, this.creatItem('selector', item));
}
packages/artplayer/src/style/setting.less
+8
View File
@@ -86,6 +86,14 @@
align-items: center;
height: 24px;
}
.art-setting-range {
height: 3px;
width: 80px;
outline: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.2);
}
}
}
packages/artplayer/types/artplayer.d.ts
Vendored
+10
View File
@@ -115,6 +115,16 @@ type SettingOption = {
* When switch item click
*/
onSwitch?(item: SettingOption, element: HTMLElement, event: Event): void;
/**
* Custom range item
*/
range?: number[];
/**
* When range item change
*/
onRange?(item: SettingOption, element: HTMLElement, event: Event): void;
};
type Component = {