0x2620/pandora
2
1
Fork 1
Code Issues 1.2k 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
commit 627a016515
2 changed files with 118 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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:')) {