mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-21 12:41:20 -08:00
调整设置样式
This commit is contained in:
zhw2590582 committed
1 parent
c323cea07a
commit
c89f99f8a3
7 files changed
+73
-91
No files matched your search
@@ -1,21 +1,9 @@
|
||||
function i18nMix(i18n) {
|
||||
i18n.update({
|
||||
'zh-cn': {
|
||||
'Subtitle offset time': '字幕偏移时间',
|
||||
'No subtitles found': '未发现字幕',
|
||||
},
|
||||
'zh-tw': {
|
||||
'Subtitle offset time': '字幕偏移時間',
|
||||
'No subtitles found': '未發現字幕',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function settingMix(art) {
|
||||
const {
|
||||
i18n,
|
||||
events: { proxy },
|
||||
} = art;
|
||||
|
||||
return {
|
||||
title: 'Subtitle',
|
||||
name: 'subtitle',
|
||||
@@ -24,15 +12,8 @@ function settingMix(art) {
|
||||
<div class="art-setting-header">
|
||||
${i18n.get('Subtitle offset time')}: <span class="art-subtitle-value">0</span>s
|
||||
</div>
|
||||
<div class="art-setting-body">
|
||||
<input
|
||||
style="width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;"
|
||||
class="art-subtitle-range"
|
||||
type="range"
|
||||
min="-5"
|
||||
max="5"
|
||||
step="0.5"
|
||||
>
|
||||
<div class="art-setting-range">
|
||||
<input class="art-subtitle-range" type="range" min="-5" max="5" step="0.5">
|
||||
</div>
|
||||
`,
|
||||
mounted: $setting => {
|
||||
@@ -62,9 +43,19 @@ function settingMix(art) {
|
||||
export default function subtitle(art) {
|
||||
const { clamp } = art.constructor.utils;
|
||||
const { setting, notice, template, i18n } = art;
|
||||
i18nMix(i18n);
|
||||
setting.add(settingMix);
|
||||
|
||||
i18n.update({
|
||||
'zh-cn': {
|
||||
'Subtitle offset time': '字幕偏移时间',
|
||||
'No subtitles found': '未发现字幕',
|
||||
},
|
||||
'zh-tw': {
|
||||
'Subtitle offset time': '字幕偏移時間',
|
||||
'No subtitles found': '未發現字幕',
|
||||
},
|
||||
});
|
||||
|
||||
setting.add(settingMix);
|
||||
let cuesCache = [];
|
||||
art.on('subtitle:switch', () => {
|
||||
cuesCache = [];
|
||||
|
||||
@@ -7,31 +7,28 @@ export default function flip(settingOption) {
|
||||
...settingOption,
|
||||
html: `
|
||||
<div class="art-setting-header">${i18n.get('Flip')}</div>
|
||||
<div class="art-setting-body">
|
||||
<div class="art-setting-btns">
|
||||
<div class="art-setting-btn current">
|
||||
<span data-flip="normal">${i18n.get('Normal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="horizontal">${i18n.get('Horizontal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="vertical">${i18n.get('Vertical')}</span>
|
||||
</div>
|
||||
<div class="art-setting-radio">
|
||||
<div class="art-radio-item current">
|
||||
<button type="button" data-value="normal">${i18n.get('Normal')}</button>
|
||||
</div>
|
||||
<div class="art-radio-item">
|
||||
<button type="button" data-value="horizontal">${i18n.get('Horizontal')}</button>
|
||||
</div>
|
||||
<div class="art-radio-item">
|
||||
<button type="button" data-value="vertical">${i18n.get('Vertical')}</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
click: event => {
|
||||
const { target } = event;
|
||||
const { flip } = target.dataset;
|
||||
if (flip) {
|
||||
player.flip(flip);
|
||||
const { value } = event.target.dataset;
|
||||
if (value) {
|
||||
player.flip(value);
|
||||
}
|
||||
},
|
||||
mounted: $setting => {
|
||||
art.on('flipChange', flip => {
|
||||
const $current = Array.from($setting.querySelectorAll('span')).find(
|
||||
item => item.dataset.flip === flip,
|
||||
const $current = Array.from($setting.querySelectorAll('button')).find(
|
||||
item => item.dataset.value === flip,
|
||||
);
|
||||
inverseClass($current.parentElement, 'current');
|
||||
});
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
transition: all .2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
overflow: hidden;
|
||||
.artplayer-setting-body {
|
||||
overflow-y: auto;
|
||||
@@ -32,42 +32,41 @@
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 12px 20px 12px 20px;
|
||||
.art-setting-header {
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.art-setting-body {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-setting-btns {
|
||||
.art-setting-radio {
|
||||
display: flex;
|
||||
margin-left: -4px;
|
||||
margin-right: -4px;
|
||||
.art-setting-btn {
|
||||
.art-radio-item {
|
||||
flex: 1;
|
||||
padding: 0 4px;
|
||||
span {
|
||||
display: block;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
padding: 0 2px;
|
||||
button {
|
||||
height: 22px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover,
|
||||
&.current {
|
||||
span {
|
||||
color: #fff;
|
||||
background: #00a1d6;
|
||||
}
|
||||
&.current button {
|
||||
background: #00a1d6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-setting-range {
|
||||
input {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.artplayer-setting-show {
|
||||
|
||||
Reference in new issue
Block a user