Code for ch 12 and 13

sengeezer · sengeezer · commit 73c01a04c073 · 2017-05-01T02:52:41.000+01:00
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -6,7 +6,6 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
    <div class="player">
      <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
 
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,57 @@
+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 method = video.paused ? 'play' : 'pause';
+  video[method]();
+}
+
+function updateButton() {
+  toggle.textContent = this.paused ? '►' : '❚ ❚';
+}
+
+function skip() {
+  video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handleRangeUpdate() {
+  video[this.name] = this.value;
+}
+
+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;
+}
+
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+skipButtons.forEach(button => button.addEventListener('click', skip));
+
+ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
+
+// TODO: Improve, only use with clicked flag
+ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
+
+toggle.addEventListener('click', togglePlay);
+
+let mouseDown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => mouseDown && scrub(e));
+
+progress.addEventListener('mousedown', () => mouseDown = true);
+progress.addEventListener('mouseup', () => mouseDown = false);
+
+// TODO: Add fullscreen button to bottom right
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -3,10 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <title>Key Detection</title>
+  <link rel="stylesheet" href="style.css">
   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 </head>
 <body>
-<script>
-</script>
+
+  <script src="scripts.js"></script>
 </body>
 </html>
diff --git a/12 - Key Sequence Detection/scripts.js b/12 - Key Sequence Detection/scripts.js
@@ -0,0 +1,13 @@
+const pressed = [];
+const secretCode = 'omgwtfbbqmybffjill';
+
+window.addEventListener('keyup', (e) => {
+  pressed.push(e.key);
+  // constantly expunges extraneous characters
+  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
+
+  if (pressed.join('').includes(secretCode)) {
+    console.log('result!');
+    cornify_add();
+  }
+});
diff --git a/12 - Key Sequence Detection/style.css b/12 - Key Sequence Detection/style.css
@@ -0,0 +1 @@
+/* styles */
