Korbs/zorn-js
1
Fork 0
Code Issues Pull requests Activity

Add files

Browse source
This commit is contained in:
Korbs 2023-10-16 15:53:54 -04:00
parent e9a3fa5fc2
commit a3c15adc94
No known key found for this signature in database
5 changed files with 479 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

215
src/functions/buttons.js Normal file
View file

@ -0,0 +1,215 @@
const video = document.querySelector('.plyx-player')
const videoContainer = document.querySelector('.video-container')
function AddControls() {
var add_controls = `
<div class="plyx-player-controls">
<div class="row-1">
<div class="row-1-start">
<button id="play-pause"><i class="fa-solid fa-play"></i></button>
<button id="skip-back"><i class="fa-solid fa-arrow-rotate-left"></i></button>
<button id="skip-forth"><i class="fa-solid fa-arrow-rotate-right"></i></button>
<input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01">
<div class="volume-controls">
<button data-title="Mute (m)" class="volume-button" id="volume-button"><i class="fa-solid fa-volume-high"></i></button>
</div>
</div>
<div class="row-1-end">
<div class="time">
<time id="time-elapsed">00:00</time>
<span> / </span>
<time id="duration">00:00</time>
</div>
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
</div>
</div>
<div class="row-2">
<div class="video-progress">
<progress id="progress-bar" value="0" min="0"></progress>
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
</div>
</div>
</div>
`
video.insertAdjacentHTML("afterend", add_controls);
}
function Util() {
const videoControls = document.querySelector('.plyx-player-controls')
// Play/Plause
const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')
Button_PlayPause.addEventListener('click', Toggle_PlayPause)
video.addEventListener('click', Toggle_PlayPause)
video.addEventListener('play', Update_PlayPauseButton)
video.addEventListener('pause', Update_PlayPauseButton)
function Toggle_PlayPause() {
if (video.paused || video.ended) {
video.play()
}
else {
video.pause()
}
}
function Update_PlayPauseButton() {
if (video.paused) {
Button_PlayPause.setAttribute('data-title', 'Play (k)')
Button_PlayPause.innerHTML = `<i class="fa-solid fa-play"></i>`
} else {
Button_PlayPause.setAttribute('data-title', 'Pause (k)')
Button_PlayPause.innerHTML = `<i class="fa-solid fa-pause"></i>`
}
}
// Fullscreen
const Button_Fullscreen = document.getElementById('fullscreen');
function Toggle_Fullscreen() {
if (document.fullscreenElement) {document.exitFullscreen()}
else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
else if (videoContainer.webkitRequestFullscreen) {videoContainer.webkitRequestFullscreen()}
else {videoContainer.requestFullscreen()}
}
Button_Fullscreen.onclick = Toggle_Fullscreen;
function Update_FullscreenButton() {
if (document.fullscreenElement) {
Button_Fullscreen.setAttribute('data-title', 'Exit full screen (f)')
Button_Fullscreen.innerHTML = `<i class="fa-solid fa-compress"></i>`
} else {
Button_Fullscreen.setAttribute('data-title', 'Full screen (f)')
Button_Fullscreen.innerHTML = `<i class="fa-solid fa-expand"></i>`
}
}
videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton);
// Skip Back or Forth
const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back')
const Button_SkipForth = document.querySelector('.plyx-player-controls #skip-forth')
Button_SkipBack.addEventListener('click', Toggle_SkipBack)
Button_SkipForth.addEventListener('click', Toggle_SkipForth)
function Toggle_SkipBack() {Skip(-10)}
function Toggle_SkipForth() {Skip(10)}
function Skip(value) {
video.currentTime += value;
}
// Volume (Also the slider)
const Button_Volume = document.getElementById('volume-button')
const volume = document.getElementById('volume')
function Update_Volme() {
if (video.muted) {
video.muted = false
}
video.volume = volume.value
}
volume.addEventListener('input', Update_Volme)
function Update_Volume_Icon() {
Button_Volume.setAttribute('data-title', 'Mute (m)')
if (video.muted || video.volume === 0) {
Button_Volume.innerHTML = `<i class="fa-solid fa-volume-slash"></i>`
Button_Volume.setAttribute('data-title', 'Unmute (m)')
} else if (video.volume > 0 && video.volume <= 0.5) {
Button_Volume.innerHTML = `<i class="fa-solid fa-volume-low"></i>`
} else {
Button_Volume.innerHTML = `<i class="fa-solid fa-volume-high"></i>`
}
}
video.addEventListener('volumechange', Update_Volume_Icon)
function Toggle_Mute() {
video.muted = !video.muted;
if (video.muted) {
volume.setAttribute('data-volume', volume.value)
volume.value = 0;
} else {
volume.value = volume.dataset.volume
}
}
Button_Volume.addEventListener('click', Toggle_Mute)
// Keyboard Shortcuts
function keyboardShortcuts(event) {
const { key } = event;
switch(key) {
case 'k':
Toggle_PlayPause();
if (video.paused) {
Show_Controls();
} else {
setTimeout(() => {
Hide_Controls();
}, 2000);
}
break;
case 'm':
Toggle_Mute();
break;
case 'f':
Toggle_Fullscreen();
break;
case 'j':
Toggle_SkipBack();
break;
case 'l':
Toggle_SkipForth();
break;
}
}
document.addEventListener('keyup', keyboardShortcuts);
// Auto Hide Controls
function Hide_Controls() {
if (video.paused) {
return
}
videoControls.classList.add('hide')
console.log('0')
}
// Show_Controls displays the video controls
function Show_Controls() {
videoControls.classList.remove('hide')
console.log('1')
}
video.addEventListener('mouseenter', Show_Controls)
video.addEventListener('mouseleave', Hide_Controls)
videoControls.addEventListener('mouseenter', Show_Controls)
videoControls.addEventListener('mouseleave', Hide_Controls)
var mouseTimer = null, cursorVisible = true
function disappearCursor() {
mouseTimer = null
document.body.style.cursor = "none"
cursorVisible = false
Hide_Controls()
}
document.onmousemove = function() {
if (mouseTimer) {
window.clearTimeout(mouseTimer);
Show_Controls();
}
if (!cursorVisible) {
document.body.style.cursor = "default"
cursorVisible = true
}
mouseTimer = window.setTimeout(disappearCursor, 1500)
}
}
export {AddControls, Util}

