finished 11

Brad Stayte · Brad Stayte · commit a5c08f157bd6 · 2016-12-31T15:59:34.000-05:00
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,58 @@
+(function(){
+    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');
+
+    function togglePlay() {
+        const action = video.paused ? 'play' : 'pause';
+        video[action]();
+    }
+
+    function updateButton() {
+        const icon = this.paused ? '►' : '❚ ❚';
+        toggle.textContent = icon;
+    }
+
+    function handleProgress() {
+        const percent = (video.currentTime / video.duration) * 100;
+        progressBar.style.flexBasis = `${percent}%`;
+    }
+
+    function handleRangeUpdate() {
+       video[this.name] = this.value;
+    }
+
+    function handleSkip() {
+        video.currentTime += parseFloat(this.dataset.skip);
+    }
+    
+    function scrub(e) {
+        const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
+        video.currentTime = scrubTime;
+    }
+    
+    toggle.addEventListener('click', togglePlay);
+
+    video.addEventListener('click', togglePlay);
+    video.addEventListener('play', updateButton);
+    video.addEventListener('pause', updateButton);
+    video.addEventListener('timeupdate', handleProgress);
+
+    ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+    ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+
+    skipButtons.forEach(skip => skip.addEventListener('click', handleSkip));    
+
+    let mousedown = false;
+    progress.addEventListener('click', scrub);
+    progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
+    progress.addEventListener('mousedown', () => mousedown = true);
+    progress.addEventListener('mouseup', () => mousedown = false);
+
+}());
+
+
