0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

better mobile seek bar

Browse source
This commit is contained in:
j 2024-12-14 19:16:41 +00:00
parent ad2af2a257
commit 627a016515
2 changed files with 118 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
static/mobile/css/style.css
View file

@ -201,3 +201,75 @@ ol li {
width: 64px;
height: 64px;
}
.seekbar {
padding: 12px 22px;
position: relative;
width: 100%;
}
.fullscreen .seekbar {
padding: 28px 22px;
}
.seekbar-progress {
height: 10px;
border: solid 1px #B1B1B1;
}
.seekbar-progress [role="progressbar"] {
height: 100%;
position: relative;
background-color: #B1B1B180;
}
.seekbar-progress [role="progressbar"]:after {
content: " ";
display: block;
width: 14px;
height: 14px;
position: absolute;
top: -3px;
right: -7px;
border: 2px solid #B1B1B180;
background-color: #B1B1B180;
}
.seekbar input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: transparent;
outline: 0;
border: 0;
}
.seekbar input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
display: block;
width: 48px;
height: 48px;
background-color: transparent;
}
.seekbar input[type="range"]::-moz-range-thumb {
display: block;
width: 48px;
height: 48px;
background: transparent;
border: 0;
}
.seekbar input[type="range"]::-moz-range-track {
background: transparent;
border: 0;
}
.seekbar input[type="range"]::-moz-focus-outer {
border: 0;
}

78
static/mobile/js/VideoPlayer.js
View file

@ -153,9 +153,11 @@ window.VideoPlayer = function(options) {
${icon.mute}
</div>
<div class="position">
<div class="bar">
<div class="progress"></div>
<div class="seekbar">
<input type="range" value="0" min='0' max='100' step='.25' />
<div class="seekbar-progress">
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="38" style="width: 0%;"></div>
</div>
</div>
</div>
<div class="time">
@ -223,15 +225,28 @@ window.VideoPlayer = function(options) {
}
}
var showControls
function hideControlsLater() {
showControls = setTimeout(() => {
if (touching) {
hideControlsLater()
} else {
self.controls.style.opacity = that.paused ? '1' : '0'
showControls = null
}
}, 3000)
}
var toggleControls = event => {
if (event.target.tagName == "INPUT") {
if (showControls) {
clearTimeout(showControls)
}
return
}
if (self.controls.style.opacity == '0') {
event.preventDefault()
event.stopPropagation()
self.controls.style.opacity = '1'
showControls = setTimeout(() => {
self.controls.style.opacity = that.paused ? '1' : '0'
showControls = null
}, 3000)
hideControlsLater()
} else {
self.controls.style.opacity = '0'
}
@ -241,10 +256,7 @@ window.VideoPlayer = function(options) {
clearTimeout(showControls)
}
self.controls.style.opacity = '1'
showControls = setTimeout(() => {
self.controls.style.opacity = that.paused ? '1' : '0'
showControls = null
}, 3000)
hideControlsLater()
})
self.controls.addEventListener("mouseleave", event => {
if (showControls) {
@ -253,7 +265,13 @@ window.VideoPlayer = function(options) {
self.controls.style.opacity = that.paused ? '1' : '0'
showControls = null
})
self.controls.addEventListener("touchstart", event => {
touching = true
})
self.controls.addEventListener("touchstart", toggleControls)
self.controls.addEventListener("touchend", event => {
touching = false
})
self.controls.querySelector('.toggle').addEventListener("click", toggleVideo)
self.controls.querySelector('.volume').addEventListener("click", toggleSound)
self.controls.querySelector('.fullscreen-btn').addEventListener("click", toggleFullscreen)
@ -310,6 +328,7 @@ window.VideoPlayer = function(options) {
that.append(unblock)
})
var loading = true
var touching = false
that.brightness(0)
that.addEventListener("loadedmetadata", event => {
//
@ -331,34 +350,29 @@ window.VideoPlayer = function(options) {
}
})
var time = that.querySelector('.controls .time div'),
progress = that.querySelector('.controls .position .progress')
that.querySelector('.controls .position').addEventListener("click", event => {
var bar = event.target
while (bar && !bar.classList.contains('bar')) {
bar = bar.parentElement
}
if (bar && bar.classList.contains('bar')) {
event.preventDefault()
event.stopPropagation()
var rect = bar.getBoundingClientRect()
var x = event.clientX - rect.x
var percent = x / rect.width
var position = percent * self.options.duration
if (self.options.position) {
position += self.options.position
}
progress.style.width = (100 * percent) + '%'
that.currentTime(position)
}
var time = that.querySelector('.controls .time div');
const progressbar = that.querySelector('.seekbar div[role="progressbar"]');
function setProgressPosition(value) {
progressbar.style.width = value + '%';
progressbar.setAttribute('aria-valuenow', value);
}
that.querySelector('.controls .position input').addEventListener('input', function(event){
event.preventDefault()
event.stopPropagation()
setProgressPosition(this.value)
var position = this.value/100 * self.options.duration
that.currentTime(position)
hideControlsLater()
})
that.addEventListener("timeupdate", event => {
var currentTime = that.currentTime(),
duration = self.options.duration
if (self.options.position) {
currentTime -= self.options.position
}
progress.style.width = (100 * currentTime / duration) + '%'
setProgressPosition(100 * currentTime / duration)
duration = formatDuration(duration)
currentTime = formatDuration(currentTime)
while (duration && duration.startsWith('00:')) {