-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of https://github.com/smosco/react-player-plug…
- Loading branch information
Showing
9 changed files
with
700 additions
and
459 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,21 @@ | ||
| ### 📄 Description of the PR | ||
|
|
||
| - 기능 설명 : | ||
| - Close # (이슈 번호) | ||
| - **Feature Description**: | ||
| - Closes # (issue number) | ||
|
|
||
| ### 🔧 What has been changed? | ||
|
|
||
| <!-- 이번 PR에서의 변경점 (- 코드 변경, 기능 추가, 버그 수정 등.)--> | ||
| <!-- Describe the changes made in this PR (code modifications, new features, bug fixes, etc.) --> | ||
|
|
||
| ### 📸 Screenshots / GIFs (if applicable) | ||
|
|
||
| <!-- 가능하다면 스크린샷이나 GIF를 첨부해주세요 --> | ||
| <!-- Attach screenshots or GIFs if available --> | ||
|
|
||
| ### ⚠️ Precaution & Known issues | ||
| ### ⚠️ Precaution & Known Issues | ||
|
|
||
| <!-- 리뷰할 때 고려해야 할 부분, 수정이 필요한 부분, 아직 해결되지 않는 문제, 개선해야 할 사항 --> | ||
| <!-- Things to consider during the review, areas needing improvement, unresolved issues, etc. --> | ||
|
|
||
| ### ✅ Checklist | ||
|
|
||
| - [ ] UI 브랜치 같이 확인해서 이슈없는지 확인해보기 | ||
| - [ ] 함수 이름, 변수 이름만 봐도 어떤 기능을 하는지 파악할 수 있는지 (선언적인 코드인지 확인) | ||
| - [ ] Confirm with the UI branch to ensure there are no visual issues. | ||
| - [ ] Verify if function and variable names are descriptive enough to understand their purpose (ensure declarative code). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,4 +26,6 @@ package.json | |
|
|
||
| # Lock files (선택적) | ||
| yarn.lock | ||
| package-lock.json | ||
| package-lock.json | ||
|
|
||
| README.md | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| MIT License | ||
|
|
||
| Copyright (c) 2024 Biengual Team | ||
|
|
||
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,32 @@ | ||
| # react-player-plugin-prompter | ||
| # 📚 React Player Plugin | ||
|
|
||
| **React Player Plugin** enhances `react-player` by adding robust subtitle control features, making it ideal for educational content and language learning platforms. This library allows you to synchronize subtitles, navigate through sentences, and interact with words, providing a richer learning experience. | ||
|
|
||
| --- | ||
|
|
||
| ## 🚀 Key Features | ||
| - **Subtitle Synchronization**: Automatically scrolls subtitles in sync with the current playback time. | ||
| - **Line & Block Modes**: Supports two modes for displaying subtitles - line-by-line and block modes. | ||
| - **Subtitle Navigation**: Quickly jump to the previous or next subtitle with customizable buttons. | ||
| - **Word Selection**: Click on words within subtitles to trigger custom actions. | ||
| - **Focus Mode**: Highlight only the current subtitle to minimize distractions and enhance focus. | ||
|
|
||
| --- | ||
|
|
||
| ## 🌐 Demo Page | ||
| Check out the demo page to see the plugin in action! | ||
|
|
||
| [👉 View Demo](https://react-player-plugin-prompter-demo.vercel.app) | ||
|
|
||
| --- | ||
|
|
||
| ## 🔧 Core Features | ||
| 1. **Easy Integration**: Seamlessly integrates with `react-player` to enhance your video player with subtitle functionality. | ||
| 2. **Highly Customizable**: Provides flexibility to style the subtitle container, text, and timestamps according to your design needs. | ||
| 3. **Accessibility**: Designed to improve accessibility and user engagement, especially for educational content. | ||
| 4. **Language Support**: Supports multiple languages, allowing users to switch between different subtitle tracks. | ||
|
|
||
| --- | ||
|
|
||
| ## 📄 License | ||
| This project is licensed under the [MIT License](./LICENSE). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,171 @@ | ||
| # core | ||
| # 📚 react-player-plugin-prompter | ||
|
|
||
| **react-player-plugin-prompter** is a powerful, open-source library that enhances the capabilities of `react-player` by adding subtitle synchronization, sentence navigation, and word selection features. It is particularly useful for educational content and language learning platforms. | ||
|
|
||
| --- | ||
|
|
||
| ## 🚀 Key Features | ||
|
|
||
| - **Subtitle Synchronization**: Automatically scrolls subtitles based on the current playback time. | ||
| - **Line and Block Modes**: Provides options to display subtitles either line-by-line or in block mode. | ||
| - **Subtitle Navigation Buttons**: Easily navigate to the previous or next subtitle. | ||
| - **Word Selection Feature**: Select specific words within subtitles for additional interactions. | ||
| - **Focus Mode**: Enables a mode where only the current subtitle is highlighted, helping users focus on a single line at a time. | ||
|
|
||
| --- | ||
|
|
||
| ## 🛠️ Installation | ||
|
|
||
| ```bash | ||
| npm install react-player-plugin-prompter | ||
| # or | ||
| yarn add react-player-plugin-prompter | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 📖 Usage Example | ||
|
|
||
| ### Basic Example | ||
|
|
||
| ```tsx | ||
| import React, { useState, useRef } from 'react'; | ||
| import ReactPlayer from 'react-player'; | ||
| import { ReactScriptPlayer } from 'react-player-plugin-prompter'; | ||
| import scriptsMockData from './mocks/scriptsMockData'; | ||
|
|
||
| function App() { | ||
| const playerRef = useRef<ReactPlayer | null>(null); | ||
| const [currentTime, setCurrentTime] = useState(0); | ||
| const [isPlaying, setIsPlaying] = useState(false); | ||
|
|
||
| const seekTo = (timeInSeconds: number) => | ||
| playerRef.current?.seekTo(timeInSeconds, 'seconds'); | ||
|
|
||
| return ( | ||
| <div> | ||
| <ReactPlayer | ||
| ref={playerRef} | ||
| url="https://example.com/video.mp4" | ||
| playing={isPlaying} | ||
| onProgress={({ playedSeconds }) => setCurrentTime(playedSeconds)} | ||
| controls | ||
| /> | ||
| <ReactScriptPlayer | ||
| mode="line" | ||
| scripts={scriptsMockData} | ||
| selectedLanguages={['en', 'ko']} | ||
| seekTo={seekTo} | ||
| currentTime={currentTime} | ||
| onClickScript={(script, index) => console.log(script, index)} | ||
| onSelectWord={(word, script, index) => console.log(word, script, index)} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 🔧 Props Explanation | ||
|
|
||
| | Prop | Type | Description | | ||
| |---------------------|-------------------------------------------------------------------------------------------------------|-------------| | ||
| | `mode` | `'line' | 'block'` | Determines how subtitles are displayed: line-by-line or in block mode. | | ||
| | `scripts` | `Script<LanguageCode>[]` | Array of subtitle scripts with timings, translations, and metadata. | | ||
| | `selectedLanguages` | `LanguageCode[]` | Array of languages to display for subtitles (e.g., `['en', 'ko']`). | | ||
| | `seekTo` | `(timeInSeconds: number) => void` | Function to seek the video to a specific time (in seconds). | | ||
| | `currentTime` | `number` | Current playback time in seconds. | | ||
| | `onClickScript` | `(script, index) => void` | Callback function triggered when a subtitle is clicked. | | ||
| | `onSelectWord` | `(word, script, index) => void` | Callback function triggered when a word within a subtitle is selected. | | ||
| | `containerStyle` | `ContainerStyle` | Custom styles for the subtitle container (width, height, padding, background color, etc.). | | ||
| | `textStyle` | `TextStyle` | Styles for the subtitle text (color, font size, active color, etc.). | | ||
| | `timeStyle` | `TimeStyle` | Styles for the timestamp button (color, font, background color, etc.). | | ||
| | `PrevButton` | `({ onClick }: { onClick: () => void }) => JSX.Element` | Custom button to move to the previous subtitle. | | ||
| | `NextButton` | `({ onClick }: { onClick: () => void }) => JSX.Element` | Custom button to move to the next subtitle. | | ||
| | `FocusButton` | `({ isFocus, setIsFocus }: { isFocus: boolean, setIsFocus: Dispatch<SetStateAction<boolean>> }) => JSX.Element` | Button to toggle focus mode on/off. | | ||
|
|
||
| --- | ||
|
|
||
| ## 📂 Type Definitions | ||
|
|
||
| ### LanguageCode | ||
|
|
||
| ```typescript | ||
| type LanguageCode = 'en' | 'ko' | 'ja' | 'de' | 'fr' | 'es'; | ||
| ``` | ||
|
|
||
| ### Script | ||
|
|
||
| ```typescript | ||
| type Script<T extends string = LanguageCode> = Partial<Record<T, string>> & { | ||
| startTimeInSecond: number; | ||
| durationInSecond: number; | ||
| isHighlighted: boolean; | ||
| }; | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 📂 Data Structure Example (`scriptsMockData`) | ||
|
|
||
| ```typescript | ||
| export const scriptsMockData = [ | ||
| { | ||
| en: 'Hello, welcome to the video!', | ||
| ko: '안녕하세요, 비디오에 오신 것을 환영합니다!', | ||
| startTimeInSecond: 0, | ||
| durationInSecond: 5, | ||
| isHighlighted: true, | ||
| }, | ||
| { | ||
| en: 'This is a subtitle example.', | ||
| ko: '이것은 자막 예제입니다.', | ||
| startTimeInSecond: 6, | ||
| durationInSecond: 4, | ||
| isHighlighted: false, | ||
| }, | ||
| ]; | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 🎨 Styling Customization Example | ||
|
|
||
| ```tsx | ||
| <ReactScriptPlayer | ||
| mode="block" | ||
| scripts={scriptsMockData} | ||
| selectedLanguages={['en']} | ||
| seekTo={seekTo} | ||
| currentTime={currentTime} | ||
| textStyle={{ | ||
| color: '#333', | ||
| fontSize: '16px', | ||
| fontWeight: 'bold', | ||
| activeColor: '#f5f3ff', | ||
| }} | ||
| timeStyle={{ | ||
| color: '#5a5a5a', | ||
| fontSize: '14px', | ||
| backgroundColor: '#ddd6fe', | ||
| borderRadius: '5px', | ||
| padding: '4px', | ||
| }} | ||
| containerStyle={{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| padding: '10px', | ||
| backgroundColor: '#f0f0f0', | ||
| }} | ||
| /> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## 📄 License | ||
|
|
||
| This library is licensed under the [MIT License](../LICENSE). | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters