mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 02:01:20 -08:00
update
This commit is contained in:
Harvey authored and Harvey Zack committed
1 parent
8e9ff63493
commit
548334eb0b
6 files changed
+81
-149
No files matched your search
@@ -14,7 +14,7 @@ export default function playbackRateMix(art) {
|
||||
set(rate) {
|
||||
if (rate) {
|
||||
if (rate === $player.dataset.playbackRate) return;
|
||||
const rateList = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
|
||||
const rateList = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
|
||||
errorHandle(rateList.includes(rate), `'playbackRate' only accept ${rateList.toString()} as parameters`);
|
||||
$video.playbackRate = rate;
|
||||
$player.dataset.playbackRate = rate;
|
||||
|
||||
@@ -2,6 +2,24 @@ import Component from '../utils/component';
|
||||
import { append, addClass, setStyle, inverseClass } from '../utils/dom';
|
||||
import playbackRate from './playbackRate';
|
||||
|
||||
function makeRecursion(option) {
|
||||
if (!option) return option;
|
||||
for (let index = 0; index < option.length; index++) {
|
||||
const item = option[index];
|
||||
if (!item.goBack) {
|
||||
if (item.items) {
|
||||
item.items.unshift({
|
||||
html: item.html,
|
||||
items: option,
|
||||
goBack: true,
|
||||
});
|
||||
}
|
||||
makeRecursion(item.items);
|
||||
}
|
||||
}
|
||||
return option;
|
||||
}
|
||||
|
||||
export default class Setting extends Component {
|
||||
constructor(art) {
|
||||
super(art);
|
||||
@@ -17,7 +35,7 @@ export default class Setting extends Component {
|
||||
this.events = [];
|
||||
|
||||
if (option.setting) {
|
||||
this.option = this.makeRecursion([playbackRate(art), playbackRate(art), playbackRate(art)]);
|
||||
this.option = makeRecursion([playbackRate(art), playbackRate(art), playbackRate(art)]);
|
||||
|
||||
art.once('ready', () => {
|
||||
this.init(this.option);
|
||||
@@ -47,7 +65,11 @@ export default class Setting extends Component {
|
||||
append($left, icons.arrowLeft);
|
||||
addClass($item, 'art-setting-item-back');
|
||||
} else {
|
||||
append($left, icons.check);
|
||||
if (hasItems) {
|
||||
append($left, '<i class="art-icon"></i>');
|
||||
} else {
|
||||
append($left, icons.check);
|
||||
}
|
||||
}
|
||||
|
||||
append($left, item.html);
|
||||
@@ -83,29 +105,9 @@ export default class Setting extends Component {
|
||||
return $item;
|
||||
}
|
||||
|
||||
makeRecursion(option) {
|
||||
if (!option) return option;
|
||||
|
||||
for (let index = 0; index < option.length; index++) {
|
||||
const item = option[index];
|
||||
if (!item.goBack) {
|
||||
if (item.items) {
|
||||
item.items.unshift({
|
||||
html: item.html,
|
||||
items: option,
|
||||
goBack: true,
|
||||
});
|
||||
}
|
||||
this.makeRecursion(item.items);
|
||||
}
|
||||
}
|
||||
|
||||
return option;
|
||||
}
|
||||
|
||||
add(item) {
|
||||
this.option.push(item);
|
||||
this.option = this.makeRecursion(this.option);
|
||||
this.option = makeRecursion(this.option);
|
||||
this.init(this.option);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,45 +1,15 @@
|
||||
export default function playbackRate(art) {
|
||||
const { i18n } = art;
|
||||
|
||||
return {
|
||||
width: 150,
|
||||
html: i18n.get('Play speed'),
|
||||
click: () => console.log(0),
|
||||
items: [
|
||||
{
|
||||
html: '111',
|
||||
click: () => console.log(1),
|
||||
},
|
||||
{
|
||||
width: 150,
|
||||
html: '222',
|
||||
click: () => console.log(2),
|
||||
items: [
|
||||
{
|
||||
html: '333',
|
||||
click: () => console.log(3),
|
||||
},
|
||||
{
|
||||
html: '444',
|
||||
click: () => console.log(4),
|
||||
},
|
||||
{
|
||||
html: '333',
|
||||
click: () => console.log(3),
|
||||
},
|
||||
{
|
||||
html: '444',
|
||||
click: () => console.log(4),
|
||||
},
|
||||
{
|
||||
html: '333',
|
||||
click: () => console.log(3),
|
||||
},
|
||||
{
|
||||
html: '444',
|
||||
click: () => console.log(4),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
items: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
|
||||
return {
|
||||
html: item === 1.0 ? i18n.get('Normal') : item,
|
||||
click() {
|
||||
art.playbackRate = item;
|
||||
},
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
@@ -1,28 +1,30 @@
|
||||
.art-video-player {
|
||||
.art-settings {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
right: 10px;
|
||||
bottom: 50px;
|
||||
width: 200px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
max-height: 300px;
|
||||
transition: all 0.2s ease;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
transition: all 0.1s ease;
|
||||
|
||||
.art-setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
padding: 0 5px 0 0;
|
||||
padding: 0 5px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
&:hover {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@@ -34,14 +36,8 @@
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.art-icon-arrowLeft {
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.art-icon-check {
|
||||
visibility: hidden;
|
||||
width: 35px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
@@ -52,13 +48,11 @@
|
||||
.art-setting-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.art-setting-item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +63,7 @@
|
||||
|
||||
&.art-setting-show {
|
||||
.art-settings {
|
||||
display: flex;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user