Skip to content

Commit 323c409

Browse files
chore(release): version packages (#63)
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 0fdeec7 commit 323c409

File tree

9 files changed

+581
-137
lines changed

9 files changed

+581
-137
lines changed

.changeset/funny-moons-hear.md

Lines changed: 0 additions & 133 deletions
This file was deleted.

packages/core/CHANGELOG.md

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,145 @@
11
# @react-native-youtube-bridge/core
22

3+
## 2.0.0
4+
5+
### Major Changes
6+
7+
- ae4cc4d: feat!: introduce hooks-based API for v2.0
8+
9+
> [!important]
10+
> BREAKING CHANGE: **Complete API Redesign with React Hooks**
11+
12+
#### New Hooks-Based Architecture
13+
14+
- **`useYouTubePlayer(videoId, config)`** - Creates a player instance with declarative configuration
15+
- **`useYouTubeEvent(player, eventName, intervalOrDefault?, deps?)`** - Reactive event handling with complete type inference
16+
- **`YoutubeView`** - Simplified view component that accepts a player instance
17+
18+
#### Migration from v1 to v2
19+
20+
**Before (v1):**
21+
22+
```jsx
23+
// Imperative, ref-based API
24+
const playerRef = useRef < PlayerControls > null;
25+
26+
<YoutubePlayer
27+
ref={playerRef}
28+
source={videoId}
29+
onReady={handleReady}
30+
onStateChange={handleStateChange}
31+
onProgress={handleProgress}
32+
playerVars={{ autoplay: true }}
33+
/>;
34+
35+
// Manual event handlers and state management
36+
const [isPlaying, setIsPlaying] = useState(false);
37+
const handleStateChange = (state) =>
38+
setIsPlaying(state === PlayerState.PLAYING);
39+
```
40+
41+
**After (v2):**
42+
43+
```jsx
44+
// Declarative, hooks-based API
45+
const player = useYouTubePlayer(videoId, {
46+
autoplay: true,
47+
controls: true,
48+
playsinline: true,
49+
});
50+
51+
<YoutubeView player={player} />;
52+
53+
// Reactive state with automatic updates - two usage patterns:
54+
55+
// 1. State-based (returns reactive values)
56+
const playbackRate = useYouTubeEvent(player, "playbackRateChange", 1);
57+
const progress = useYouTubeEvent(player, "progress", 1000); // 1000ms interval
58+
const state = useYouTubeEvent(player, "stateChange");
59+
60+
const isPlaying = state === PlayerState.PLAYING;
61+
62+
// 2. Callback-based (for side effects)
63+
useYouTubeEvent(player, "ready", (playerInfo) => {
64+
console.log("Player ready:", playerInfo);
65+
});
66+
67+
useYouTubeEvent(player, "error", (error) => {
68+
console.error("Player error:", error);
69+
});
70+
```
71+
72+
### ✨ New Features
73+
74+
- **Declarative Configuration**: Configure player options directly in `useYouTubePlayer` hook
75+
- **Automatic State Management**: No need to manually manage state for common use cases
76+
- **Reactive Events**: `useYouTubeEvent` with two usage patterns - state-based for reactive values and callback-based for side effects
77+
- **Better TypeScript Support**: Improved type inference and autocomplete
78+
- **Reduced Boilerplate**: Significantly less code required for common operations
79+
- **Automatic Cleanup**: Hooks handle cleanup automatically, preventing memory leaks
80+
81+
### 🎯 Improvements
82+
83+
- **Reduced Coupling**: Eliminated ref dependencies between parent and child components
84+
- **Simplified API**: Fewer props to manage, more intuitive usage patterns
85+
- **Better Developer Experience**: Following established React Native patterns (expo-audio, expo-video)
86+
- **Performance**: More efficient event handling with automatic cleanup
87+
- **Maintainability**: Cleaner separation of concerns
88+
89+
### 📦 Component Changes
90+
91+
#### Removed
92+
93+
-`YoutubePlayer` component (replaced by `YoutubeView`)
94+
-`PlayerControls` ref interface
95+
- ❌ Direct event props (`onReady`, `onStateChange`, `onProgress`, etc.)
96+
97+
#### Added
98+
99+
-`YoutubeView` component
100+
-`useYouTubePlayer` hook
101+
-`useYouTubeEvent` hook
102+
- ✅ Simplified prop interface
103+
104+
### 📚 Migration Guide
105+
106+
For detailed migration examples and step-by-step instructions, see our [Migration Guide](/packages/react-native-youtube-bridge/docs/migration-v2.md).
107+
108+
Key migration steps:
109+
110+
1. **Replace `YoutubePlayer` with `YoutubeView` + `useYouTubePlayer`**
111+
2. **Convert event props to `useYouTubeEvent` hooks** (state-based or callback-based)
112+
3. **Move `playerVars` to `useYouTubePlayer` config**
113+
4. **Replace ref-based method calls with direct player method calls**
114+
5. **Remove manual state management for events**
115+
116+
### ⚠️ Breaking Changes
117+
118+
- **API Surface**: Complete API redesign, no backward compatibility
119+
- **Event Handling**: Manual event listeners replaced with reactive hooks
120+
- **Component Structure**: `YoutubePlayer` split into `YoutubeView` + hooks
121+
122+
### 🐛 Bug Fixes
123+
124+
- Fixed memory leaks from improper event cleanup
125+
- Better handling of rapid video ID changes
126+
- Manage multiple players independently
127+
128+
### 📖 Documentation
129+
130+
- Complete API documentation rewrite
131+
- Added migration guide from v1
132+
- Updated all examples to use v2 API
133+
- Added TypeScript usage examples
134+
135+
***
136+
137+
## Previous Versions
138+
139+
### [1.x.x] - Legacy Version
140+
141+
See [v1 documentation](/packages/react-native-youtube-bridge/docs/v1.md) for the previous imperative API.
142+
3143
## 1.0.3
4144

5145
### Patch Changes

packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-youtube-bridge/core",
3-
"version": "1.0.3",
3+
"version": "2.0.0",
44
"description": "Core package for react-native-youtube-bridge",
55
"main": "dist/index.js",
66
"module": "dist/index.mjs",

0 commit comments

Comments
 (0)