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

update

Browse Source
This commit is contained in:
Harvey authored and Harvey Zack committed 2022-02-11 11:20:54 +08:00
1 parent bc778a4d07
commit fc37573482
8 files changed
+153 -421
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/index.js
+7 -43
View File
@@ -1,7 +1,4 @@
import Component from '../utils/component';
import flip from './flip';
import rotate from './rotate';
import aspectRatio from './aspectRatio';
import playbackRate from './playbackRate';
export default class Setting extends Component {
@@ -12,51 +9,14 @@ export default class Setting extends Component {
const {
option,
template: { $setting, $settingBody },
events: { proxy },
template: { $setting },
} = art;
this.$parent = $settingBody;
this.$parent = $setting;
if (option.setting) {
art.once('ready', () => {
proxy($setting, 'click', (event) => {
if (event.target === $setting) {
this.show = false;
}
});
this.add(
flip({
disable: !option.flip,
name: 'flip',
}),
);
this.add(
rotate({
disable: !option.rotate,
name: 'rotate',
}),
);
this.add(
aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
}),
);
this.add(
playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
}),
);
for (let index = 0; index < option.settings.length; index++) {
this.add(option.settings[index]);
}
this.add(playbackRate(art));
});
art.on('blur', () => {
@@ -64,4 +24,8 @@ export default class Setting extends Component {
});
}
}
add(option) {
console.log(option);
}
}
packages/artplayer/src/setting/playbackRate.js
+24 -33
View File
@@ -1,37 +1,28 @@
import { query } from '../utils';
export default function playbackRate(art) {
const { i18n } = art;
export default function playbackRate(option) {
return (art) => {
const {
i18n,
events: { proxy },
} = art;
return {
...option,
html: `
<div class="art-setting-header">
${i18n.get('Play speed')}: <span class="art-subtitle-value">1.0</span>x
</div>
<div class="art-setting-range">
<input class="art-subtitle-range" value="1" type="range" min="0.5" max="2" step="0.25">
</div>
`,
mounted: ($setting) => {
const $range = query('.art-setting-range input', $setting);
const $value = query('.art-subtitle-value', $setting);
proxy($range, 'change', () => {
const { value } = $range;
$value.innerText = value;
art.playbackRate = Number(value);
});
art.on('playbackRate', (rate) => {
if (rate && $range.value !== rate) {
$range.value = rate;
$value.innerText = rate;
}
});
return {
html: i18n.get('Play speed'),
click: () => console.log(0),
items: [
{
html: '111',
click: () => console.log(1),
},
};
{
html: '222',
click: () => console.log(2),
items: [
{
html: '333',
click: () => console.log(3),
},
{
html: '444',
click: () => console.log(4),
},
],
},
],
};
}
packages/artplayer/src/style/setting.scss
+9 -111
View File
@@ -1,122 +1,20 @@
.art-video-player {
.art-settings {
display: flex;
align-items: center;
justify-content: center;
display: none;
position: absolute;
z-index: 90;
left: 0;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow: hidden;
.art-setting-inner {
position: absolute;
top: 0;
right: -300px;
bottom: 0;
width: 300px;
height: 100%;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.9);
transition: all 0.2s ease-in-out;
overflow: auto;
.art-setting-body {
overflow-y: auto;
width: 100%;
height: 100%;
.art-setting {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 15px;
.art-setting-header {
margin-bottom: 5px;
}
}
}
}
.art-setting-radio {
display: flex;
.art-radio-item {
flex: 1;
padding: 0 2px;
button {
height: 22px;
width: 100%;
border: none;
outline: none;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
&:active {
background-color: #00a1d6;
}
}
&.current button {
background-color: #00a1d6;
}
}
}
.art-setting-range {
input {
width: 100%;
height: 3px;
outline: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.5);
}
}
.art-setting-checkbox {
display: flex;
align-items: center;
input {
height: 14px;
width: 14px;
margin-right: 5px;
}
}
.art-setting-upload {
display: flex;
.art-upload-btn {
width: 80px;
height: 22px;
line-height: 22px;
border: none;
outline: none;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
text-align: center;
}
.art-upload-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 22px;
line-height: 22px;
padding-left: 10px;
}
}
right: 10px;
bottom: 60px;
width: 250px;
min-height: 100px;
max-height: 300px;
overflow: auto;
background-color: #000;
}
&.art-setting-show {
.art-settings {
opacity: 1;
visibility: visible;
pointer-events: auto;
.art-setting-inner {
right: 0;
}
display: flex;
}
}
}
packages/artplayer/src/template.js
+2 -8
View File
@@ -53,11 +53,7 @@ export default class Template {
<div class="art-notice">
<div class="art-notice-inner"></div>
</div>
<div class="art-settings">
<div class="art-setting-inner">
<div class="art-setting-body"></div>
</div>
</div>
<div class="art-settings"></div>
<div class="art-info">
<div class="art-info-panel">
<div class="art-info-item">
@@ -126,8 +122,6 @@ export default class Template {
this.$mask = this.query('.art-mask');
this.$state = this.query('.art-state');
this.$setting = this.query('.art-settings');
this.$settingInner = this.query('.art-setting-inner');
this.$settingBody = this.query('.art-setting-body');
this.$info = this.query('.art-info');
this.$infoPanel = this.query('.art-info-panel');
this.$infoClose = this.query('.art-info-close');
@@ -137,7 +131,7 @@ export default class Template {
this.$contextmenu = this.query('.art-contextmenus');
if (option.backdrop) {
addClass(this.$settingInner, 'art-backdrop-filter');
addClass(this.$setting, 'art-backdrop-filter');
addClass(this.$contextmenu, 'art-backdrop-filter');
addClass(this.$info, 'art-backdrop-filter');
}