1. Now Playing 메뉴 핵심 기능 수정
지난 글에서 새로 만든 Now playing 메뉴의 핵심 기능을 수정했다. 알고보니 TMDB 제공 api 중에 'videos'도 있었던 것이다! TMDB에서 불러온 데이터로 유튜브 영상을 찾기가 쉽지 않을 것 같아서 대충 영화 카드 클릭하면 유튜브의 검색페이지로 새창 이동하게끔 해뒀었는데, videos api가 있다는 얘기를 듣고 당장 달려갔다.
있다!
그럼 이제 이야기는 쉬워진다. videos 데이터를 불러와서 클릭한 영화의 유튜브 공식 트레일러 영상의 고유 주소를 받아올 수 있었다. 아래의 코드로 작성해보았다.
<script>
movieCard.addEventListener("click", () => {
const movie_id = movie.id;
fetch(`https://api.themoviedb.org/3/movie/${movie_id}/videos`, options)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error!`);
}
return response.json();
})
.then((data) => {
const videoKey = data.results[0].key;
const videoURL = `https://www.youtube.com/embed/${videoKey}`;
</script>data.result 객체의 0번째 인덱스의 key가 바로 내가 찾는 공식 트레일러 영상의 주소다. 이 주소를 videoKey라는 변수에 저장하고, 유튜브 기본 embed 주소 뒤에 붙인다.
<script>
function openVideoPopup(videoURL) {
const popupWidth = 560;
const popupHeight = 315;
const left = window.innerWidth / 2 - popupWidth / 2;
const top = window.innerHeight / 2 - popupHeight / 2;
const popupFeatures = `width=${popupWidth},height=${popupHeight},left=${left},
top=${top},resizable=yes,scrollbars=no,status=no`;
const popupWindow = window.open("", "VideoPopup", popupFeatures);
if (popupWindow) {
popupWindow.document.title = "iFlix: Watch Trailors";
popupWindow.document.body.style.overflow = "hidden";
popupWindow.document.body.style.margin = "0px";
popupWindow.document.body.innerHTML = `
<iframe width="${popupWidth}" height="${popupHeight}"
src="${videoURL}" title="Youtube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
`;
} else {
alert("Popup window blocked. Please allow popups for this site.");
}
}
openVideoPopup(videoURL);
})
</script>다음으로는 유튜브 플레이어를 띄울 팝업 브라우저를 만든다. 오늘 이 작업을 처음으로 해보게 됐는데, 마치 css에서 너비 얼마 높이 얼마 꾸며주는 것처럼 js로 세세하게 원하는 모양을 만들어 준다. popupFeatures 변수에 스크롤바가 생기지 않도록 속성값을 넣어줬는데도 불구하고 계속 쫌쫌따리 스크롤바가 생기길래 아래에 popupWindow.document.body.style을 활용해서 넣어줬더니 이제 스크롤바가 안 보인다. 또한 팝업이 막혀 있을 경우를 대비하여 if-else 조건문으로 팝업 차단 시 alert으로 알리게끔 해보았다.
그렇게 했더니 포스터 이미지를 클릭했을 때 공식 유튜브 트레일러 영상이 있는 팝업창이 잘 나타난다. chatGPT에게 팝업창의 주소창을 없애면 어떻겠냐고 질문했는데, 보안 등의 목적으로 현재 보고 있는 위치를 사용자가 파악할 수 있게 하기 위해서 주소창을 숨기는 것은 그다지 추천하지 않는다고 했다.
2. 상세페이지 댓글창 css
사실 이건 내가 발표자료 만드는 동안 팀원분이 다 해주신거라... 나는 그냥 이렇게 하면 어떨까요 저렇게 하면 어떨까요 의견만 낸 수준이다!
깔끔하고 예쁘게 댓글란이 완성되었다! 또한 작성된 리뷰가 아직 없을 때에는 페이지 로드 시 alert창이 떴는데, 입력칸 밑에 문구를 띄우는 걸로 대체하도록 수정되었다.
3. 발표자료 만들기
오늘은 다같이 만든 코드를 dev 브랜치에 최종 푸시하거나, 발표자료를 만들거나, 그리고 약간의 남는 시간은 남은 강의를 마저 보거나 했더니 시간이 샤샤샥 스샤샤샤샥 지나가버렸다. 시계도 못 보고 과제에 집중하느라 밥타임 노티를 주시면 "엥 벌써 시간이 이렇게 됐어요?" 하기 일쑤였다. 다른 팀원분들도 다 마찬가지...
발표 가이드에 명시된 발표 시간 7~10분을 고려해서 스크립트도 대강 작성했다. 그랬더니 겨우 TIL를 작성할 수 있게 된 게 12시가 넘어서였다🥹
<내일 마지막까지 달려볼 것들>
[오전]
1. 발표 자료 (ppt & 스크립트) 완성
1. 메인 브랜치 푸쉬 & 사이트 발행
1. 12시 전까지 과제 제출 완료하기
[오후]
1. 다함께 최최종 테스트
2. 팀원 다같이 힘을 모아 영화 리뷰 몇개씩 달기
