Completed Day wesbos#11 (skipped a day)

austinjreilly · austinjreilly · commit fb34d851a9a5 · 2017-10-23T16:51:51.000-04:00
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -22,6 +22,6 @@
      </div>
    </div>
 
-  <script src="scripts.js"></script>
+  <script src="scripts-WORKING.js"></script>
 </body>
 </html>
diff --git a/11 - Custom Video Player/scripts-WORKING.js b/11 - Custom Video Player/scripts-WORKING.js
@@ -0,0 +1,56 @@
+ /* 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');
+
+ /* Build functions */
+
+const togglePlay = () => {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+const updateButton = target => {
+  toggle.textContent = target.paused ? '►' : '❚ ❚';
+}
+
+const skip = target => {
+  video.currentTime += parseFloat(target.dataset.skip);
+}
+
+const handleRangeUpdate = target => {
+  video[target.name] = target.value;
+}
+
+const handleProgress = () => {
+  const percent = (video.currentTime / video.duration) * 100;
+  progressBar.style.flexBasis = `${percent}%`;
+}
+
+const scrub = event => {
+  const scrubTime = (event.offsetX / progress.offsetWidth) * video.duration;
+  video.currentTime = scrubTime;
+}
+
+ /* Hook up event listeners */
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', event => updateButton(event.target));
+video.addEventListener('pause', event => updateButton(event.target));
+
+skipButtons.forEach(button => button.addEventListener('click', event => skip(event.target)));
+
+ranges.forEach(range => range.addEventListener('change', event => handleRangeUpdate(event.target)));
+ranges.forEach(range => range.addEventListener('mousemove', event => handleRangeUpdate(event.target)));
+
+video.addEventListener('timeupdate', handleProgress);
+
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', e => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);
