docs: add initial README with Korean and English versions #6
Conversation
- Add comprehensive Korean documentation - Add English README for international users - Include installation, usage, and examples - Set up multilingual documentation structure - Update CONTRIBUTING.md
WalkthroughThis update revises documentation and example usage for the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App (example/src/App.tsx)
participant YoutubePlayer
User->>App (example/src/App.tsx): Loads App
App->>YoutubePlayer: Renders YoutubePlayer component
YoutubePlayer-->>App: Triggers onReady(playerInfo)
App->>App: handleReady(playerInfo) (synchronous, logs info)
YoutubePlayer-->>App: Triggers onStateChange(state)
App->>App: handleStateChange(state) (memoized with useCallback)
Possibly related PRs
Poem
🪧 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 with
|
| Latest commit: |
5afdac2
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://438d86e8.react-native-youtube-bridge.pages.dev |
| Branch Preview URL: | https://docs-add-readme.react-native-youtube-bridge.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: 1
🧹 Nitpick comments (4)
CONTRIBUTING.md (3)
12-17: Doc still instructs to run plainbun; update to the explicitbun installyou introduced.The command description on L12-13 no longer matches the code block below (L15-16). Newcomers who copy the text will get an “unknown command” error in Bun ≥1.x.
-To get started with the project, run `bun` in the root directory to install the required dependencies for each package: +To get started with the project, run `bun install` in the root directory (and again inside `example/`) to install the required dependencies:
57-63: ESLint is referenced even though the project migrated to Biome.Lines 57-63 still talk about “ESLint” while the tooling section now says we use Biome. This is misleading and will confuse contributors who try to run the wrong linter.
-Make sure your code passes TypeScript and ESLint. Run the following to verify: +Make sure your code passes TypeScript checks and Biome linting. Run the following to verify:Also update the command comment to: “Biome lint”.
105-108: Script descriptions not updated for Biome.The bullet line still says “lint files with ESLint”. Replace with “lint & format files with Biome” to stay consistent.
- - `bun run lint`: lint files with ESLint. + - `bun run lint`: lint & format files with Biome.example/src/App.tsx (1)
30-50: Missing dependency array values can cause stale closure when you add state later.
handleReadyis memoised with[]but mutates several pieces of component state (setAvailableRates,setVolume,setIsMuted).
Although setter references are stable today, if you later read any of those state values inside the callback you’ll introduce a stale-closure bug that React won’t warn about.Consider the safer pattern of omitting
useCallbackhere (ready fires once) or including the minimally required deps.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
CONTRIBUTING.md(2 hunks)README-ko_kr.md(1 hunks)README.md(1 hunks)example/src/App.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
example/src/App.tsx (1)
src/types/youtube.ts (1)
PlayerInfo(74-88)
🔇 Additional comments (2)
example/src/App.tsx (1)
52-76:handleStateChangeignoresvideoIdand other dynamic values by design—confirm this is intended.Because the dependency array is empty, the function instance will never update even if props such as
videoIdchange at runtime.
If you deliberately want the previous behaviour (one stable handler) this is fine; otherwise add dependencies.README-ko_kr.md (1)
3-3: Broken language toggle link in the English README, not here.Nothing to change in this Korean file, but note that the English README points to
README.ko.mdwhile the actual file name isREADME-ko_kr.md. Fixing the English link will prevent a 404.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
README.md (3)
3-3: Make the language switcher symmetricThe English option isn’t linked—consider hyperlinking both languages for consistency:
- > English | [한국어](./README-ko_kr.md) + > [English](./README.md) | [한국어](./README-ko_kr.md)
38-46: Add necessary React imports in usage snippetThe snippet only imports
YoutubePlayer. For completeness, include at least:+ import React from 'react'; + import { View } from 'react-native'; import { YoutubePlayer } from 'react-native-youtube-bridge';
53-92: Enrich event handler snippet with imports and contextThe callbacks example omits imports for
useCallback,useRef, andReact Nativeprimitives (e.g.,View,Text,TouchableOpacity). Consider adding these to make the snippet copy-paste ready.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
README.md(1 hunks)
🔇 Additional comments (10)
README.md (10)
6-7: Overview section content looks solidThe prose clearly explains the gap and the value proposition.
10-10: Introduction paragraph is clearThe description of the iframe API usage is concise and accurate.
11-18: Feature list is comprehensiveAll key features are covered and well-formatted.
26-34: Installation instructions are clearThe bash snippet demonstrates all supported package managers with proper syntax highlighting.
98-115: Functions snippet is accurateThe example clearly shows how to call player functions via ref. No changes needed.
158-169: Player parameters snippet is correctThe
playerVarsexample is well-formed and covers common use cases.
178-209: Styles snippet clearly demonstrates customizationPlatform‐specific style props and general styling are shown effectively.
217-224: Playback progress tracking example is well-detailedThe
onProgresscallback and state usage are illustrated correctly.
236-237: Contributing section link is validThe link to
CONTRIBUTING.mdresolves correctly and guides contributors.
240-241: License link is correctThe
[MIT](./LICENSE)reference is accurate and prominently placed.
| @@ -1,20 +1,240 @@ | |||
| # [WIP] react-native-youtube-bridge | |||
| # React Native Youtube Bridge | |||
There was a problem hiding this comment.
Correct branding: capitalize “YouTube” properly
The title uses “Youtube” instead of the official “YouTube” casing.
Apply this diff to fix it:
- # React Native Youtube Bridge
+ # React Native YouTube Bridge📝 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.
| # React Native Youtube Bridge | |
| # React Native YouTube Bridge |
🤖 Prompt for AI Agents
In README.md at line 1, the project title uses incorrect casing for "YouTube".
Change "Youtube" to "YouTube" to reflect the correct branding.
| - ✅ Expo support | ||
|
|
||
| ## Example | ||
| > For a quick start, check out the [example](/example/). |
There was a problem hiding this comment.
Fix relative link to example directory
The link [example](/example/) is absolute and may 404 on GitHub—use a relative path:
- > For a quick start, check out the [example](/example/).
+ > For a quick start, check out the [example](./example/).📝 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.
| > For a quick start, check out the [example](/example/). | |
| > For a quick start, check out the [example](./example/). |
🤖 Prompt for AI Agents
In README.md at line 20, the link to the example directory is currently an
absolute path (/example/) which can cause a 404 error on GitHub. Change the link
to a relative path by removing the leading slash so it reads [example](example/)
to ensure it correctly points to the example directory within the repository.
Summary by CodeRabbit
Documentation
Refactor