Project 28 complete

wwags33 · wwags33 · commit 9eb7134f5fa2 · 2020-03-04T20:24:08.000-05:00
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
@@ -1,20 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Video Speed Scrubber</title>
   <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
   <div class="wrapper">
-    <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
+    <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop
+      controls></video>
     <div class="speed">
       <div class="speed-bar">1×</div>
     </div>
   </div>
 
-<script>
-</script>
+  <script src="typescripts.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/28 - Video Speed Controller/typescripts.js b/28 - Video Speed Controller/typescripts.js
@@ -0,0 +1,15 @@
+var speed = document.querySelector('.speed');
+var bar = document.querySelector('.speed-bar');
+var video = document.querySelector('.flex');
+function handleMove(e) {
+    var y = e.pageY - this.offsetTop;
+    var percent = y / this.offsetHeight;
+    var min = 0.4;
+    var max = 4;
+    var height = Math.round(percent * 100) + '%';
+    var playbackRate = percent * (max - min) + min;
+    bar.style.height = height;
+    bar.textContent = playbackRate.toFixed(2) + 'x';
+    video.playbackRate = playbackRate;
+}
+speed.addEventListener('mousemove', handleMove);
diff --git a/28 - Video Speed Controller/typescripts.ts b/28 - Video Speed Controller/typescripts.ts
@@ -1,10 +1,31 @@
 /**
  * JavaScript30 by Wes Bos, https://javascript30.com/
  * TypeScript implementation by Will Wager
- * Project:
- * Concepts:
- * Key takeaways:
- * Sidenotes:
+ * Project: Video Speed Controller
+ * Concepts: Calculating percent of element above mouse position; Video API
+ * Key takeaways: Use pageX/Y and offsetTop/Left when scrolling doesn't matter.
+ *   https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y
+ *   https://stackoverflow.com/questions/44172651/difference-between-getboundingclientrect-top-and-offsettop
+ * Sidenotes: As a general rule, I'll start casting everything selected from the DOM,
+ *   whether the code requires it or not.
  * Compilation command:
  *   tsc --removeComments --strictNullChecks --noImplicitAny --target es5 typescripts.ts
  */
+
+const speed = document.querySelector('.speed')! as HTMLDivElement;
+const bar = document.querySelector('.speed-bar')! as HTMLDivElement;
+const video = document.querySelector('.flex')! as HTMLVideoElement;
+
+function handleMove(e: MouseEvent) {
+  const y = e.pageY - this.offsetTop;
+  const percent = y / this.offsetHeight;
+  const min = 0.4;
+  const max = 4;
+  const height = Math.round(percent * 100) + '%';
+  const playbackRate = percent * (max - min) + min;
+  bar.style.height = height;
+  bar.textContent = playbackRate.toFixed(2) + 'x';
+  video.playbackRate = playbackRate;
+}
+
+speed.addEventListener('mousemove', handleMove);
