0x2620/phantasmobile
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

merge fixes from pandora

Browse source
This commit is contained in:
j 2025-01-30 08:56:34 +05:30
commit fcf7c24c23
7 changed files with 154 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

103
app/static/js/VideoPlayer.js
View file

@ -10,6 +10,7 @@ window.VideoPlayer = function(options) {
loop: false,
muted: false,
playbackRate: 1,
"in": 0,
position: 0,
volume: 1
}
@ -74,7 +75,6 @@ window.VideoPlayer = function(options) {
height: 32px;
}
.mx-controls .controls .position {
cursor: pointer;
flex: 1;
}
.mx-controls .toggle svg {
@ -154,9 +154,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">
@ -224,15 +226,31 @@ window.VideoPlayer = function(options) {
}
}
var showControls
function hideControlsLater() {
if (showControls) {
clearTimeout(showControls)
}
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'
}
@ -242,10 +260,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) {
@ -254,7 +269,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)
@ -311,6 +332,7 @@ window.VideoPlayer = function(options) {
that.append(unblock)
})
var loading = true
var touching = false
that.brightness(0)
that.addEventListener("loadedmetadata", event => {
//
@ -332,45 +354,40 @@ 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
if (bar && bar.classList.contains('position')) {
bar = bar.querySelector('.bar')
}
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', event => {
event.preventDefault()
event.stopPropagation()
setProgressPosition(event.target.value)
var position = event.target.value/100 * self.options.duration
displayTime(position)
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) + '%'
duration = formatDuration(duration)
function displayTime(currentTime) {
duration = formatDuration(self.options.duration)
currentTime = formatDuration(currentTime)
while (duration && duration.startsWith('00:')) {
duration = duration.slice(3)
}
currentTime = currentTime.slice(currentTime.length - duration.length)
time.innerText = `${currentTime} / ${duration}`
}
that.addEventListener("timeupdate", event => {
var currentTime = that.currentTime(),
duration = self.options.duration
if (self.options.position) {
currentTime -= self.options.position
}
setProgressPosition(100 * currentTime / duration)
displayTime(currentTime)
})
that.addEventListener("play", event => {