Day 11 - Custom Video Player

victorkurauchi · victorkurauchi · commit cee0dce52efe · 2020-04-02T12:39:43.000-03:00
diff --git a/11 - Custom Video Player/index.html b/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">[]</button>
      </div>
    </div>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,58 @@
+// get elements
+const video = document.querySelector('.viewer');
+const progress = document.querySelector('.progress');
+const progressFilled = document.querySelector('.progress__filled');
+const skipButtons = document.querySelectorAll('[data-skip]');
+const rangeButtons = document.querySelectorAll('.player__slider');
+const toggleButton = document.querySelector('.toggle');
+const fullscreen = document.querySelector('.fullscreen');
+
+console.log('skip b', skipButtons);
+
+// handle events
+function handlePause() {
+  const method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function handlePauseEvent() {
+  const icon = this.paused ? '►' : '❚ ❚';
+  console.log('icon', icon);
+  toggleButton.textContent = icon;
+}
+
+function handleSkip() {
+  console.log(this.dataset);
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRange() {
+  video[this.name] = this.value;
+}
+
+function handleTimeUpdate() {
+  const percent = (this.currentTime / this.duration) * 100;
+  progressFilled.style.flexBasis = `${percent}%`;
+}
+
+function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+    video.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      video.exitFullscreen(); 
+    }
+  }
+}
+
+// hook events
+toggleButton.addEventListener('click', handlePause)
+fullscreen.addEventListener('click', toggleFullScreen);
+video.addEventListener('click', handlePause)
+video.addEventListener('pause', handlePauseEvent)
+video.addEventListener('play', handlePauseEvent)
+video.addEventListener('timeupdate', handleTimeUpdate);
+
+skipButtons.forEach(button => button.addEventListener('click', handleSkip))
+
+rangeButtons.forEach(button => button.addEventListener('click', handleRange))