75
src/functions/length.js Normal file
View file

@ -0,0 +1,75 @@
const video = document.querySelector('.plyx-player')
function VideoLength() {
// Duration and Length of Video
const timeElapsed = document.getElementById('time-elapsed');
const duration = document.getElementById('duration');
function formatTime(timeInSeconds) {
const result = new Date(timeInSeconds * 1000).toISOString().substr(11, 8);
return {
minutes: result.substr(3, 2),
seconds: result.substr(6, 2),
};
};
function initializeVideo() {
const videoDuration = Math.round(video.duration);
const time = formatTime(videoDuration);
duration.innerText = `${time.minutes}:${time.seconds}`;
duration.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`);
}
video.addEventListener('loadedmetadata', initializeVideo);
function updateTimeElapsed() {
const time = formatTime(Math.round(video.currentTime));
timeElapsed.innerText = `${time.minutes}:${time.seconds}`;
timeElapsed.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`);
}
video.addEventListener('timeupdate', updateTimeElapsed);
// Progress Bar
const progressBar = document.getElementById('progress-bar');
const seek = document.getElementById('seek');
function initializeVideo() {
const videoDuration = Math.round(video.duration);
seek.setAttribute('max', videoDuration);
progressBar.setAttribute('max', videoDuration);
const time = formatTime(videoDuration);
duration.innerText = `${time.minutes}:${time.seconds}`;
duration.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`)
}
function updateProgress() {
seek.value = Math.floor(video.currentTime);
progressBar.value = Math.floor(video.currentTime);
}
video.addEventListener('timeupdate', updateProgress);
const seekTooltip = document.getElementById('seek-tooltip');
function updateSeekTooltip(event) {
const skipTo = Math.round((event.offsetX / event.target.clientWidth) * parseInt(event.target.getAttribute('max'), 10));
seek.setAttribute('data-seek', skipTo)
const t = formatTime(skipTo);
seekTooltip.textContent = `${t.minutes}:${t.seconds}`;
const rect = video.getBoundingClientRect();
seekTooltip.style.left = `${event.pageX - rect.left}px`;
}
seek.addEventListener('mousemove', updateSeekTooltip);
function skipAhead(event) {
const skipTo = event.target.dataset.seek ? event.target.dataset.seek : event.target.value;
video.currentTime = skipTo;
progressBar.value = skipTo;
seek.value = skipTo;
}
seek.addEventListener('input', skipAhead);
initializeVideo()
}
export {VideoLength}

0
src/functions/progress-bar.js Normal file
View file