Complete Day 11 - Custom Video Player

Author: AngelaRead

11 - Custom Video Player/index.html

@@ -14,10 +14,13 @@
      <div class="player__controls">
        <div class="progress">
         <div class="progress__filled"></div>
+        <div class="scroll"></div>
        </div>
        <button class="player__button toggle" title="Toggle Play">►</button>
        <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
+        <p class="text"> Volume: <span id="volume-display">1</span></p>  
        <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
+        <p class="text"> playbackRate: <span id="playbackRate-display">1</span></p>  
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
      </div>

11 - Custom Video Player/scripts-FINISHED.js

@@ -0,0 +1,59 @@
+/* Get Our 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 skipBottons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+/* Build out functions */
+function togglePlay() {
+    const method = video.paused ? 'play' : 'pause' ;
+    video[method]();
+}
+
+function updateButton() {
+    const icon = this.paused ? '\u25BA' : '\u275A \u275A';
+    console.log(icon);
+    toggle.textContent = icon;
+}
+
+function skip() {
+    console.log(this.dataset.skip);
+    video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+  video[this.name] = this.value;
+  document.getElementById(`${this.name}-display`).textContent = parseFloat(this.value).toFixed(1);
+}
+
+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;
+}
+
+/* Hook up the event listners */ 
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+
+
+toggle.addEventListener('click', togglePlay);
+skipBottons.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', (e) => mousedown && scrub (e));
+progress.addEventListener('mousedown', () => mousedown = true);
+progress.addEventListener('mouseup', () => mousedown = false);

11 - Custom Video Player/scripts.js

@@ -10,9 +10,9 @@ body {
   margin: 0;
   padding: 0;
   display: flex;
-  background: #7A419B;
+  background: #34528a;
   min-height: 100vh;
-  background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
+  background: linear-gradient(135deg, #34528a 0%,#577dc4 48%,#9bd0f0 100%);
   background-size: cover;
   align-items: center;
   justify-content: center;
@@ -27,6 +27,13 @@ body {
   overflow: hidden;
 }
 
+.text{
+  color: white;
+  font-size: 12px;
+  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  margin: auto;
+}
+
 /* This css is only applied when fullscreen is active. */
 .player:fullscreen {
   max-width: none;
@@ -55,7 +62,7 @@ body {
 }
 
 .player__button:focus {
-  border-color: #ffc600;
+  border-color: #6200ff;
 }
 
 .player__slider {
@@ -98,10 +105,10 @@ body {
 }
 
 .progress__filled {
-  width: 50%;
-  background: #ffc600;
+  width: 0%;
+  background: #6200ff;
   flex: 0;
-  flex-basis: 50%;
+  flex-basis: 0%;
 }
 
 /* unholy css to style input type="range" */
@@ -131,15 +138,15 @@ input[type=range]::-webkit-slider-thumb {
   height: 15px;
   width: 15px;
   border-radius: 50px;
-  background: #ffc600;
+  background: #6200ff;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -3.5px;
   box-shadow:0 0 2px rgba(0,0,0,0.2);
 }
 
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: #bada55;
+  background: #4ce3f1;
 }
 
 input[type=range]::-moz-range-track {
@@ -157,6 +164,6 @@ input[type=range]::-moz-range-thumb {
   height: 15px;
   width: 15px;
   border-radius: 50px;
-  background: #ffc600;
+  background: #6200ff;
   cursor: pointer;
 }