wesbos
diff --git a/Collapse file
‎11 - Custom Video Player/index.html‎
Copy file name to clipboardExpand all lines: 11 - Custom Video Player/index.html
+1Lines changed: 1 addition & 0 deletions b/Collapse file
‎11 - Custom Video Player/index.html‎
Copy file name to clipboardExpand all lines: 11 - Custom Video Player/index.html
+1Lines changed: 1 addition & 0 deletions
diff --git a/Collapse file
‎11 - Custom Video Player/scripts.js‎
Copy file name to clipboard
+58Lines changed: 58 additions & 0 deletions b/Collapse file
‎11 - Custom Video Player/scripts.js‎
Copy file name to clipboard
+58Lines changed: 58 additions & 0 deletions
@@ -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>
 
 
@@ -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))