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

update setting

Browse Source
This commit is contained in:
zhw2590582 committed 2022-02-11 20:23:27 +08:00
1 parent 81ba45adf9
commit 1de2d2aaed
12 files changed
+177 -153
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.md
+11 -10
View File
@@ -5,14 +5,15 @@ sidebar_position: 6
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 |
| 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 |
| `description` | `String` | Description Text |
<div className="run-code">▶ Run Code</div>
@@ -42,7 +43,7 @@ var art = new Artplayer({
onSelect: function onSubtitleSelect(item, $dom) {
console.info(item, $dom);
art.subtitle.url = item.url;
}
},
},
{
html: 'Select Quality',
@@ -96,4 +97,4 @@ var art = new Artplayer({
},
],
});
```
```
packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md
+11 -10
View File
@@ -5,14 +5,15 @@ sidebar_position: 6
设置面板类似于列表选择的集合，而且支持多层嵌套
| 属性 | 类型 | 描述 |
| ---------- | ------------------- | --------------- |
| `html` | `String`、`Element` | 元素的 DOM 元素 |
| `icon` | `String`、`Element` | 元素的图标 |
| `selector` | `Array` | 元素列表 |
| `onSelect` | `Function` | 元素点击事件 |
| `width` | `Number` | 列表宽度 |
| `default` | `Boolean` | 是否默认选中 |
| 属性 | 类型 | 描述 |
| ------------- | ------------------- | --------------- |
| `html` | `String`、`Element` | 元素的 DOM 元素 |
| `icon` | `String`、`Element` | 元素的图标 |
| `selector` | `Array` | 元素列表 |
| `onSelect` | `Function` | 元素点击事件 |
| `width` | `Number` | 列表宽度 |
| `default` | `Boolean` | 是否默认选中 |
| `description` | `String` | 描述文案 |
<div className="run-code">▶ Run Code</div>
@@ -42,7 +43,7 @@ var art = new Artplayer({
onSelect: function onSubtitleSelect(item, $dom) {
console.info(item, $dom);
art.subtitle.url = item.url;
}
},
},
{
html: '选择画质',
@@ -96,4 +97,4 @@ var art = new Artplayer({
},
],
});
```
```
packages/artplayer/src/setting/aspectRatio.js
+6 -5
View File
@@ -7,8 +7,8 @@ export default function aspectRatio(art) {
return value === 'default' ? i18n.get('Default') : value;
}
function update($panel, $desc, value) {
if ($desc) $desc.innerText = getI18n(value);
function update($panel, $description, value) {
if ($description) $description.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
if ($current) inverseClass($current, 'art-current');
}
@@ -17,7 +17,7 @@ export default function aspectRatio(art) {
width: 200,
html: i18n.get('Aspect Ratio'),
icon: icons.aspectRatio,
desc: getI18n(art.aspectRatio),
description: getI18n(art.aspectRatio),
selector: ['default', '4:3', '16:9'].map((item) => {
return {
value: item,
@@ -27,11 +27,12 @@ export default function aspectRatio(art) {
}),
onSelect(item) {
art.aspectRatio = item.value;
return getI18n(item.value);
},
mounted: ($panel, item) => {
update($panel, item.$desc, art.aspectRatio);
update($panel, item._$description, art.aspectRatio);
art.on('aspectRatio', () => {
update($panel, item.$desc, art.aspectRatio);
update($panel, item._$description, art.aspectRatio);
});
},
};
packages/artplayer/src/setting/flip.js
+6 -5
View File
@@ -9,8 +9,8 @@ export default function flip(art) {
vertical: 'Vertical',
};
function update($panel, $desc, value) {
if ($desc) $desc.innerText = i18n.get(keys[value]);
function update($panel, $description, value) {
if ($description) $description.innerText = i18n.get(keys[value]);
const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
if ($current) inverseClass($current, 'art-current');
}
@@ -18,7 +18,7 @@ export default function flip(art) {
return {
width: 200,
html: i18n.get('Video Flip'),
desc: i18n.get(keys[art.flip]),
description: i18n.get(keys[art.flip]),
icon: icons.config,
selector: Object.keys(keys).map((item) => {
return {
@@ -29,11 +29,12 @@ export default function flip(art) {
}),
onSelect(item) {
art.flip = item.value;
return i18n.get(keys[item.value]);
},
mounted: ($panel, item) => {
update($panel, item.$desc, art.flip);
update($panel, item._$description, art.flip);
art.on('flip', () => {
update($panel, item.$desc, art.flip);
update($panel, item._$description, art.flip);
});
},
};
packages/artplayer/src/setting/index.js
+12 -7
View File
@@ -133,13 +133,13 @@ export default class Setting extends Component {
append($left, item.html);
if (hasChildren) {
const $desc = document.createElement('div');
addClass($desc, 'art-setting-item-right-desc');
append($right, $desc);
item.$desc = $desc;
const $description = document.createElement('div');
addClass($description, 'art-setting-item-right-description');
append($right, $description);
item._$description = $description;
if (item.desc) {
$desc.innerText = item.desc;
if (item.description) {
$description.innerHTML = item.description;
}
const $iconRight = document.createElement('div');
@@ -159,7 +159,12 @@ export default class Setting extends Component {
}
if (item._parentItem && item._parentItem.onSelect) {
item._parentItem.onSelect.call(this.art, item, $item, event);
const result = item._parentItem.onSelect.call(this.art, item, $item, event);
if (item._parentItem._$description) {
if (typeof result === 'string' || typeof result === 'number') {
item._parentItem._$description.innerHTML = result;
}
}
}
}
});
packages/artplayer/src/setting/playbackRate.js
+6 -5
View File
@@ -7,8 +7,8 @@ export default function playbackRate(art) {
return value === 1.0 ? i18n.get('Normal') : value;
}
function update($panel, $desc, value) {
if ($desc) $desc.innerText = getI18n(value);
function update($panel, $description, value) {
if ($description) $description.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $panel).find((item) => Number(item.dataset.value) === value);
if ($current) inverseClass($current, 'art-current');
}
@@ -16,7 +16,7 @@ export default function playbackRate(art) {
return {
width: 200,
html: i18n.get('Play Speed'),
desc: getI18n(art.playbackRate),
description: getI18n(art.playbackRate),
icon: icons.playbackRate,
selector: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0].map((item) => {
return {
@@ -27,11 +27,12 @@ export default function playbackRate(art) {
}),
onSelect(item) {
art.playbackRate = item.value;
return getI18n(item.value);
},
mounted: ($panel, item) => {
update($panel, item.$desc, art.playbackRate);
update($panel, item._$description, art.playbackRate);
art.on('playbackRate', () => {
update($panel, item.$desc, art.playbackRate);
update($panel, item._$description, art.playbackRate);
});
},
};
packages/artplayer/src/setting/subtitleOffset.js
+6 -5
View File
@@ -7,8 +7,8 @@ export default function subtitleOffset(art) {
return value === 0 ? i18n.get('Normal') : value;
}
function update($panel, $desc, value) {
if ($desc) $desc.innerText = getI18n(value);
function update($panel, $description, value) {
if ($description) $description.innerText = getI18n(value);
const $current = queryAll('.art-setting-item', $panel).find((item) => Number(item.dataset.value) === value);
if ($current) inverseClass($current, 'art-current');
}
@@ -16,7 +16,7 @@ export default function subtitleOffset(art) {
return {
width: 200,
html: i18n.get('Subtitle Offset'),
desc: getI18n(art.subtitleOffset),
description: getI18n(art.subtitleOffset),
icon: icons.subtitle,
selector: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
return {
@@ -27,11 +27,12 @@ export default function subtitleOffset(art) {
}),
onSelect(item) {
art.subtitleOffset = item.value;
return getI18n(item.value);
},
mounted: ($panel, item) => {
update($panel, item.$desc, art.subtitleOffset);
update($panel, item._$description, art.subtitleOffset);
art.on('subtitleOffset', () => {
update($panel, item.$desc, art.subtitleOffset);
update($panel, item._$description, art.subtitleOffset);
});
},
};
packages/artplayer/src/style/setting.scss
+2 -1
View File
@@ -72,8 +72,9 @@
display: flex;
align-items: center;
.art-setting-item-right-desc {
.art-setting-item-right-description {
font-size: 12px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.5);
}
packages/artplayer/src/utils/component.js
+1 -1
View File
@@ -133,7 +133,7 @@ export default class Component {
$value.innerText = $item.innerText;
if (option.onSelect) {
const result = option.onSelect.call(this.art, find, $item, event);
if (typeof result === 'string') {
if (typeof result === 'string' || typeof result === 'number') {
$value.innerHTML = result;
}
}