lesson wesbos#11 done

xchinaskix · xchinaskix · commit 7572a9b3b574 · 2018-12-18T00:56:32.000+02:00
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
@@ -24,7 +24,7 @@
     ctx.strokeStyle = `hsl(${hsl}, 100%, 50%)`;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    ctx.lineWidth = 20;
+    // ctx.lineWidth = 20;
     ctx.beginPath();
     ctx.moveTo(lastX, lastY);
     ctx.lineTo(e.offsetX, e.offsetY);
@@ -36,15 +36,15 @@
       hsl = 0;
     }
 //  
-//     if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
-//       dir = !dir;
-//     }
+    if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+      dir = !dir;
+    }
 
-//     if (dir) {
-//       ctx.lineWidth++;
-//     } else {
-//       ctx.lineWidth--;
-//     } 
+    if (dir) {
+      ctx.lineWidth++;
+    } else {
+      ctx.lineWidth--;
+    } 
     
   }
   canvas.addEventListener('mousedown', (e) => {
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
@@ -38,7 +38,7 @@
     console.assert(1 !== 1, 'wrong');
 
     // clearing
-    console.clear();
+    // console.clear();
 
     // Viewing DOM Elements
     const p = document.querySelector('p');
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
@@ -4,17 +4,18 @@
   <meta charset="UTF-8">
   <title>HTML Video Player</title>
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
 </head>
 <body>
-
+  
    <div class="player">
      <video class="player__video viewer" src="652333414.mp4"></video>
 
      <div class="player__controls">
        <div class="progress">
         <div class="progress__filled"></div>
        </div>
-       <button class="player__button toggle" title="Toggle Play">►</button>
+       <button class="player__button toggle" title="Toggle Play"><i class="fas fa-play"></i></button>
        <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
        <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>
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,60 @@
+// get 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 sliders = player.querySelectorAll('.player__slider');
+const skipButtons = player.querySelectorAll('[data-skip]');
+
+console.dir(video);
+
+// add play/pause method
+function playerToggle() {
+    const state = video.paused ? 'play' : 'pause';
+    video[state]();
+}
+
+function updateButton() {
+    const state = video.paused ? '<i class="fas fa-play"></i>' : '<i class="fas fa-pause"></i>';
+    toggle.innerHTML = state;
+}
+
+function skip() {
+    video.currentTime += +this.dataset.skip;
+}
+
+function rangeUpdate() {
+    video[this.name] = this.value;
+}
+
+function handleProgress() {
+    const prog = (video.currentTime / video.duration) * 100;
+    progressBar.style.flexBasis = `${prog}%`;
+}
+
+function scrub(e) {
+    const percent = (e.offsetX / progress.offsetWidth) * 100;
+    const time = (percent * video.duration) / 100;
+    video.currentTime = time;
+
+} 
+
+// hook event listeners
+video.addEventListener('click', playerToggle);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+
+toggle.addEventListener('click', playerToggle);
+
+skipButtons.forEach(skipButton => skipButton.addEventListener('click', skip));
+sliders.forEach(slider => slider.addEventListener('change', rangeUpdate));
+
+let draggin = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', (e) => draggin && scrub(e));
+
+progress.addEventListener('mousedown', () => draggin = true);
+progress.addEventListener('mouseup', () => draggin = false);
+
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
@@ -101,7 +101,7 @@ body {
   width: 50%;
   background: #ffc600;
   flex: 0;
-  flex-basis: 50%;
+  /* flex-basis: 50%; */
 }
 
 /* unholy css to style input type="range" */

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ body {`
`101`	`101`	`width: 50%;`
`102`	`102`	`background: #ffc600;`
`103`	`103`	`flex: 0;`
`104`		`- flex-basis: 50%;`
	`104`	`+ /* flex-basis: 50%; */`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`/* unholy css to style input type="range" */`