React-player-plugin-prompter NPM

📚 react-player-plugin-prompter

React Player Plugin enhances react-player by adding robust subtitle control features, making it ideal 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

npm install react-player-plugin-prompter
# or
yarn add react-player-plugin-prompter

📖 Usage Example

Basic Example

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

type LanguageCode = 'en' | 'ko' | 'ja' | 'de' | 'fr' | 'es';

Script

type Script<T extends string = LanguageCode> = Partial<Record<T, string>> & {
  startTimeInSecond: number;
  durationInSecond: number;
  isHighlighted: boolean;
};

📂 Data Structure Example (`scriptsMockData`)

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

<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',
  }}
/>