Skip to content

Commit 89be322

Browse files
saseungminsaseungmin
committed
refactor: rename VimeoPlayerInstance to VimeoPlayer and component to VimeoView
- Rename VimeoPlayerInstance class to VimeoPlayer for clearer API - Rename VimeoPlayer component to VimeoView following expo-video pattern - Separate concerns: VimeoPlayer handles logic/control, VimeoView handles UI rendering - Improves developer experience with familiar naming conventions - update readme
1 parent db43147 commit 89be322

File tree

13 files changed

+77
-90
lines changed

13 files changed

+77
-90
lines changed

‎README-ko_kr.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ React Native에서 Vimeo 플레이어를 사용하기 위해 복잡한 설정과
1414
- ✅ **크로스 플랫폼** - iOS, Android, Web 모든 플랫폼 지원
1515
- ✅ **New Architecture 호환** - React Native의 최신 아키텍처 완벽 지원
1616
- ✅ **풍부한 API** - Vimeo Player JS API의 모든 핵심 기능 지원
17-
- ✅ **React다운 설계** - Hook 기반의 직관적이고 사용하기 쉬운 API
17+
- ✅ **React Native 개발** - Expo의 Hook 기반 방식처럼, 직관적이고 사용하기 쉬운 API를 제공
1818
- ✅ **Expo 호환** - Expo 프로젝트에서도 바로 사용 가능
1919

2020
## 빠른 시작
@@ -49,13 +49,13 @@ bun add react-native-vimeo-bridge
4949
### 기본 사용법
5050

