2021.08.09 - 08.10 개발 일지 (마음 채우기 유튜브 영상 시청 기능)

안드로이드 스튜디오에서 YouTube API를 이용하여 유튜브 영상을 앱 화면에 띄우는 것은 어제 완료했었다.

오늘은 본격적으로 마음 채우기 (영상 시청) 기능을 구현했다.

 

구현하면서 고려한 점

1. 영상 관련 데이터를 어디에, 어떻게 저장할지

• 영상 정보(id, 제목, 설명)는 json 파일로 프로젝트 자체에 저장
• 사용자의 영상 시청 기록은 firebase DB에 저장하기로 함

2. 영상 시청 완료 기준

• 해당 영상의 길이만큼 시청해야 완료
• 단, 영상 하단의 스크롤바를 이용하여 시간을 건너뛰는 것을 고려하여 실제로 영상이 재생된 시간을 구해야함

3. 마음 온도 높이는 기준

• 시청 기록이 없는 영상에 대해서만 마음 온도 증가, 이미 시청 완료한 영상은 마음 온도가 오르지 않음
• 하나의 영상을 시청했을 때 5점 증가

 

개발 내용

1. 마음 채우기 영상 목록 ListView 구현

지금까지 앱을 개발하면서 RecyclerView, ListView를 많이 이용하였기 때문에

이번에도 Model을 만들고 Adapter을 생성해서 ListView를 만들었다.

 

2. 영상 누적 시청 시간 체크

이 부분을 구현하면서 시간이 꽤 걸렸는데, 앞서 고려한 점에서 언급한 것처럼

영상을 제대로 시청하지 않고 타임라인을 이동하여 영상 시청을 끝내는 것을 방지해야 했다.

실제로 재생된 시간만 리턴하는 메소드를 찾아보았으나 YouTube API에서는 해당 메소드를 제공하지 않는 것으로 보였다.

따라서 스레드를 이용하여 직접 구현하였다.

 

스레드는 1초마다 cnt 값을 높이면서 재생한 시간(초)을 높인다.

이것이 영상의 길이와 일치하게 되면 스레드는 종료되고 영상 시청 완료 처리를 하는 것이다.

영상 재생 시작, 일시정지 후 다시 재생을 할 때 스레드가 동작하도록 하고

일시정지 (또는 정지) 시에는 스레드를 일시중지시키도록 하였다.

 

YouTube API 관련 메소드들은 공식 문서에서 찾아볼 수 있었다

https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer?hl=ko 

YouTubePlayer  |  YouTube for Android  |  Google Developers

 

3. 영상 시청 기록 DB 저장

정상적으로 영상 시청을 완료하고 스레드가 종료되면 firebase DB에 사용자의 uid와 영상의 id 정보를 저장한다.

 

4. 시청 완료한 영상 DB 조회 후 화면에 표시

firebase DB를 조회하여 시청 완료한 영상에 대해서 시청 완료 표시를 한다.

 

5. 영상 시청 화면에서 뒤로가기 버튼 클릭 시 팝업 띄우기

영상 시청을 완료한 후 눌렀을 땐 마음 온도가 올랐다는 팝업을 띄우고

영상 시청 중간에 뒤로가기를 눌렀으면 시청을 완료하지 않았음(마음 온도가 오르지 않음)을 알리는 팝업을 띄운다.

 

6. 메인 화면 메뉴 이미지 추가

메인 화면 디자인을 보완하기 위해 팀원분이 직접 그린 이미지를 추가하였다.

 

---

 

마음 채우기 화면 (영상 목록 화면), 영상의 시청 완료 여부 확인 가능

 

영상 시청 화면, 시청 시간을 seekbar을 이용해서 나타냈다.

 

영상을 끝까지 시청했을 때 시청 완료 팝업(왼), 중간에 나가는 경우엔 완료되지 않았다는 팝업(오)을 띄운다.

 

이미지를 추가한 메인 화면