adding script wesbos#11

Author: Watson6982

11 - Custom Video Player/index.html

@@ -19,6 +19,7 @@
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
+       <button class="player__button fullscreen" title="Fullscreen">⇱</button>
      </div>
    </div>
 

11 - Custom Video Player/scripts.js

@@ -0,0 +1,74 @@
+/* Get elements */
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+const fullscreen = player.querySelector('.fullscreen');
+
+/* Functions */
+function togglePlay() {
+    //Simplified method
+    //const method = video.paused ? 'play' : 'pause';
+    //video[method]();
+
+    //Longer method
+    if(video.paused) {
+        video.play();
+    } else {
+        video.pause();
+    }
+}
+function updateButton() {
+    const icon = this.paused ?  '►' : '❚ ❚';
+    toggle.textContent = icon;
+}
+
+function skip(){
+    console.log(this.dataset);
+    video.currentTime += parseFloat(this.dataset.skip);
+};
+
+function handleRangeUpdate(){
+    video[this.name] =  this.value;
+}
+
+function handleProgress(){
+    const percent = (video.currentTime / video.duration ) * 100;
+    progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+    video.currentTime = scrubTime;
+}
+
+function makeFullscreen() {
+    video.webkitRequestFullscreen();
+}
+
+/* Event listeners */
+video.addEventListener('click',togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click',togglePlay);
+skipButtons.forEach(button => button.addEventListener('click',skip));
+ranges.forEach(range => range.addEventListener('change',handleRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove',handleRangeUpdate));
+
+let mousedown = false;
+progress.addEventListener('click',scrub);
+// progress.addEventListener('mousemove', () => {
+//     if(mousedown) {
+//         scrub();
+//     }
+// });
+progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
+
+fullscreen.addEventListener('click', makeFullscreen);