A React Player plugin specialized for subtitle handling
npm install react-player-plugin-prompterReact Player Plugin enhances react-player by adding robust subtitle control features, making it ideal for educational content and language learning platforms.
---
- 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.
---
``bash`
npm install react-player-plugin-prompteror
yarn add react-player-plugin-prompter
---
`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
const [currentTime, setCurrentTime] = useState(0);
const [isPlaying, setIsPlaying] = useState(false);
const seekTo = (timeInSeconds: number) =>
playerRef.current?.seekTo(timeInSeconds, 'seconds');
return (
export default App;
`
---
| Prop | Type | Description |
|---------------------|-------------------------------------------------------------------------------------------------------|-------------|
| mode | 'line' | 'block' | Determines how subtitles are displayed: line-by-line or in block mode. |scripts
| | Script | 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 | Button to toggle focus mode on/off. |
---
`typescript`
type LanguageCode = 'en' | 'ko' | 'ja' | 'de' | 'fr' | 'es';
`typescript`
type Script
startTimeInSecond: number;
durationInSecond: number;
isHighlighted: boolean;
};
---
)`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,
},
];
---
`tsx``
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',
}}
/>
---
This library is licensed under the MIT License.