Add progress preview in touch adjust

This commit is contained in:
the1812 2018-08-01 00:26:35 +08:00
parent 4a9235de33
commit 099c14e413
5 changed files with 33 additions and 10 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -22,6 +22,7 @@
background: #000;
background: #000A;
backdrop-filter: blur(30px);
position: relative;
}
.touch-video-info
{
@ -72,6 +73,19 @@
margin-right: 0.2em;
max-width: 5em;
}
.touch-progress
{
position: absolute;
bottom: 0;
left: 0;
background: $customStyleColor;
border-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 0%;
height: 4px;
transition: all 0.2s;
}
.videoshot
{
display: none;

View File

@ -337,6 +337,7 @@
$(".bilibili-player-video-subtitle").before(`<div class='touch-video-box-wrapper'>
<div class='touch-video-box'>
<div class='touch-video-info'></div>
<div class='touch-progress'></div>
</div>
</div>`);
const video = $("video");
@ -396,19 +397,24 @@
let info = `<div class='touch-row'><span class='touch-speed'>${speed}速</span><span class='touch-info'>进度: ${sec > 0 ? "+" : "-"}`;
const commonInfoPart = `</span></div><div class='touch-row'><div class='videoshot'></div><span class='touch-result'>`;
const finalTime = current + sec;
let percent = "0%";
if (finalTime > videoDuration)
{
info += `${secondsToTime(videoDuration - current)}${commonInfoPart}${secondsToHms(current)}${secondsToHms(videoDuration)} (100%)`;
percent = "100%";
info += `${secondsToTime(videoDuration - current)}${commonInfoPart}${secondsToHms(current)}${secondsToHms(videoDuration)} (${percent})`;
}
else if (finalTime < 0)
{
info += `${secondsToTime(current)}${commonInfoPart}${secondsToHms(current)}${secondsToHms(0)} (0%)`;
percent = "0%";
info += `${secondsToTime(current)}${commonInfoPart}${secondsToHms(current)}${secondsToHms(0)} (${percent})`;
}
else
{
info += `${secondsToTime(sec)}${commonInfoPart}${secondsToHms(current)}${secondsToHms(finalTime)} (${fixed(100 * finalTime / videoDuration)}%)`;
percent = fixed(100 * finalTime / videoDuration) + "%";
info += `${secondsToTime(sec)}${commonInfoPart}${secondsToHms(current)}${secondsToHms(finalTime)} (${percent}%)`;
}
text.innerHTML = info + `</span></div>`;
text.innerHTML = info + `</span></div><div class='touch-progress'></div>`;
$(".touch-progress").css("width", percent);
//$(".videoshot").css(videoshot.getStyle(finalTime));
};
};
@ -430,18 +436,21 @@
{
info += `${100 - originalVolume}${commonInfoPart}${originalVolume} → 100`;
setVolume(100);
$(".touch-progress").css("width", "100%");
}
else if (finalVolume < 0)
{
info += `${originalVolume}${commonInfoPart}${originalVolume} → 0`;
setVolume(0);
$(".touch-progress").css("width", "0%");
}
else
{
info += `${Math.abs(volume)}${commonInfoPart}${originalVolume}${finalVolume}`;
setVolume(finalVolume);
$(".touch-progress").css("width", finalVolume + "%");
}
text.innerHTML = info + `</span></div>`;
text.innerHTML = info + `</span></div><div class='touch-progress'></div>`;
};
};
swiper.action.lowVolumeUp = volumeChange("低");

File diff suppressed because one or more lines are too long