diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 0c05fd6..0000000 --- a/babel.config.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - overrides: [ - { - exclude: /\/node_modules\//, - presets: ['module:react-native-builder-bob/babel-preset'], - }, - { - include: /\/node_modules\//, - presets: ['module:@react-native/babel-preset'], - }, - ], -}; diff --git a/packages/react-native-youtube-bridge/LICENSE b/packages/react-native-youtube-bridge/LICENSE new file mode 100644 index 0000000..92458fb --- /dev/null +++ b/packages/react-native-youtube-bridge/LICENSE @@ -0,0 +1,20 @@ +MIT License + +Copyright (c) 2025 saseungmin +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/react-native-youtube-bridge/README-ko_kr.md b/packages/react-native-youtube-bridge/README-ko_kr.md index 65169e3..447c6d2 100644 --- a/packages/react-native-youtube-bridge/README-ko_kr.md +++ b/packages/react-native-youtube-bridge/README-ko_kr.md @@ -239,7 +239,9 @@ function App() { YouTube 플레이어 렌더링 방식을 제어하고 호환성을 위한 소스 URL을 설정합니다. 1. **인라인 HTML 모드** (`useInlineHtml: true`)는 앱 내에서 직접 HTML을 로드하여 플레이어를 렌더링합니다. (default) -2. **웹뷰 모드** (`useInlineHtml: false`)는 외부 플레이어 페이지를 로드합니다. 기본 URI는 https://react-native-youtube-bridge.pages.dev 입니다. +2. **웹뷰 모드** (`useInlineHtml: false`)는 외부 플레이어 페이지를 로드합니다. + - 기본 URI는 https://react-native-youtube-bridge.pages.dev 입니다. + - 직접 제작한 커스텀 플레이어 페이지를 외부 웹뷰로 사용하려면, `@react-native-youtube-bridge/web`으로 플레이어를 구축한 후 `webViewUrl`에 해당 URL을 설정하세요. 자세한 구현 방법은 [웹 플레이어 가이드](../web/)를 참고해 주세요. > [!NOTE] > **webViewUrl 활용법** @@ -264,9 +266,25 @@ YouTube 플레이어 렌더링 방식을 제어하고 호환성을 위한 소스 /> ``` +**커스텀 플레이어 페이지** + +직접 제작한 커스텀 플레이어 페이지를 사용하려면, `@react-native-youtube-bridge/web`을 활용하여 React 기반의 플레이어 페이지를 구축할 수 있습니다. + +```tsx +import { YoutubePlayer } from '@react-native-youtube-bridge/web'; + +function CustomPlayerPage() { + return ; +} + +export default CustomPlayerPage; +``` + +> 자세한 내용은 [웹 플레이어 가이드](../web/)를 참고해 주세요. + ## 기여하기 -리포지토리 기여 방법과 개발 워크플로우를 알아보려면 [기여 가이드](CONTRIBUTING.md)를 참고하세요. +리포지토리 기여 방법과 개발 워크플로우를 알아보려면 [기여 가이드](/CONTRIBUTING.md)를 참고하세요. ## 라이선스 diff --git a/packages/react-native-youtube-bridge/README.md b/packages/react-native-youtube-bridge/README.md index 6522106..23e963a 100644 --- a/packages/react-native-youtube-bridge/README.md +++ b/packages/react-native-youtube-bridge/README.md @@ -239,7 +239,9 @@ function App() { Control YouTube player rendering method and configure source URLs for compatibility. 1. **Inline HTML Mode** (`useInlineHtml: true`) renders the player by loading HTML directly within the app. (default) -2. **WebView Mode** (`useInlineHtml: false`) loads an external player page. The default URI is https://react-native-youtube-bridge.pages.dev. +2. **WebView Mode** (`useInlineHtml: false`) loads an external player page. + - The default URI is https://react-native-youtube-bridge.pages.dev. + - To use your own custom player page as an external WebView, build your player with `@react-native-youtube-bridge/web` and set the URL in the `webViewUrl` property. For detailed implementation instructions, please refer to the [Web Player Guide](../web/). > [!NOTE] > **webViewUrl Usage** @@ -264,9 +266,25 @@ Control YouTube player rendering method and configure source URLs for compatibil /> ``` +**Custom Player Page** + +To use your own custom player page, you can build a React-based player using `@react-native-youtube-bridge/web`. + +```tsx +import { YoutubePlayer } from '@react-native-youtube-bridge/web'; + +function CustomPlayerPage() { + return ; +} + +export default CustomPlayerPage; +``` + +> For more details, please refer to the [Web Player Guide](../web/). + ## Contributing -See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. +See the [contributing guide](/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License diff --git a/packages/web/LICENSE b/packages/web/LICENSE new file mode 100644 index 0000000..92458fb --- /dev/null +++ b/packages/web/LICENSE @@ -0,0 +1,20 @@ +MIT License + +Copyright (c) 2025 saseungmin +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/web/README-ko_kr.md b/packages/web/README-ko_kr.md new file mode 100644 index 0000000..f18846b --- /dev/null +++ b/packages/web/README-ko_kr.md @@ -0,0 +1,75 @@ +# React Native Youtube Bridge Web + +> [English](./README.md) | 한국어 + +React Native 환경에서 [`react-native-youtube-bridge`](https://github.com/react-native-bridges/react-native-youtube-bridge)와 함께 사용할 수 있는 외부 웹뷰용 YouTube 플레이어 라이브러리입니다. + +## 개요 + +이 라이브러리는 React Native 애플리케이션에서 YouTube 동영상을 재생할 때, 커스텀 웹 페이지를 통해 외부 웹뷰를 구현하고자 하는 경우에 유용합니다. + +## 사용 사례 + +React Native 환경에서는 다음과 같은 두 가지 방법으로 YouTube iframe을 WebView에서 사용할 수 있습니다: + +```tsx +function App() { + return ( + <> + {/* 방법 1: 인라인 HTML 사용 (기본값) */} + + + {/* 방법 2: 외부 웹뷰 페이지 사용 */} + + + ) +} +``` + +현재는 기본 정적 사이트(https://react-native-youtube-bridge.pages.dev)를 외부 웹뷰 URL로 사용하고 있습니다. + +만약 직접 제작한 커스텀 플레이어 페이지를 사용하고 싶다면, `webViewUrl` 속성에 해당 URL을 전달하면 됩니다. 이때 `@react-native-youtube-bridge/web`을 활용하여 React 기반의 커스텀 플레이어 페이지를 손쉽게 구축할 수 있습니다. + +## 설치 + +```bash +# npm +npm install @react-native-youtube-bridge/web + +# pnpm +pnpm add @react-native-youtube-bridge/web + +# yarn +yarn add @react-native-youtube-bridge/web + +# bun +bun add @react-native-youtube-bridge/web +``` + +## 사용법 + +```tsx +import { YoutubePlayer } from '@react-native-youtube-bridge/web'; + +function CustomPlayerPage() { + return ; +} + +export default CustomPlayerPage; +``` + +## 기여하기 + +프로젝트 기여 방법과 개발 워크플로우에 대한 자세한 내용은 [기여 가이드](./CONTRIBUTING.md)를 참고해 주세요. + +## 라이센스 + +[MIT](./LICENSE) diff --git a/packages/web/README.md b/packages/web/README.md new file mode 100644 index 0000000..089f6b9 --- /dev/null +++ b/packages/web/README.md @@ -0,0 +1,75 @@ +# React Native Youtube Bridge Web + +> English | [한국어](./README-ko_kr.md) + +A YouTube player library for external WebView implementation, designed to work seamlessly with [`react-native-youtube-bridge`](https://github.com/react-native-bridges/react-native-youtube-bridge) in React Native environments. + +## Overview + +This library is useful when you want to implement external WebView functionality through custom web pages for playing YouTube videos in React Native applications. + +## Use Cases + +In React Native environments, you can use YouTube iframe in WebView through two different approaches: + +```tsx +function App() { + return ( + <> + {/* Method 1: Using inline HTML (default) */} + + + {/* Method 2: Using external WebView page */} + + + ) +} +``` + +Currently, the default static site (https://react-native-youtube-bridge.pages.dev) is being used as the external WebView URL. + +If you want to use your own custom player page, simply pass the URL to the `webViewUrl` property. You can easily build a React-based custom player page using `@react-native-youtube-bridge/web`. + +## Installation + +```bash +# npm +npm install @react-native-youtube-bridge/web + +# pnpm +pnpm add @react-native-youtube-bridge/web + +# yarn +yarn add @react-native-youtube-bridge/web + +# bun +bun add @react-native-youtube-bridge/web +``` + +## Usage + +```tsx +import { YoutubePlayer } from '@react-native-youtube-bridge/web'; + +function CustomPlayerPage() { + return ; +} + +export default CustomPlayerPage; +``` + +## Contributing + +Please refer to the [Contributing Guide](./CONTRIBUTING.md) for detailed information about how to contribute to this project and our development workflow. + +## License + +[MIT](./LICENSE)