docs(readme): add v2 documentation #65
Conversation
- Migration Guide: v1 to v2 - v1 Legacy Version - update v1 to v2 guide
|
| Name | Type |
|---|---|
| react-native-youtube-bridge | Major |
| @react-native-youtube-bridge/react | Major |
| @react-native-youtube-bridge/core | Major |
| @react-native-youtube-bridge/web | Major |
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
WalkthroughThis update marks a major, breaking release (v2.0) of the React Native YouTube Bridge library, transitioning from a ref-based, imperative API to a fully declarative, hooks-based architecture. The Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant useYouTubePlayer
participant YoutubeView
participant useYouTubeEvent
App->>useYouTubePlayer: Create player instance (videoId, config)
useYouTubePlayer-->>App: Return player object
App->>YoutubeView: Render <YoutubeView player={player} />
App->>useYouTubeEvent: Subscribe to events (player, eventName, ...)
useYouTubeEvent-->>App: Provide event data (callback or state)
App->>player: Call control methods (play, pause, seekTo, stop)
Possibly related PRs
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying react-native-youtube-bridge-example with
|
| Latest commit: |
4e771d0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0d4d929f.react-native-youtube-bridge-example.pages.dev |
| Branch Preview URL: | https://docs-update-v2.react-native-youtube-bridge-example.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (13)
packages/react-native-youtube-bridge/docs/v1.md (2)
24-26: Add alt text to the demo GIF imageThe
<img>tag lacks analtattribute, triggering MD045 and reducing accessibility/compliance.- <img src="https://raw.githubusercontent.com/react-native-bridges/react-native-youtube-bridge/main/assets/example.gif" width="600" /> + <img src="https://raw.githubusercontent.com/react-native-bridges/react-native-youtube-bridge/main/assets/example.gif" + width="600" + alt="Demo of react-native-youtube-bridge v1 in action" />
267-270: Use a proper heading instead of bold textThe bold line
**Custom Player Page**is flagged by MD036. Convert it to a heading for consistency with the rest of the document.-**Custom Player Page** +#### Custom Player Pagepackages/react-native-youtube-bridge/docs/migration-v2.md (1)
125-126: Remove punctuation from the heading
#### \useYouTubeEvent` Usage Patterns:` ends with a colon, causing MD026. Dropping the colon keeps the heading clean.-#### `useYouTubeEvent` Usage Patterns: +#### `useYouTubeEvent` Usage PatternsREADME.md (2)
31-33: Provide alt text for the example GIFSame accessibility issue as in the v1 docs.
- <img src="./assets/example.gif" width="600" /> + <img src="./assets/example.gif" width="600" alt="Demo of react-native-youtube-bridge" />
74-80:progressIntervalis used but never definedIn the sample code
progressIntervalis referenced (lines 78-79) without being declared, which will throw a reference error if copied verbatim.Add a local constant or inline a numeric literal.
- const progress = useYouTubeEvent(player, 'progress', progressInterval); + const progressInterval = 1000; // ms + const progress = useYouTubeEvent(player, 'progress', progressInterval);packages/react-native-youtube-bridge/README-ko_kr.md (2)
30-32: 이미지에 대체 텍스트(alt) 추가접근성과 MD045 준수를 위해
alt속성을 추가해주세요.- <img src="https://raw.githubusercontent.com/react-native-bridges/react-native-youtube-bridge/main/assets/example.gif" width="600" /> + <img src="https://raw.githubusercontent.com/react-native-bridges/react-native-youtube-bridge/main/assets/example.gif" + width="600" + alt="react-native-youtube-bridge 데모" />
74-78:progressInterval정의 누락예제 코드에
progressInterval변수가 선언되지 않아 그대로 복사 시 오류가 발생합니다.- const progress = useYouTubeEvent(player, 'progress', progressInterval); + const progressInterval = 1000; // ms + const progress = useYouTubeEvent(player, 'progress', progressInterval);packages/react-native-youtube-bridge/README.md (3)
5-7: Use GitHub-compatible callouts
[!note]blocks render only on Microsoft Docs–style engines and are ignored on GitHub; the notice will silently disappear. Replace with a standard blockquote so the warning is visible to all readers.-> [!note] -> **V1 users:** [V1 Documentation](/packages/react-native-youtube-bridge/docs/v1.md) | [V2 Migration Guide](/packages/react-native-youtube-bridge/docs/migration-v2.md) +> **Note for V1 users:** +> [V1 Documentation](/packages/react-native-youtube-bridge/docs/v1.md) · [V2 Migration Guide](/packages/react-native-youtube-bridge/docs/migration-v2.md)
18-23: Capitalize “WebView” for consistencyEverywhere else the README uses the React-Native component name “WebView”. Keeping the same casing avoids cognitive friction.
- ✅ Flexible rendering modes (inline HTML & webview) + ✅ Flexible rendering modes (inline HTML & WebView)
50-61: Add missing imports in the quick-start snippetThe example won’t compile when pasted into a fresh file because
Reactis not in scope. A one-liner keeps the snippet self-contained.-import { YoutubeView, useYouTubePlayer } from 'react-native-youtube-bridge'; +import React from 'react'; +import { YoutubeView, useYouTubePlayer } from 'react-native-youtube-bridge';README-ko_kr.md (3)
5-7:[!note]블록은 GitHub에서 렌더링되지 않습니다GitHub Markdown은
[!note]구문을 지원하지 않습니다. 일반 인용문 형식으로 변경해 주세요.-> [!note] -> **V1 사용자:** [V1 문서](/packages/react-native-youtube-bridge/docs/v1.md) | [V2 마이그레이션 가이드](/packages/react-native-youtube-bridge/docs/migration-v2.md) +> **참고 – V1 사용자용 문서:** +> [V1 문서](/packages/react-native-youtube-bridge/docs/v1.md) · [V2 마이그레이션 가이드](/packages/react-native-youtube-bridge/docs/migration-v2.md)
18-23: “WebView” 표기로 통일 권장불릿 목록에서만 소문자
webview를 사용하고 이후엔 “WebView”를 사용합니다. 일관성을 유지하면 가독성이 좋아집니다.
50-61: 예제 코드에Reactimport 누락초심자도 바로 실행할 수 있도록 React import 를 추가해 주세요.
-import { YoutubeView, useYouTubePlayer } from 'react-native-youtube-bridge'; +import React from 'react'; +import { YoutubeView, useYouTubePlayer } from 'react-native-youtube-bridge';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
.changeset/funny-moons-hear.md(1 hunks).changeset/tired-papayas-sleep.md(0 hunks)README-ko_kr.md(8 hunks)README.md(6 hunks)packages/react-native-youtube-bridge/README-ko_kr.md(7 hunks)packages/react-native-youtube-bridge/README.md(6 hunks)packages/react-native-youtube-bridge/docs/migration-v2.md(1 hunks)packages/react-native-youtube-bridge/docs/v1.md(1 hunks)
💤 Files with no reviewable changes (1)
- .changeset/tired-papayas-sleep.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
packages/react-native-youtube-bridge/docs/v1.md
25-25: Images should have alternate text (alt text)
(MD045, no-alt-text)
241-241: Bare URL used
(MD034, no-bare-urls)
267-267: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
packages/react-native-youtube-bridge/docs/migration-v2.md
125-125: Trailing punctuation in heading
Punctuation: ':'
(MD026, no-trailing-punctuation)
packages/react-native-youtube-bridge/README.md
247-247: Bare URL used
(MD034, no-bare-urls)
273-273: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
README-ko_kr.md
240-240: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (1)
.changeset/funny-moons-hear.md (1)
100-104: Links rely on repo-relative paths – verify they resolve in the changelog on npm
[Migration Guide](/packages/react-native-youtube-bridge/docs/migration-v2.md)may break when the file is rendered on the npm package page (the root differs). Consider replacing with an absolute GitHub URL or a docs website link.
| [Events](https://developers.google.com/youtube/iframe_api_reference#Events) are fired to communicate YouTube iframe API state changes to your application. | ||
|
|
||
| ```tsx | ||
| function App() { | ||
| const playerRef = useRef<PlayerControls>(null); | ||
| The `useYouTubeEvent` hook provides complete type inference and allows you to easily detect and use events in two ways. | ||
|
|
||
| const handleReady = useCallback(() => { | ||
| console.log('Player is ready!'); | ||
| }, []); | ||
| ```tsx | ||
| import { YoutubeView, useYouTubeEvent, useYouTubePlayer } from 'react-native-youtube-bridge'; | ||
|
|
||
| const handleStateChange = useCallback((state: PlayerState) => { | ||
| console.log('Player state changed:', state); | ||
| }, []); | ||
| function App() { | ||
| const player = useYouTubePlayer(videoIdOrUrl); | ||
|
|
||
| const handlePlaybackRateChange = useCallback((rate: number) => { | ||
| console.log('Playback rate changed:', rate); | ||
| }, []); | ||
| const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1); | ||
| const progress = useYouTubeEvent(player, 'progress', progressInterval); | ||
|
|
||
| const handlePlaybackQualityChange = useCallback((quality: string) => { | ||
| console.log('Playback quality changed:', quality); | ||
| }, []); | ||
| useYouTubeEvent(player, 'ready', (playerInfo) => { | ||
| console.log('Player is ready!'); | ||
| Alert.alert('Alert', 'YouTube player is ready!'); | ||
| }); | ||
|
|
||
| const handleAutoplayBlocked = useCallback(() => { | ||
| useYouTubeEvent(player, 'autoplayBlocked', () => { | ||
| console.log('Autoplay was blocked'); | ||
| }, []); | ||
| }); | ||
|
|
||
| const handleError = useCallback((error: YouTubeError) => { | ||
| useYouTubeEvent(player, 'error', (error) => { | ||
| console.error('Player error:', error); | ||
| }, []); | ||
| Alert.alert('Error', `Player error (${error.code}): ${error.message}`); | ||
| }); | ||
|
|
||
| return ( | ||
| <YoutubePlayer | ||
| onReady={handleReady} | ||
| onStateChange={handleStateChange} | ||
| onError={handleError} | ||
| onPlaybackRateChange={handlePlaybackRateChange} | ||
| onPlaybackQualityChange={handlePlaybackQualityChange} | ||
| onAutoplayBlocked={handleAutoplayBlocked} | ||
| /> | ||
| ) | ||
| <YoutubeView player={player} /> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
progressInterval is undefined
The variable is referenced before declaration, which will throw at runtime if users copy the code verbatim. Declare it (or inline the literal) before passing it to the hook.
const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1);
- const progress = useYouTubeEvent(player, 'progress', progressInterval);
+ const progressInterval = 1000; // ms
+ const progress = useYouTubeEvent(player, 'progress', progressInterval);🤖 Prompt for AI Agents
In packages/react-native-youtube-bridge/README.md between lines 67 and 98, the
example code uses the variable progressInterval without declaring it first,
which causes a runtime error if copied as is. Fix this by declaring
progressInterval with an appropriate value before using it in the
useYouTubeEvent hook or replace it inline with a numeric literal to ensure it is
defined.
| YouTube iframe API의 상태 변화를 애플리케이션에 전달하기 위해 [이벤트](https://developers.google.com/youtube/iframe_api_reference#Events)를 발생시킵니다. | ||
|
|
||
| > 🔔 Note - 성능 최적화 및 비정상 동작 방지를 위해 콜백 함수는 `useCallback`으로 감싸주세요. | ||
| `useYouTubeEvent` hook을 사용하여 완벽한 타입 추론을 지원하며, 두 가지 방법으로 이벤트를 쉽게 감지하여 사용할 수 있습니다. | ||
|
|
||
| ```tsx | ||
| function App() { | ||
| const playerRef = useRef<PlayerControls>(null); | ||
|
|
||
| const handleReady = useCallback(() => { | ||
| console.log('플레이어 준비 완료!'); | ||
| }, []); | ||
| import { YoutubeView, useYouTubeEvent, useYouTubePlayer } from 'react-native-youtube-bridge'; | ||
|
|
||
| const handleStateChange = useCallback((state: PlayerState) => { | ||
| console.log('플레이어 상태 변경:', state); | ||
| }, []); | ||
| function App() { | ||
| const player = useYouTubePlayer(videoIdOrUrl); | ||
|
|
||
| const handlePlaybackRateChange = useCallback((rate: number) => { | ||
| console.log('재생 속도 변경:', rate); | ||
| }, []); | ||
| const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1); | ||
| const progress = useYouTubeEvent(player, 'progress', progressInterval); | ||
|
|
||
| const handlePlaybackQualityChange = useCallback((quality: string) => { | ||
| console.log('재생 품질 변경:', quality); | ||
| }, []); | ||
| useYouTubeEvent(player, 'ready', (playerInfo) => { | ||
| console.log('Player is ready!'); | ||
| Alert.alert('Alert', 'YouTube player is ready!'); | ||
| }); | ||
|
|
||
| const handleAutoplayBlocked = useCallback(() => { | ||
| console.log('자동 재생이 차단되었습니다'); | ||
| }, []); | ||
| useYouTubeEvent(player, 'autoplayBlocked', () => { | ||
| console.log('Autoplay was blocked'); | ||
| }); | ||
|
|
||
| const handleError = useCallback((error: YouTubeError) => { | ||
| console.error('플레이어 오류:', error); | ||
| }, []); | ||
| useYouTubeEvent(player, 'error', (error) => { | ||
| console.error('Player error:', error); | ||
| Alert.alert('Error', `Player error (${error.code}): ${error.message}`); | ||
| }); | ||
|
|
||
| return ( | ||
| <YoutubePlayer | ||
| onReady={handleReady} | ||
| onStateChange={handleStateChange} | ||
| onError={handleError} | ||
| onPlaybackRateChange={handlePlaybackRateChange} | ||
| onPlaybackQualityChange={handlePlaybackQualityChange} | ||
| onAutoplayBlocked={handleAutoplayBlocked} | ||
| /> | ||
| ) | ||
| <YoutubeView player={player} /> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
progressInterval 변수가 선언되지 않았습니다
예제를 그대로 복사하면 progressInterval이 정의되지 않아 에러가 발생합니다.
const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1);
- const progress = useYouTubeEvent(player, 'progress', progressInterval);
+ const progressInterval = 1000; // ms
+ const progress = useYouTubeEvent(player, 'progress', progressInterval);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| YouTube iframe API의 상태 변화를 애플리케이션에 전달하기 위해 [이벤트](https://developers.google.com/youtube/iframe_api_reference#Events)를 발생시킵니다. | |
| > 🔔 Note - 성능 최적화 및 비정상 동작 방지를 위해 콜백 함수는 `useCallback`으로 감싸주세요. | |
| `useYouTubeEvent` hook을 사용하여 완벽한 타입 추론을 지원하며, 두 가지 방법으로 이벤트를 쉽게 감지하여 사용할 수 있습니다. | |
| ```tsx | |
| function App() { | |
| const playerRef = useRef<PlayerControls>(null); | |
| const handleReady = useCallback(() => { | |
| console.log('플레이어 준비 완료!'); | |
| }, []); | |
| import { YoutubeView, useYouTubeEvent, useYouTubePlayer } from 'react-native-youtube-bridge'; | |
| const handleStateChange = useCallback((state: PlayerState) => { | |
| console.log('플레이어 상태 변경:', state); | |
| }, []); | |
| function App() { | |
| const player = useYouTubePlayer(videoIdOrUrl); | |
| const handlePlaybackRateChange = useCallback((rate: number) => { | |
| console.log('재생 속도 변경:', rate); | |
| }, []); | |
| const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1); | |
| const progress = useYouTubeEvent(player, 'progress', progressInterval); | |
| const handlePlaybackQualityChange = useCallback((quality: string) => { | |
| console.log('재생 품질 변경:', quality); | |
| }, []); | |
| useYouTubeEvent(player, 'ready', (playerInfo) => { | |
| console.log('Player is ready!'); | |
| Alert.alert('Alert', 'YouTube player is ready!'); | |
| }); | |
| const handleAutoplayBlocked = useCallback(() => { | |
| console.log('자동 재생이 차단되었습니다'); | |
| }, []); | |
| useYouTubeEvent(player, 'autoplayBlocked', () => { | |
| console.log('Autoplay was blocked'); | |
| }); | |
| const handleError = useCallback((error: YouTubeError) => { | |
| console.error('플레이어 오류:', error); | |
| }, []); | |
| useYouTubeEvent(player, 'error', (error) => { | |
| console.error('Player error:', error); | |
| Alert.alert('Error', `Player error (${error.code}): ${error.message}`); | |
| }); | |
| return ( | |
| <YoutubePlayer | |
| onReady={handleReady} | |
| onStateChange={handleStateChange} | |
| onError={handleError} | |
| onPlaybackRateChange={handlePlaybackRateChange} | |
| onPlaybackQualityChange={handlePlaybackQualityChange} | |
| onAutoplayBlocked={handleAutoplayBlocked} | |
| /> | |
| ) | |
| <YoutubeView player={player} /> | |
| ); | |
| } | |
| ``` | |
| const playbackRate = useYouTubeEvent(player, 'playbackRateChange', 1); | |
| const progressInterval = 1000; // ms | |
| const progress = useYouTubeEvent(player, 'progress', progressInterval); |
🤖 Prompt for AI Agents
In README-ko_kr.md between lines 65 and 96, the example code uses the variable
progressInterval without declaring it, causing an error. To fix this, declare
and initialize progressInterval with an appropriate numeric value before using
it in the useYouTubeEvent hook for the 'progress' event. This ensures the
example runs without errors and clearly shows how to use the interval parameter.
Summary by CodeRabbit
New Features
useYouTubePlayeranduseYouTubeEventfor easier player management and event handling.YoutubeViewcomponent for rendering YouTube players using the new API.Bug Fixes
Documentation
Breaking Changes
YoutubePlayercomponent and ref-based API; all event props and ref controls are replaced by the new hooks-based approach.