[React] 침착맨 플레이어 (Dog Admin Player) - 침투부 플레이어

glow_soon·2022년 3월 22일
1

React

목록 보기
38/52
post-thumbnail

침착맨을 너무 사랑한 나머지 침착맨(침투부) 플레이어를 만들어 보았다. 유튜브 API를 활용해 침착맨 채널의 정보를 실시간으로 따왔다. (배포할때는 꼭 개인 API키 암호화하기)

오로지 침착맨에게 집중하고 싶은 분들을 위해 만들었읍니다.


메인화면


침착맨 채널의 재생목록을 업로드 최신순으로 50개까지 불러온다. 유튜브 API에서 가져올수 있는 재생목록이 최대 50개까지 지원이 안되서 아쉽다. (일상 재롱 재생목록 진짜 재밌는데 따흑,,,,)
10개씩 페이지네이션 되어있다.


수정 (04.12)

기존에 침착맨 채널의 재생목록을 50개까지 불러오지 못했지만 pageToken 유튜브 api 속성을 활용해 해당 채널의 모든 재생목록(약 190개...무친 개방장)을 불러옵니다.


해당 이미지로 로딩 UI도 구현했는데 로딩이 너무 빨라서 잘 안보인다


즉-시 재생목록 검색

자동완성 기능으로 즉-시 해당 재생목록 이동


재생목록 동영상 즉-시 감상

'쇼핑맨' 재생목록의 동영상을 감상 할것이다.

들어가게 되면 디폴트로 조회수가 높은순으로 해당 재생목록의 동영상이 전부 나온다.
조회수가 50만이 넘어갔다면 추천 딱지가 붙도록 구현해놓았다. 기준은 내맘이다.

조회순, 최신순, 오래된순

select의 value값(조회순, 최신순, 오래된순) 에 따라 데이터를 필터링해 return 한 데이터를 다시 렌더링 해주는 방식으로 구현하였다.

select 태그를 통해 구현하였다.

10년이면 강산이 변한다 했다, 최신 동영상으로 즉-시 감상 가능하다

구관이 명관이다 라는 말이 있다. 오래된 동영상 순으로 즉-시 감상 가능하다.

현재 날짜와 업로드한 날짜의 차이를 계산하는 함수를 만들어 7일이내 업로드된 영상이면 New 딱지가 붙도록 하였다.


즉-시 영상 감상

보고싶은 영상을 클릭하면 풀스크린 QHD 화질로 우리의 개방장을 즉-시 감상 가능하다.
털보아저씨에게 오로지 집중하기 위해 UI를 최소화 하였다.

그럼 이만.....


모바일에서도 무한으로 즐길 수 있다.

배포 링크: https://boyfromthewell.github.io/Dog-Admin-Player/

profile
나는야 코린이

1개의 댓글

comment-user-thumbnail
2022년 12월 6일

안녕하세요. 잘 정리 되어 있어서 잘 보았습니다.
다름이 아니라, 제가 유튭을 통해서 video페이지를 만들고 싶어서,
원하는 채널의 정보를 갖고와서 그걸 토대로 리스트화 하려고 합니다만..
제가 초짜라 연동되어 있는 깃헙도 확인해보고 했으나, 이해가 안되는 부분이 있어서요.
수빙수님의 유튜브를 조금 정리하고 있는데, id별로 재생목록을 갖고 오고 싶었으나,
map함수를 이용하는 부분에서 막혔습니다.
혹시 가능하시다면 도와주실 수 있을까요?

답글 달기