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 ### Firefox
- 背景模糊效果无效, 详见[Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765). - 背景模糊效果无效, 详见[Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765).
- 触摸调整的进度预览有弹跳现象.(源自CSS `transition`. 短时间内总是从原数值开始变化, 而不是当前数值)
### Safari ### Safari
- 尚未在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-origin: left;
transform: scaleX(0); transform: scaleX(0);
height: 4px; height: 4px;
transition: all 0.2s;
} }
.touch-row-item .touch-row-item
{ {
flex: 1 0 0; flex: 1 0 0;
display: flex; display: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
@ -117,6 +116,16 @@
{ {
transform: rotateX(0deg) rotateY(0deg) scale(1); 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-bottom,
.disable-original-hover .bilibili-player-video-control-mask .disable-original-hover .bilibili-player-video-control-mask

View File

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