iframe API - videoID로 연속재생 구현하기 [2편 임의의 keys로 된 JSON]

1. 목적

: 일반적으로 JSON 데이터를 realtime database에 업로드 하면, 자동으로 index number가 매겨진다.

 하지만, 만약  push 등 코드를 통해 realtime database에 데이터를 삽입하면, keys들이 index가 아닌,

 타임스탬프가 담긴 임의의 keys값으로 지정된다.

 따라서 1편과 달리 여기선 push를 통해 생성된 json데이터를 이용해 연속재생을 구현했다.

 

2. 준비사항

 ㄱ. 기본적으로 원리는 1편과 유사하다. 1편을 통해 선행학습을 하자.

 ( 참고 링크 : https://radpro.tistory.com/75 )

 ㄴ. 단, 1편과 2편은 firebase API가 조금 다르다. 아래의 찜 목록 구현을 참고하자.

 ( 참고 링크 : https://radpro.tistory.com/73 )

 

3. 사용방법

ㄱ. onPress 함수를 작성해준다.

     오히려 이게 더 간단하다.

     FlatList로부터 item와 index props를 받아온다. => 빈 array를 만들어준다(Que될 playlist를 만들어주는 것)

     => for문을 이용해 반복을 돌려준다.

     => 선택한 index부터(let i =index); firebase로부터 받아온 키값의 길이까지(fireKey.length); 1씩더하며 반복함

     => result라는 빈 리스트에, state로 받은 임의의 키값에 따른 value값들에서, index마다 videoId를 추출해서, push

     => videoId로 가득 찬 result를 iframe의 playList라는 props에 대입해주기 위해, setQueList에 태워 보내준다. 

    // ---------- CardID에 videoId 할당해주는 부분
    const onPress = ({ item, index }) => {
        // console.log(index); // 확인을 위한
        // console.log(SelectedKey); // 콘솔로그의
        // console.log(fireKey); // 흔적들..
        // console.log(state[index].id.videoId) // 없어도 무방합니다.
        const result = []; 
        for (let i = index; i < fireKey.length; i++) {
            result.push(state[i].id.videoId)
        }
        return (
            setQueList(result),
            setCardID(item.id.videoId)
        )
    }

 ㄴ. 이를 위한 firebase API에서 추출하는 값들은 다음과 같다.

       첫 째로, fireKey는 Object.keys를 이용해 임의의 키값 전부를 받아온다

       둘 째로, state는 Object.values를 이용해 임의의 키값에 속한 push했던 실질적인 JSON데이터들을 불러온다.

       (유튜브 API로 추출한 데이터와 같은 구조)

    useEffect(() => {
        setTimeout(() => {
            setLoading(true);
            firebase_db
                .ref(`/like/${user_id}`)
                .on('value', (snapshot) => {
                    const Like_List = (snapshot.val());
                    if (Like_List === null) {
                        Alert.alert('<찜 없음>', '목록이 없습니다!')
                    } else {
                        setFireKey(Object.keys(Like_List)) // 데이터 내 모든 realtime database keys
                        setState(Object.values(Like_List))
                        setLoading(false);
                    }
                })
        }, 300)
    }, []);

 ㄷ. iframe의 playList에 QueList로 치환받은 videoId로 된 리스트를 대입해주자

    return (
    ...
		<View>
			<YoutubePlayer
				play={playing} // play를 제어하는 props
				videoId={cardID} // videoId를 받아주는 props. cardID라는 getter변수로 videoId를 하나씩 받고있다.
				onChangeState={onStateChange} // 재생상태 변화를 담당하는 props. playList가 있으면 video que상태가 default값이며, 없으면 state가 ended로 되며 멈춘다.
                ...
				playList={QueList} // 이 부분이다
			/>
		</View>