diff --git a/.changeset/nine-steaks-obey.md b/.changeset/nine-steaks-obey.md new file mode 100644 index 0000000..47f11fd --- /dev/null +++ b/.changeset/nine-steaks-obey.md @@ -0,0 +1,5 @@ +--- +"react-native-youtube-bridge": patch +--- + +docs(example): update example video and expo go link diff --git a/README-ko_kr.md b/README-ko_kr.md index 1a58ce6..97d0e9e 100644 --- a/README-ko_kr.md +++ b/README-ko_kr.md @@ -20,6 +20,11 @@ React Native에서 YouTube 플레이어를 사용하려면 복잡한 설정이 > 빠른 시작을 원하신다면 [예제](/example/)를 확인해보세요. - [웹 데모](https://react-native-youtube-bridge.pages.dev/) +- [Expo Go](https://snack.expo.dev/@harang/react-native-youtube-bridge) + +

+ +

## 설치 diff --git a/README.md b/README.md index 456cfaf..8a95e9b 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,11 @@ However, there are currently no actively maintained YouTube player libraries for > For a quick start, check out the [example](/example/). - [Web Demo](https://react-native-youtube-bridge.pages.dev/) +- [Expo Go](https://snack.expo.dev/@harang/react-native-youtube-bridge) + +

+ +

## Installation diff --git a/assets/example.gif b/assets/example.gif new file mode 100644 index 0000000..c254695 Binary files /dev/null and b/assets/example.gif differ diff --git a/example/src/App.tsx b/example/src/App.tsx index 9d922b0..474f4e9 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -30,7 +30,7 @@ function App() { const handleReady = useCallback((playerInfo: PlayerInfo) => { console.log('Player is ready!'); - Alert.alert('알림', 'YouTube 플레이어가 준비되었습니다!'); + Alert.alert('Alert', 'YouTube player is ready!'); console.log('rates', playerInfo.availablePlaybackRates); console.log('vol', playerInfo.volume); @@ -55,22 +55,22 @@ function App() { switch (state) { case PlayerState.UNSTARTED: - console.log('플레이어가 시작되지 않음'); + console.log('Player is not started'); break; case PlayerState.PLAYING: - console.log('비디오가 재생 중입니다'); + console.log('Video is playing'); break; case PlayerState.PAUSED: - console.log('비디오가 일시정지되었습니다'); + console.log('Video is paused'); break; case PlayerState.BUFFERING: - console.log('비디오가 버퍼링 중입니다'); + console.log('Video is buffering'); break; case PlayerState.ENDED: - console.log('비디오 재생이 완료되었습니다'); + console.log('Video is ended'); break; case PlayerState.CUED: - console.log('비디오가 큐에 준비되었습니다'); + console.log('Video is cued'); break; } }, []); @@ -83,7 +83,7 @@ function App() { const handleError = useCallback((error: YouTubeError) => { console.error('Player error:', error); - Alert.alert('에러', `플레이어 오류 (${error.code}): ${error.message}`); + Alert.alert('Error', `Player error (${error.code}): ${error.message}`); }, []); const handlePlaybackRateChange = useCallback((rate: number) => { @@ -93,12 +93,10 @@ function App() { const handlePlaybackQualityChange = useCallback((quality: string) => { console.log('Playback quality changed:', quality); - Alert.alert('품질 변경', `재생 품질이 ${quality}로 변경되었습니다`); }, []); const handleAutoplayBlocked = useCallback(() => { console.log('Autoplay was blocked'); - Alert.alert('알림', '자동재생이 브라우저에 의해 차단되었습니다'); }, []); const changePlaybackRate = (rate: number) => { @@ -151,12 +149,12 @@ function App() { ); Alert.alert( - '플레이어 정보', - `현재 시간: ${formatTime(currentTime || 0)}\n` + - `총 길이: ${formatTime(duration || 0)}\n` + - `상태: ${state}\n` + - `로드된 비율: ${((loaded || 0) * 100).toFixed(1)}%\n` + - `URL: ${url || 'N/A'}`, + 'Player info', + `Current time: ${formatTime(currentTime || 0)}\n` + + `duration: ${formatTime(duration || 0)}\n` + + `state: ${state}\n` + + `loaded: ${((loaded || 0) * 100).toFixed(1)}%\n` + + `url: ${url || 'N/A'}`, ); } catch (error) { console.error('Error getting player info:', error); @@ -169,7 +167,7 @@ function App() { YouTube IFrame API Player Video ID: {videoId} - 재생 속도: {playbackRate}x + Playback rate: {playbackRate}x - 버퍼: {(loadedFraction * 100).toFixed(1)}% + Buffer: {(loadedFraction * 100).toFixed(1)}% @@ -231,30 +229,30 @@ function App() { style={[styles.button, styles.seekButton]} onPress={() => playerRef.current?.seekTo(currentTime > 10 ? currentTime - 10 : 0)} > - ⏪ -10초 + ⏪ -10s - {isPlaying ? '⏸️ 일시정지' : '▶️ 재생'} + {isPlaying ? '⏸️ Pause' : '▶️ Play'} playerRef.current?.stop()}> - ⏹️ 정지 + ⏹️ Stop playerRef.current?.seekTo(currentTime + 10, true)} > - ⏭️ +10초 + ⏭️ +10s - 볼륨 컨트롤 + Volume control - {isMuted ? '🔇 음소거됨' : '🔊 음소거'} + {isMuted ? '🔇 Muted' : '🔊 Unmuted'} changeVolume(25)}> @@ -269,11 +267,11 @@ function App() { 100% - 현재 볼륨: {volume}% + Current volume: {volume}% - 재생 속도 + Playback rate {availableRates.map((rate) => ( - 📊 플레이어 정보 + 📊 Player info - 다른 비디오 테스트: + Test other videos: