This commit is contained in:
the1812 2019-07-05 12:04:04 +08:00
parent e581fe2fbc
commit 6ec78f526e
7 changed files with 51 additions and 62 deletions

View File

@ -377,7 +377,6 @@
### Firefox
- 背景模糊效果无效, 详见[Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765).
- 触摸调整的进度预览有弹跳现象.(源自CSS `transition`. 短时间内总是从原数值开始变化, 而不是当前数值)
### Safari
- 尚未在Safari中测试.(流下了贫穷的泪水

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -86,12 +86,11 @@
transform-origin: left;
transform: scaleX(0);
height: 4px;
transition: all 0.2s;
}
.touch-row-item
{
flex: 1 0 0;
display: flex;
display: none;
align-items: center;
justify-content: center;
}
@ -117,6 +116,16 @@
{
transform: rotateX(0deg) rotateY(0deg) scale(1);
}
.touch-video-info.speed .touch-row-item
{
display: flex;
}
.touch-video-info.cancel .touch-progress,
.touch-video-info.cancel .touch-result
{
opacity: 0;
}
.disable-original-hover .bilibili-player-video-control-bottom,
.disable-original-hover .bilibili-player-video-control-mask

View File

@ -290,7 +290,24 @@ function setupTouchPlayer (player) {
$('.bilibili-player-video-subtitle').before(/* html */`
<div class='touch-video-box-wrapper'>
<div class='touch-video-box adjust-closed'>
<div class='touch-video-info'></div>
<div class='touch-video-info'>
<div class='touch-row'>
<div class='touch-row-item'>
<span class='touch-speed'></span>
</div>
<div class='touch-row-item-wide'>
<span class='touch-info'></span>
</div>
</div>
<div class='touch-row'>
<div class='videoshot-wrapper touch-row-item'>
<div class='videoshot'></div>
</div>
<div class='touch-row-item-wide'>
<span class='touch-result'></span>
</div>
</div>
</div>
<div class='touch-progress'></div>
</div>
</div>`)
@ -332,9 +349,9 @@ function setupTouchPlayer (player) {
box.classList.add('animation')
}
swiper.action.onActionStart = () => {
swiper.action.onActionStart = direction => {
box.classList.add('adjust-opened')
text.innerHTML = ''
text.classList[direction === 'vertical' ? 'remove' : 'add']('speed')
originalVolume = Math.round(video.prop('volume') * 100)
const filter = video.css('filter').match(/brightness\((.+)\)/)
originalBrightness = Math.trunc((filter ? filter[1] : 1) * 100)
@ -357,25 +374,10 @@ function setupTouchPlayer (player) {
change = current
}
const result = `${secondsToHms(current)} (${currentPercent}%)<br>👇<br>${secondsToHms(finalTime)} (${finalPercent}%)`
const html = /* html */`
<div class='touch-row'>
<div class='touch-row-item'>
<span class='touch-speed'>${speed}</span>
</div>
<div class='touch-row-item-wide'>
<span class='touch-info'>进度: ${sec > 0 ? '+' : '-'}${secondsToTime(change)}</span>
</div>
</div>
<div class='touch-row'>
<div class='videoshot-wrapper touch-row-item'>
<div class='videoshot'></div>
</div>
<div class='touch-row-item-wide'>
<span class='touch-result'>${result}</span>
</div>
</div>
`
text.innerHTML = html
text.classList.remove('cancel')
text.querySelector('.touch-speed').innerHTML = `${speed}`
text.querySelector('.touch-info').innerHTML = `进度: ${sec > 0 ? '+' : '-'}${secondsToTime(change)}`
text.querySelector('.touch-result').innerHTML = result
videoshot.getVideoshot(finalTime, style => $('.videoshot').css(style))
$('.touch-progress').css('transform', `scaleX(${finalPercent / 100})`)
}
@ -399,19 +401,9 @@ function setupTouchPlayer (player) {
}
const result = `${originalVolume} 👉 ${finalVolume}`
setVolume(finalVolume)
const html = /* html */`
<div class='touch-row'>
<div class='touch-row-item-wide'>
<span class='touch-info'>音量: ${volume > 0 ? '+' : '-'}${change}</span>
</div>
</div>
<div class='touch-row'>
<div class='touch-row-item'>
<span class='touch-result'>${result}</span>
</div>
</div>
`
text.innerHTML = html
text.classList.remove('cancel')
text.querySelector('.touch-info').innerHTML = `音量: ${volume > 0 ? '+' : '-'}${change}`
text.querySelector('.touch-result').innerHTML = result
$('.touch-progress').css('transform', `scaleX(${finalVolume / 100})`)
}
swiper.action.volumeUp = volumeChange
@ -430,31 +422,20 @@ function setupTouchPlayer (player) {
const result = `${originalBrightness} 👉 ${finalBrightness}`
console.log(brightness, originalBrightness, finalBrightness)
video.css('filter', `brightness(${finalBrightness / 100})`)
const html = /* html */`
<div class='touch-row'>
<div class='touch-row-item-wide'>
<span class='touch-info'>亮度: ${brightness > 0 ? '+' : '-'}${change}</span>
</div>
</div>
<div class='touch-row'>
<div class='touch-row-item'>
<span class='touch-result'>${result}</span>
</div>
</div>
`
text.innerHTML = html
text.classList.remove('cancel')
text.querySelector('.touch-info').innerHTML = `亮度: ${brightness > 0 ? '+' : '-'}${change}`
text.querySelector('.touch-result').innerHTML = result
$('.touch-progress').css('transform', `scaleX(${finalBrightness / 100})`)
}
swiper.action.brightnessUp = brightnessChange
swiper.action.brightnessDown = brightnessChange
swiper.action.speedCancel = () => {
text.innerHTML = `取消时间调整`
$('.touch-progress').css('transform', 'scaleX(0)')
text.querySelector('.touch-info').innerHTML = `取消时间调整`
text.classList.add('cancel')
}
if (!unsafeWindow.TOUCH_PLAYER_DEBUG) {
swiper.action.onActionEnd = action => {
text.innerHTML = ''
if (action) {
if (action.type === 'playback') {
let time = video.prop('currentTime')