From cc1c3a7d8a3e871dc091e6465752374a1f2c6678 Mon Sep 17 00:00:00 2001
From: changicho <changicho29@gmail.com>
Date: Tue, 9 Jun 2020 15:00:26 +0900
Subject: [PATCH] Feat: Add 11 - Custom Video Player
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

?: video 태그의 성질을 이용
dataset으로 key, value 를 설정 후 property에 직접 접근해 속성 변경
이 방법이 때때로 유효할 수 있음
---
 11 - Custom Video Player/scripts.js | 70 +++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29..0d60993 100644
--- a/11 - Custom Video Player/scripts.js	
+++ b/11 - Custom Video Player/scripts.js	
@@ -0,0 +1,70 @@
+// 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 skipButtons = player.querySelectorAll("[data-skip]");
+const ranges = player.querySelectorAll(".player__slider");
+
+// function
+function togglePlay() {
+  const method = video.paused ? "play" : "pause";
+  video[method]();
+}
+
+function updateButton() {
+  const icon = this.paused ? "►" : "❚ ❚";
+
+  toggle.innerText = icon;
+}
+
+function skip() {
+  const { skip } = this.dataset;
+
+  video.currentTime += parseFloat(skip);
+}
+
+function handleRangeUpdate() {
+  video[this.name] = this.value;
+}
+
+function handleProgress() {
+  const percent = (video.currentTime / video.duration) * 100;
+  progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(evt) {
+  const scrubTime = (evt.offsetX / progress.offsetWidth) * video.duration;
+
+  video.currentTime = scrubTime;
+}
+
+// eventListener
+video.addEventListener("click", togglePlay);
+video.addEventListener("play", updateButton);
+video.addEventListener("pause", updateButton);
+video.addEventListener("timeupdate", handleProgress);
+
+toggle.addEventListener("click", togglePlay);
+
+skipButtons.forEach((skipButton) => {
+  skipButton.addEventListener("click", skip);
+});
+ranges.forEach((range) => {
+  range.addEventListener("change", handleRangeUpdate);
+  range.addEventListener("mousemove", handleRangeUpdate);
+});
+
+let mouseDown = false;
+
+progress.addEventListener("click", scrub);
+progress.addEventListener("mousemove", (e) => {
+  if (mouseDown) scrub(e);
+});
+progress.addEventListener("mousedown", () => {
+  mouseDown = true;
+});
+progress.addEventListener("mouseup", () => {
+  mouseDown = false;
+});