docs: add comprehensive TSDoc for YoutubePlayer props and events

[saseungmin]

• Improve documentation for player events (onReady, onStateChange, etc.)
• Add detailed descriptions for player parameters and configuration

Summary by CodeRabbit

• Documentation
  • Enhanced documentation for YouTube player properties, events, and configuration options, providing clearer descriptions and usage examples.
  • Improved clarity on player event callbacks and player variables for better developer understanding.
  • Updated type definitions for player dimensions with more specific and well-documented options.
  • Added detailed comments to various player-related properties and removed unused imports.

[changeset-bot]

🦋 Changeset detected

Latest commit: f53025f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
react-native-youtube-bridge	Patch
@react-native-youtube-bridge/core	Patch
example	Patch
@react-native-youtube-bridge/react	Patch
@react-native-youtube-bridge/web	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Walkthrough

This change adds comprehensive TSDoc and JSDoc documentation to the YoutubePlayer component's props and events in both the react-native-youtube-bridge and @react-native-youtube-bridge/core packages. Type definitions are clarified, property types refined, and detailed descriptions are provided for better developer understanding. No functional or API changes are introduced.

Changes

File(s)	Change Summary
.changeset/bumpy-frogs-appear.md	Adds a changeset entry summarizing the improved documentation for player props and events.
packages/core/src/types/index.ts	Adds detailed JSDoc to PlayerEvents, YoutubePlayerVars, and PlayerControls types.
packages/react-native-youtube-bridge/src/types/youtube.ts	Enhances JSDoc for YoutubePlayerProps properties; refines width/height types; removes unused import.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant YoutubePlayer Component (Types)
    participant Documentation

    Developer->>YoutubePlayer Component (Types): Reads prop/event types
    YoutubePlayer Component (Types)->>Documentation: Provides detailed descriptions and usage notes
    Developer->>Documentation: Consults for property/event behavior and examples

Loading

Possibly related PRs

• fix(types): preserve TSDoc in YoutubePlayer component props #52: Both PRs enhance TSDoc comments and type annotations for YoutubePlayerProps, focusing on documentation and typing improvements.
• fix: change props name from webviewProps to webViewProps #13: Both PRs modify the webViewProps property in YoutubePlayerProps; this PR documents it, while the other fixes its casing.
• fix: override webview source props (header, method, body) #36: Both PRs refine typings and documentation for YoutubePlayerProps, specifically around webViewProps and its handling.

Poem

In fields of docs where type hints grow,
The YoutubePlayer now lets you know—
With comments clear and details bright,
Each prop explained, each event in sight.
Now bunnies code with greater cheer,
For documentation's finally here!
🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ed28e69 and f53025f.

📒 Files selected for processing (3)

• .changeset/bumpy-frogs-appear.md (1 hunks)
• packages/core/src/types/index.ts (2 hunks)
• packages/react-native-youtube-bridge/src/types/youtube.ts (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

packages/react-native-youtube-bridge/src/types/youtube.ts (1)

packages/core/src/types/index.ts (1)

• YouTubeSource (6-6)

🔇 Additional comments (7)

packages/core/src/types/index.ts (3)

53-94: Excellent documentation for PlayerEvents type.

The JSDoc comments provide comprehensive descriptions for all event callbacks with proper parameter documentation and helpful references to the YouTube IFrame API. The descriptions clearly explain when each event fires and what data developers can expect.

---

96-146: Thorough documentation for YoutubePlayerVars with important implementation notes.

The documentation includes valuable context such as:

• Browser autoplay policy considerations for the autoplay parameter
• Clear explanations of default values and behaviors
• Detailed explanation of iOS-specific playsinline behavior
• Important note about YouTube's API changes for the rel parameter

This will significantly help developers understand the nuances of each parameter.

---

154-157: Good addition of JSDoc header for PlayerControls type.

The documentation block properly references the YouTube IFrame API Functions documentation, providing developers with a clear reference for understanding the available control methods.

.changeset/bumpy-frogs-appear.md (1)

1-9: Properly formatted changeset for documentation improvements.

The changeset correctly identifies this as a patch-level change affecting both packages and accurately describes the documentation enhancements being made.

packages/react-native-youtube-bridge/src/types/youtube.ts (3)

8-17: Excellent documentation for source prop with practical examples.

The JSDoc provides clear examples showing all three supported formats for the YouTube source, which will help developers understand the flexibility of this prop.

---

18-25: Good type refinement for width and height props.

The change from DimensionValue to number | 'auto' | \${number}%`` is more specific and self-documenting. This provides better type safety while maintaining the same functionality, and the JSDoc comments add clarity.

---

47-62: Concise but adequate documentation for WebView and iframe styling props.

The JSDoc comments clearly identify the purpose of each styling prop and include appropriate platform annotations to help developers understand when each prop applies.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[cloudflare-workers-and-pages]

Deploying react-native-youtube-bridge-example with    Cloudflare Pages

Latest commit:	f53025f
Status:	✅  Deploy successful!
Preview URL:	https://f6e4d9d6.react-native-youtube-bridge-example.pages.dev
Branch Preview URL:	https://docs-improve-ts-docs.react-native-youtube-bridge-example.pages.dev

View logs