분류 전체보기
-
JavaScript video volume buttonProject using node.js/Cloning Youtube 2020. 9. 3. 13:54
videoPlayer.js 사용자가 volumeBtn을 눌렀을 때 handleVolumeClick가 실행되도록 구현했다. handleVolumeClick은 videoPlayer가 muted면 값을 false로 바꿔서 소리가 들리게 하고 false이면, 즉 소리가 켜져있으면 소리를 음소거 한다. 참고 자료 노마드 코더의 유튜브 클론 강의 HTMLMediaElement API MDN 소스 코드 https://github.com/zpskek/wetube-v3/commit/659bb54f7b5bb3576343ac448757e31c1600f016
-
JavaScript video play buttonProject using node.js/Cloning Youtube 2020. 9. 3. 11:02
앞으로 생성할 모든 프론트엔드 part의 JS 파일은 main.js에서 import를 할 것이다. 그리고 main.pug에서 main.js만 script에 포함시킬 것이다. videoPlayer.js 모든 함수는 init()에 선언할 것이다. 그리고 init 함수는 videoContainer가 있을 경우에만 실행되도록 if문으로 구성한다. 사용자가 playBtn을 눌렀거나 video 화면을 클릭했을 때, video가 play or pause가 될 수 있도록 'click' event를 추가했고 그에 대한 실행을 handlePlayClick로 구현했다. handlePlayClick는 videoPlayer가 paused(멈춰있으면 boolean 값으로 true를 반환)면 video를 실행하고 playBtn i..
-
SCSS-videoPlayerProject using node.js/Cloning Youtube 2020. 9. 3. 10:38
partials/videoPlayer.scss .videopPlayer { margin-bottom: 20px; display: flex; position: relative; video { align-self: center; width: 100%; max-width: 100%; } &:hover, &:active { .videoPlyaer__controls, .progressBar { opacity: 1; } } .videoPlyaer__controls { opacity: 0; transition: opacity 0.4s linear; display: flex; justify-content: space-between; position: absolute; bottom: 0px; color: white; f..
-
SCSS-searchProject using node.js/Cloning Youtube 2020. 9. 2. 12:22
pages/search.scss .search__header { margin-bottom: 30px; h5 { font-weight: 600; &:first-child { margin-bottom: 20px; } } } .search__videos { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); grid-gap: 30px; .videoBlock:first-child, .videoBlock:nth-child(2) { grid-column: span 3; } .videoBlock:nth-child(3), .videoBlock:nth-child(4), .videoBlock:nth-child(5) { grid-column: span ..
-
SCSS-videoDetailProject using node.js/Cloning Youtube 2020. 9. 2. 12:14
pages/videoDetail.scss .profile { display: flex; flex-direction: column; align-items: center; .profile__column { &:nth-child(2) { display: flex; flex-direction: column; align-items: center; margin: 20px 0; margin-bottom: 40px; font-weight: 400; font-size: 18px; .profile__name { margin-bottom: 20px; } } &:last-child { .profile__btns { display: flex; flex-direction: column; align-items: center; ma..
-
SCSS-userDetailProject using node.js/Cloning Youtube 2020. 9. 2. 12:09
pages/userDetail.scss .profile { display: flex; flex-direction: column; align-items: center; .profile__column { &:nth-child(2) { display: flex; flex-direction: column; align-items: center; margin: 20px 0; margin-bottom: 40px; font-weight: 400; font-size: 18px; .profile__name { margin-bottom: 20px; } } &:last-child { .profile__btns { display: flex; flex-direction: column; align-items: center; mar..
-
SCSS-socialLoginProject using node.js/Cloning Youtube 2020. 9. 2. 12:00
partials/socialLogin.scss .social-login { max-width: 320px; width: 100%; display: flex; flex-direction: column; align-items: center; .social-login--github { margin-bottom: 20px; background-color: $black; } .social-login--kakao { margin-bottom: 20px; background-color: $kakao; a { color: #3c1e1e; } } i { margin-right: 10px; } a { color: white; } } View http://localhost:5002/ 참고 자료 노마드 코더의 유튜브 클론 강..
-
SCSS-formProject using node.js/Cloning Youtube 2020. 9. 2. 11:46
partials/form.scss .form-container { display: flex; flex-direction: column; align-items: center; font-size: 20px; width: 100%; .record-container { width: 100%; max-width: 320px; margin-bottom: 15px; video { background-color: #6f6f6f; width: 100%; margin-bottom: 20px; } button { margin: 5px 0; } } form { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 320px; ma..