2020-07-06 Volume & Modal Router

#유튜브 클론 코딩

 

input.videoPlayer__volume#jsVolume(type="range", min="0" max="1" value="0.5" step="0.1")

const volumeRange = document.getElementById("jsVolume");

volumeRange.value = 0; 

function handleDrag(event) {
  const {
    target: { value }
  } = event;
  videoPlayer.volume = value;
  if (value >= 0.6) {
    volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
  } else if (value >= 0.2) {
    volumeBtn.innerHTML = '<i class="fas fa-volume-down"></i>';
  } else {
    volumeBtn.innerHTML = '<i class="fas fa-volume-off"></i>';
  }
}

volumeRange.addEventListener("input", handleDrag);

 

동영상의 볼륨을 유저가 직접 조절할 수 있는 기능을 구현했다. 

Video 태그에서 volume 이 지원되기 때문에, type이 range인 input을 만들고 

해당 input의 value 값을 얻어 VideoPlayer에 저장해주면 잘 동작한다. 

 

value 값에 따라 innerHTML을 통해 아이콘도 변경되게 적용하여 UX 개선은 덤! 

 

 

#Vue Router

 

보통, 모달 창을 띄운다면 URL 주소를 변경하지 않고, Store의 값 (boolean)을 하나 만들고,

v-if="boolean" 을 통해 모달을 보여주거나, 보여주지 않았다. 

 

하지만 이처럼 if문을 통해 렌더를 해주게 되면 모바일 같은 경우 뒤로가기 버튼을 눌렀을 때 

모달이 닫히지 않는다. 물론 뒤로가기 버튼을 키 값을 추가하여 뒤로가기를 눌렀을 때 닫히게 할 수 있지만, 

이번에는 모달창을 하나의 페이지로 분류되는 로직을 구현해봤다. 

 

// Vue.js 

watch: {
	$route: {
    	async handler(to, from) {
          const { option } = to.query;
          if (option) {
            //  to.query.option에 새로운 값이 들어오면 실행될 함수
          }     
        }
    }
}

methods: {
    async openModal() {
	  // query를 복사
      const query = _cloneDeep(this.$route.query);
      query.option = 'option';
      this.$router.push({ query });
    },
}

 

watch에 route의 값이 변할 때 실행되는 로직을 구현했고, openModal은 사용자가 클릭했을 때의 로직이다. 

값이 수정되는 걸 방지하기 위해 cloneDeep으로 query를 복사하여 변수에 저장하고, 원하는 값을 저장한 후 

router.push 한다. 

 

단순히 위의 기능만 구현한다고 당연히 모달 창이 열리진 않는다. 

위의 기능은 route url을 생성한거고, push해주는 역할일 뿐이며, 평소와 같이 모달을 열리게 해주는 건 

data를 하나 만들어서 true/false 해주면 된다.