5151
```tsx
52-
import { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
52+
import { useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
5353

5454
function App() {
5555
const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');
5656

5757
return (
58-
<VimeoPlayer player={player} />
58+
<VimeoView player={player} />
5959
);
6060
}
6161
```
@@ -65,7 +65,7 @@ function App() {
6565
Vimeo Player의 상태 변화를 실시간으로 감지하고 반응할 수 있습니다. `useVimeoEvent` Hook을 사용해 두 가지 방식으로 [이벤트](https://github.com/vimeo/player.js/#events)를 구독할 수 있습니다.
6666

6767
```tsx
68-
import { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
68+
import { useVimeoEvent, useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
6969

7070
function App() {
7171
const [isPlaying, setIsPlaying] = useState(false);
@@ -88,7 +88,7 @@ function App() {
8888
console.log('현재 재생 시간:', timeupdateState?.seconds);
8989

9090
return (
91-
<VimeoPlayer player={player} />
91+
<VimeoView player={player} />
9292
);
9393
}
9494
```
@@ -98,7 +98,7 @@ function App() {
9898
Vimeo Player의 [메서드](https://github.com/vimeo/player.js/#methods)를 통해 재생, 일시정지, 시간 이동, 볼륨 조절 등 다양한 기능을 프로그래밍 방식으로 제어할 수 있습니다.
9999

100100
```tsx
101-
import { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
101+
import { useVimeoEvent, useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
102102

103103
function App() {
104104
const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');
@@ -122,7 +122,7 @@ function App() {
122122

123123
return (
124124
<View>
125-
<VimeoPlayer player={player} />
125+
<VimeoView player={player} />
126126

127127
<View style={styles.controls}>
128128
<TouchableOpacity onPress={() => seekTo(currentTime - 10)}>
@@ -147,7 +147,7 @@ function App() {
147147
Vimeo Player의 [임베드 옵션](https://developer.vimeo.com/player/sdk/embed)을 통해 초기 설정을 커스터마이징할 수 있습니다.
148148

149149
```tsx
150-
import { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
150+
import { useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
151151

152152
function App() {
153153
const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e', {
@@ -159,7 +159,7 @@ function App() {
159159
});
160160

161161
return (
162-
<VimeoPlayer player={player} />
162+
<VimeoView player={player} />
163163
);
164164
}
165165
```
@@ -169,11 +169,11 @@ function App() {
169169
플레이어의 iframe 또는 webview를 커스터마이징할 수 있습니다.
170170

171171
```tsx
172-
import { VimeoPlayer } from 'react-native-vimeo-bridge';
172+
import { VimeoView } from 'react-native-vimeo-bridge';
173173

174174
function App() {
175175
return (
176-
<VimeoPlayer
176+
<VimeoView
177177
player={player}
178178
height={400}
179179
width="100%"

‎README.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ With the lack of actively maintained Vimeo player libraries for React Native, `r
1414
- ✅ **Cross-Platform** - Works on iOS, Android, and Web
1515
- ✅ **New Architecture Compatible** - Full support for React Native's latest architecture
1616
- ✅ **Rich API Support** - Access to all core Vimeo Player JS API features
17-
- ✅ **React-Native Design** - Intuitive, easy-to-use Hook-based API
17+
- ✅ **React Native Development** - Provides an intuitive, easy-to-use Hook-based API, much like Expo's approach
1818
- ✅ **Expo Compatible** - Ready to use in Expo projects
1919

2020
## Quick Start
@@ -49,13 +49,13 @@ bun add react-native-vimeo-bridge
4949
### Basic Usage
5050

5151
```tsx
52-
import { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
52+
import { useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
5353

5454
function App() {
5555
const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');
5656

5757
return (
58-
<VimeoPlayer player={player} />
58+
<VimeoView player={player} />
5959
);
6060
}
6161
```
@@ -65,7 +65,7 @@ function App() {
6565
Listen to Vimeo Player state changes in real-time. Use the `useVimeoEvent` Hook to subscribe to [events](https://github.com/vimeo/player.js/#events) in two ways.
6666

6767
```tsx
68-
import { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
68+
import { useVimeoEvent, useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
6969

7070
function App() {
7171
const [isPlaying, setIsPlaying] = useState(false);
@@ -88,7 +88,7 @@ function App() {
8888
console.log('Current time:', timeupdateState?.seconds);
8989

9090
return (
91-
<VimeoPlayer player={player} />
91+
<VimeoView player={player} />
9292
);
9393
}
9494
```
@@ -98,7 +98,7 @@ function App() {
9898
Control various player functions programmatically through Vimeo Player [methods](https://github.com/vimeo/player.js/#methods) such as play, pause, seek, volume control, and more.
9999

100100
```tsx
101-
import { useVimeoEvent, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
101+
import { useVimeoEvent, useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
102102

103103
function App() {
104104
const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e');
@@ -122,7 +122,7 @@ function App() {
122122

123123
return (
124124
<View>
125-
<VimeoPlayer player={player} />
125+
<VimeoView player={player} />
126126

127127
<View style={styles.controls}>
128128
<TouchableOpacity onPress={() => seekTo(currentTime - 10)}>
@@ -147,7 +147,7 @@ function App() {
147147
Customize initial settings through Vimeo Player [embed options](https://developer.vimeo.com/player/sdk/embed).
148148

149149
```tsx
150-
import { useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
150+
import { useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
151151

152152
function App() {
153153
const player = useVimeoPlayer('https://player.vimeo.com/video/76979871?h=8272103f6e', {
@@ -159,7 +159,7 @@ function App() {
159159
});
160160

161161
return (
162-
<VimeoPlayer player={player} />
162+
<VimeoView player={player} />
163163
);
164164
}
165165
```
@@ -169,11 +169,11 @@ function App() {
169169
Customize the player's iframe or webview styling.
170170

171171
```tsx
172-
import { VimeoPlayer } from 'react-native-vimeo-bridge';
172+
import { VimeoView } from 'react-native-vimeo-bridge';
173173

174174
function App() {
175175
return (
176-
<VimeoPlayer
176+
<VimeoView
177177
player={player}
178178
height={400}
179179
width="100%"

‎example/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useCallback, useEffect, useState } from 'react';
22
import { Alert, Platform, SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
3-
import { useVimeoEvent, useVimeoOEmbed, useVimeoPlayer, VimeoPlayer } from 'react-native-vimeo-bridge';
3+
import { useVimeoEvent, useVimeoOEmbed, useVimeoPlayer, VimeoView } from 'react-native-vimeo-bridge';
44

55
const safeNumber = (value: number | undefined): number => {
66
return value ?? 0;
@@ -130,7 +130,7 @@ function App() {
130130
<Text style={styles.subtitle}>Video ID: {videoId}</Text>
131131
<Text style={styles.subtitle}>Playback rate: {playbackRate?.playbackRate ?? 1}x</Text>
132132
</View>
133-
<VimeoPlayer
133+
<VimeoView
134134
player={player}
135135
height={Platform.OS === 'web' ? 'auto' : undefined}
136136
webViewProps={{

‎src/VimeoPlayer.tsx‎ renamed to ‎src/VimeoView.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,15 @@ import { type DataDetectorTypes, Dimensions, StyleSheet } from 'react-native';
33
import WebView, { type WebViewMessageEvent } from 'react-native-webview';
44
import WebviewVimeoPlayerController from './module/WebviewVimeoPlayerController';
55
import { INTERNAL_SET_CONTROLLER_INSTANCE } from './symbol';
6-
import type { VimeoPlayerProps } from './types';
6+
import type { VimeoViewProps } from './types';
77
import type { CommandResult, ReadyResult } from './types/message';
8-
import type { VimeoPlayerEventMap, VimeoPlayerOptions } from './types/vimeo';
8+
import type { VimeoPlayerEventMap } from './types/vimeo';
99
import { webviewScripts } from './utils/webviewScripts';
10-
import VimeoPlayerWrapper from './VimeoPlayerWrapper';
10+
import VimeoViewWrapper from './VimeoViewWrapper';
1111

1212
const { width: screenWidth } = Dimensions.get('window');
1313

14-
const VimeoPlayer = ({
15-
player,
16-
height = 200,
17-
width = screenWidth,
18-
style,
19-
webViewProps,
20-
webViewStyle,
21-
}: VimeoPlayerProps) => {
14+
function VimeoView({ player, height = 200, width = screenWidth, style, webViewProps, webViewStyle }: VimeoViewProps) {
2215
const webViewRef = useRef<WebView>(null);
2316
const playerRef = useRef<WebviewVimeoPlayerController>(null);
2417

@@ -78,7 +71,7 @@ const VimeoPlayer = ({
7871

7972
const embedOptions = player.getOptions();
8073

81-
const options: VimeoPlayerOptions = {
74+
const options = {
8275
url: sourceUri,
8376
...embedOptions,
8477
};
@@ -209,7 +202,7 @@ const VimeoPlayer = ({
209202
}, []);
210203

211204
return (
212-
<VimeoPlayerWrapper width={width} height={height} style={style}>
205+
<VimeoViewWrapper width={width} height={height} style={style}>
213206
<WebView
214207
domStorageEnabled
215208
allowsFullscreenVideo
@@ -232,16 +225,14 @@ const VimeoPlayer = ({
232225
source={{ html: createPlayerHTML() }}
233226
onMessage={handleMessage}
234227
/>
235-
</VimeoPlayerWrapper>
228+
</VimeoViewWrapper>
236229
);
237-
};
230+
}
238231

239232
const styles = StyleSheet.create({
240233
webView: {
241234
backgroundColor: 'transparent',
242235
},
243236
});
244237

245-
VimeoPlayer.displayName = 'VimeoPlayer';
246-
247-
export default VimeoPlayer;
238+
export default VimeoView;

‎src/VimeoPlayer.web.tsx‎ renamed to ‎src/VimeoView.web.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import { useEffect, useRef, useState } from 'react';
22
import { useWindowDimensions } from 'react-native';
33
import WebVimeoPlayerController from './module/WebVimeoPlayerController';
44
import { INTERNAL_SET_CONTROLLER_INSTANCE } from './symbol';
5-
import type { VimeoPlayerProps } from './types';
6-
import VimeoPlayerWrapper from './VimeoPlayerWrapper';
5+
import type { VimeoViewProps } from './types';
6+
import VimeoViewWrapper from './VimeoViewWrapper';
77

8-
const VimeoPlayer = ({ player, height = 200, width, style, iframeStyle }: VimeoPlayerProps) => {
8+
function VimeoView({ player, height = 200, width, style, iframeStyle }: VimeoViewProps) {
99
const containerRef = useRef<HTMLDivElement>(null);
10-
const [isInitialized, setIsInitialized] = useState(false);
1110
const playerRef = useRef<WebVimeoPlayerController | null>(null);
1211

12+
const [isInitialized, setIsInitialized] = useState(false);
13+
1314
const { width: screenWidth } = useWindowDimensions();
1415

1516
useEffect(() => {
@@ -54,7 +55,7 @@ const VimeoPlayer = ({ player, height = 200, width, style, iframeStyle }: VimeoP
5455
}, []);
5556

5657
return (
57-
<VimeoPlayerWrapper width={width ?? screenWidth} height={height} style={style}>
58+
<VimeoViewWrapper width={width ?? screenWidth} height={height} style={style}>
5859
<div
5960
ref={containerRef}
6061
style={{
@@ -63,10 +64,8 @@ const VimeoPlayer = ({ player, height = 200, width, style, iframeStyle }: VimeoP
6364
...iframeStyle,
6465
}}
6566
/>
66-
</VimeoPlayerWrapper>
67+
</VimeoViewWrapper>
6768
);
68-
};
69-
70-
VimeoPlayer.displayName = 'VimeoPlayer';
69+
}
7170

72-
export default VimeoPlayer;
71+
export default VimeoView;

‎src/VimeoPlayerWrapper.tsx‎ renamed to ‎src/VimeoViewWrapper.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import type { ReactNode } from 'react';
22
import { type DimensionValue, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
33

4-
type VimeoPlayerWrapperProps = {
4+
type VimeoViewWrapperProps = {
55
children: ReactNode;
66
width?: DimensionValue;
77
height?: DimensionValue;
88
style?: StyleProp<ViewStyle>;
99
};
1010

11-
function VimeoPlayerWrapper({ children, width, height, style }: VimeoPlayerWrapperProps) {
11+
function VimeoViewWrapper({ children, width, height, style }: VimeoViewWrapperProps) {
1212
const safeStyles = StyleSheet.flatten([styles.container, { width, height }, style]);
1313

1414
return <View style={safeStyles}>{children}</View>;
@@ -21,4 +21,4 @@ const styles = StyleSheet.create({
2121
},
2222
});
2323

24-
export default VimeoPlayerWrapper;
24+
export default VimeoViewWrapper;

‎src/hooks/useVimeoEvent.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useRef, useState } from 'react';
2-
import type VimeoPlayerInstance from '../module/VimeoPlayerInstance';
2+
import type VimeoPlayer from '../module/VimeoPlayer';
33
import type { VimeoPlayerStatus } from '../types';
44
import type { EventCallback, VimeoPlayerEventMap } from '../types/vimeo';
55

@@ -11,7 +11,7 @@ import type { EventCallback, VimeoPlayerEventMap } from '../types/vimeo';
1111
* @returns void
1212
*/
1313
function useVimeoEvent<T extends keyof VimeoPlayerEventMap>(
14-
player: VimeoPlayerInstance,
14+
player: VimeoPlayer,
1515
eventType: T,
1616
callback: EventCallback<VimeoPlayerEventMap[T]>,
1717
deps?: React.DependencyList,
@@ -24,7 +24,7 @@ function useVimeoEvent<T extends keyof VimeoPlayerEventMap>(
2424
* @returns The event data.
2525
*/
2626
function useVimeoEvent(
27-
player: VimeoPlayerInstance,
27+
player: VimeoPlayer,
2828
eventType: 'timeupdate',
2929
throttleMs?: number,
3030
): VimeoPlayerStatus['timeupdate'] | null;
@@ -35,7 +35,7 @@ function useVimeoEvent(
3535
* @returns The event data.
3636
*/
3737
function useVimeoEvent<T extends Exclude<keyof VimeoPlayerStatus, 'timeupdate'>>(
38-
player: VimeoPlayerInstance,
38+
player: VimeoPlayer,
3939
eventType: T,
4040
): VimeoPlayerStatus[T] | null;
4141

@@ -47,7 +47,7 @@ function useVimeoEvent<T extends Exclude<keyof VimeoPlayerStatus, 'timeupdate'>>
4747
* @returns The event data. If it is a callback, it will return `undefined`.
4848
*/
4949
function useVimeoEvent<T extends keyof VimeoPlayerEventMap>(
50-
player: VimeoPlayerInstance,
50+
player: VimeoPlayer,
5151
eventType: T,
5252
callbackOrThrottle?: EventCallback<VimeoPlayerEventMap[T]> | number,
5353
deps?: React.DependencyList,

‎src/hooks/useVimeoOEmbed.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
22
import type { VimeoEmbedOptions } from '../types';
33
import { createVimeoOEmbedUrl } from '../utils';
44

5-
type VimeoOEmbed = {
5+
export type VimeoOEmbed = {
66
type: 'video';
77
version: string;
88
provider_name: 'Vimeo';

0 commit comments

Comments
 (0)