boris/phpstorm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

backup

Browse Source
This commit is contained in:
boris
2025-02-06 12:28:24 +00:00
parent 2238305d65
commit f30a8fe711
133 changed files with 1262 additions and 8255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
js_workshop8/SampleVideo.mp4 Normal file
View File

Binary file not shown.

42
js_workshop8/index.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-Calc</title>
<link href="favicon.ico" rel="icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
</head>
<body class="d-flex bg-secondary-subtle justify-content-center">
<div id="playerContainer" class="p-0 container border rounded bg-white d-flex flex-column">
<video id="video" class="img-fluid shadow">
<source src="SampleVideo.mp4" type="video/mp4">
<p>This video is not supported in your browser</p>
</video>
<div id="trackBar" class="bg-primary"></div>
<div id="buttonContainer" class="container-fluid align-items-center d-flex gap-2">
<button id="pauseplay" class="btn"></button>
<div id="leftAlign" class="align-items-center ms-auto d-flex gap-3">
<div id="durationWrapper" class="align-items-center d-flex gap-1">
<p class="m-auto" id="durationElapsed"></p>
<p class="m-auto">|</p>
<p class="m-auto" id="durationTotal"></p>
</div>
<div id="volWrapper" class="align-items-center d-flex flex-row gap-2">
<label id="volIco" for="volBar"></label>
<input type="range" id="volBar" class="form-range w-100">
</div>
<button id="fullscreen" class="btn"></button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
<script src="index.js"></script>
</body>
<footer class="bg-dark-subtle fixed-bottom">
<div class="d-flex flex-row justify-content-center pt-3">
<p>Made by George Wilkinson @ 2025. Powered by Bootstrap and JS.</p>
</div>
</footer>
</html>

75
js_workshop8/index.js Normal file
View File

@@ -0,0 +1,75 @@
class VideoPlayer {
constructor( video ) {
this.fullscreenStatus = false;
this.video = document.getElementById("video");
this.playerContainer = document.getElementById("playerContainer");
this.pausePlayBtn = document.getElementById("pauseplay");
this.volBar = document.getElementById("volBar");
this.volIco = document.getElementById('volIco')
this.fullscreenBtn = document.getElementById('fullscreen');
this.elapsed = document.getElementById('durationElapsed');
this.total = document.getElementById('durationTotal');
this.trackBar = document.getElementById("trackBar");
}
init() {
this.pausePlayBtn.innerHTML = '\u23F5\uFE0E';
this.fullscreenBtn.innerHTML = '\u26F6\uFE0E'
this.volIco.innerHTML = '\u266A\uFE0E'
this.total.innerHTML =
Math.floor(this.video.duration % 3600 / 60).toString().padStart(2,'0') + ":" +
Math.floor(this.video.duration % 60).toString().padStart(2,'0');
this.elapsed.innerHTML = "0:00";
this.pausePlayBtn.addEventListener('click', ( event ) => player.pausePlay( event.target.innerHTML ) );
this.volBar.addEventListener( "change", ( event )=> player.changeVol( event.currentTarget.value ) );
this.fullscreenBtn.addEventListener( 'click', () => player.fullscreen( player.playerContainer ) );
}
updateTrackbar() {
this.trackBar.style.width = parseInt(( this.video.currentTime / this.video.duration ) * 100 ) + "%";
this.elapsed.innerHTML =
Math.floor(this.video.currentTime % 3600 / 60).toString().padStart(2,'0') + ":" +
Math.floor(this.video.currentTime % 60).toString().padStart(2,'0');
}
pausePlay( value ) {
switch( value ) {
// Play Button
case '\u23F5\uFE0E':
this.play();
break;
// Pause Button
case '\u23F8\uFE0E':
this.pause()
break;
}
};
pause() {
this.video.pause();
this.pausePlayBtn.innerHTML = '\u23F5\uFE0E';
this.intervalID = 0;
};
play() {
this.video.play();
this.pausePlayBtn.innerHTML = '\u23F8\uFE0E';
this.intervalID = window.setInterval(() => this.updateTrackbar(), 500)
};
changeVol( newVolume ) {
this.video.volume = newVolume / 100;
}
fullscreen( element ) {
if( this.fullscreenStatus === false ) {
element.requestFullscreen({navigationUI:'show'}).catch((e) => {
alert(`Could not enter fullscreen: ${e.message} (${e.name})`);
});
this.fullscreenStatus = true;
}
else {
document.exitFullscreen().catch((e) => {
alert(`Could not exit fullscreen: ${e.message} (${e.name})`);
});
this.fullscreenStatus = false;
}
}
}
let player = new VideoPlayer();
player.init();

46
js_workshop8/styles.css Normal file
View File

@@ -0,0 +1,46 @@
.container {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 640px;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.container:fullscreen {
width: 100%;
height: 100%;
}
.container:fullscreen #video {
height: 100%;
}
.container:fullscreen #buttonContainer {
height: 5%;
}
#volWrapper {
width: 100px;
}
#leftAlign {
align-self: flex-end;
}
#video {
object-fit: cover;
height: 100%;
}
#buttonContainer {
height: 10%;
background: rgba(50, 50, 50, 0.8);
}
#trackBar {
width: 0;
height: 4px;
}
#buttonContainer * {
color: white;
}