iframe API - videoID로 연속재생 구현하기 [1편 Index로 된 JSON]

1. 원리

: 현재 FlatList + realtime database + react-native-iframe 을 사용중이다.

따라서 FlatList에서 선택한 항목에 대해 >> realtime database 내에 저장한 유튜브 json데이터에서 videoID를 받아와

  >> iframe에 입력해주는 방식을 채택하고 있다. 

문제는 이 방법을 이용하면, iframe 자체에선 autoplay를 구동시키더라도(default값임),

scr 옵션으로 url을 사용하는 것과 다르게, 다음에 재생할 videoID를 찾지 못해 동작이 멈추게 된다.

즉, 다음에 재생할 que된 videoID를 못찾아 재생할게 없음이란 상태가 된다.

따라서, 다음에 재생될 videoID들을 직접 지정해줘야한다는 뜻이다.

여러가지 방식이 있겠지만, 수 많은 데이터에 일일이 index를 넣어줄 순 없으므로,

내가 FlatList에서 선택한 항목의 index를 받아, 반복함수를 이용해 그 뒤로부터 데이터 끝까지 +1하여 모든 인덱스값과 같은 int값을 생성해준다.

그리고 해당 int값에 부합하는 데이터를 처음 받은 json데이터에 대입하여 각각의 데이터를 반복해서 받아주고,

각각으로 받은 데이터 중의 videoID에 해당하는 데이터만 추출해준다.

 

2. 준비사항

 ㄱ. react-native-iframe을 사용했다.

      ( 공식 링크 :https://lonelycpp.github.io/react-native-youtube-iframe/component-props )

      (react-youtube, youtube, iframe 등 다른 확장도 있으나 서로 명령어가 상이하므로

       본인이 import한 npm이 무엇인지 꼭 확인하자.)

 ㄴ. realtime database에 유튜브API를 이용해 json데이터를 그대로 긁어와 넣어뒀다.

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

       (즉, 여기서 JSON상의 경로는 유튜브 API를 따른다)

 ㄷ. url을 이용하는 scr방식이 아닌, videoID를 직접 로드해 주는 방식을 채택했다. (광고없음)

 ㄹ. FlatList를 사용했다.

 

3. 사용방법

 ㄱ. 기본적인 화면은 FLatList로 구현하며, react-native-iframe을 player로 렌더링 해주었다.

       이때 가장 중요한 점은, 컨텐츠를 눌렀을 때, onPress라는 함수를 통해 item와 index라는 props를 태워보내야 한다.

       그리고 ifram기본 API에 playList라는 props를 넣고,

       그 안에 리스트를 입력해줄 변수를 useState를 이용해 넣어야 한다.

import YoutubePlayer from "react-native-youtube-iframe";
...
export default function Users() {
	...
    // -----iframe 적용부분----------------------------------
    const [playing, setPlaying] = useState(true);
    const onStateChange = (state) => {
        if (state === "ended") {
        	// 여기서 state는 기본 변수이며, 이에 대입되는 str값은 공식문서에 있다. (ended, play, que 등...)
            setPlaying(true);
        }
    };
    
    // const togglePlaying = useCallback(() => {
    //     setPlaying((prev) => !prev); // 기호에 따라 토글을 넣을지 결정
    // }, []);
    
    return (
    	...
        // import한 iframe을 렌더링해주는 부분
            <View>
                <YoutubePlayer
                    height={200}
                    play={playing}
                    videoId={cardID}
                    onChangeState={onStateChange} // 상태변화에 따른 함수로, video의 state가 'ended'되었을 때 반응 할 함수이다. 그 전까지는 아래의 playList에 의해 state값을 que상태가 된다.
                    playList={QueList} //여기서 QueList는 setState를 이용해 리스트로 받아올 getter변수이다.
                />
                {/* <Button title={playing ? "pause" : "pzzlay"} onPress={togglePlaying} /> */} // 상단의 토글 함수를 사용할 때, 활성화 해주자
            </View>
            
            ...
            
			{/* Flatlist 부분 */}
            <FlatList
                data={state} // 데이터는 setState로 firebase로부터 받아온다.
                ...
                renderItem={({ item, index }) => (
                    <View style={styles.cardContainer}>
                        <TouchableOpacity style={styles.card} onPress={() => onPress({ item, index })}>
                        // 여기서 onPress를 통해 item과 index라는 props를 외부함수로 태워 보내야 한다.
                            <Image source={{ uri: item.snippet.thumbnails.medium.url }} />
                            ...
                        </TouchableOpacity>
                    </View >
                )
                } />
        </View >
    );
}

 

 ㄴ. FlatList에서 실행시킬 onPress 함수를 정의해주자

      받아온 item과 index를 모두 사용해야만 구현이 가능하다.

   // ---------- CardID에 videoId 할당해주는 부분
    const onPress = ({ item, index }) => {
        // console.log(Object.keys(item)[0])
        const SelectedKey = FBKeys[index]  // 선택된 index. 즉, realtime database내 item의 index로 된 키값 중 선택된 index키값만(인덱스에 맞는 키값)
        // console.log(FBKeys[index])
        // console.log(VID)
        // 선택한 카드의 인덱스 넘버~리스트 끝 인덱스 넘버까지 반복문으로 얻음
        const result = []; // 빈 Array로써, 인덱스값에 따른 videoID들이 push된다. // 새로 누르면, 기존 데이터에 update혹은 set으로 덮어쓰기 구현해야함.
        for (let i = SelectedKey; i < state.length; i++) {
            result.push(state[i].id.videoId)
        }
        console.log(result)
        //현재는 videoID를 불러와 Array로 만들어주기까지만 성공
        return (
            setQueList(result),
            setCardID(item.id.videoId)
        )
    }

ㄷ. 이렇게 하면 onPress는 두가지 기능을 동시에 하게 되는 것인데,

     첫 번째는, 컨텐츠를 선택하면 videoId를 얻어 cardID라는 변수로 치환치켜 iframe내 videoid에 로드된다.

     두 번째는, 선택한 컨텐츠의 index number부터 그 뒤로 리스트 끝까지의 index number를 받아,

                       farebase로부터 받은 데이터에 대응시켜 순차적으로 videoID를 받아온다. 그리고 이를 빈 array에 넣어준다.

     이렇게 생긴 array를 아까 선언해둔 useState를 통해 playList에 대입시켜주는 것이다.