🎬 React Transcript Editor

A modern, fully-featured React component for transcribing audio and video with complete styling customization, SSR support, and React 18/19 compatibility.

✨ What's New in v2.3.1

🎨 Complete Styling Customization

• 40+ customizable elements with className injection
• Tailwind CSS support out of the box
• Any CSS framework compatible (styled-components, CSS modules, etc.)
• Zero conflicts with your existing styles

🌐 Full SSR/SSG Compatibility

• Next.js 15+ support with no build errors
• Server-side rendering ready
• Static site generation compatible
• Docker container friendly

🔧 Enhanced Developer Experience

• Comprehensive TypeScript definitions
• Better error messages for STT engine issues
• Modern React patterns (hooks, functional components)
• Performance optimized builds

🚀 Quick Start

Installation

# Using npm
npm install pmacom-react-transcript-editor

# Using yarn
yarn add pmacom-react-transcript-editor

# Using pnpm (recommended)
pnpm add pmacom-react-transcript-editor

Basic Usage

import { TranscriptEditor } from 'pmacom-react-transcript-editor';

function App() {
  return (
    <TranscriptEditor
      transcriptData={transcriptData}
      mediaUrl="path/to/your/media.mp4"
      sttJsonType="draftjs"
    />
  );
}

With Tailwind CSS Styling

import { TranscriptEditor } from 'pmacom-react-transcript-editor';

function App() {
  const classNameOptions = {
    container: 'max-w-6xl mx-auto bg-white rounded-xl shadow-lg',
    header: 'bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6',
    button: 'bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg',
    transcriptContent: 'p-6 bg-gray-50',
    transcriptWord: 'hover:bg-blue-100 hover:text-blue-800 px-1 rounded cursor-pointer',
    transcriptWordCurrent: 'bg-blue-100 text-blue-800 px-1 rounded font-medium',
  };

  return (
    <TranscriptEditor
      transcriptData={transcriptData}
      mediaUrl="path/to/your/media.mp4"
      sttJsonType="draftjs"
      classNameOptions={classNameOptions}
    />
  );
}

🎨 Complete Styling Customization

Available Styling Options

The classNameOptions prop allows you to customize every element:

interface ClassNameOptions {
  // Container & Layout
  container?: string;
  wrapper?: string;
  
  // Header Section
  header?: string;
  headerTitle?: string;
  headerControls?: string;
  
  // Media Player
  mediaPlayer?: string;
  mediaPlayerControls?: string;
  mediaPlayerProgress?: string;
  mediaPlayerTime?: string;
  mediaPlayerVolume?: string;
  mediaPlayerPlaybackRate?: string;
  
  // Transcript Content
  transcriptContent?: string;
  transcriptText?: string;
  transcriptParagraph?: string;
  transcriptWord?: string;
  transcriptWordCurrent?: string;
  transcriptWordSelected?: string;
  
  // Settings Panel
  settings?: string;
  settingsPanel?: string;
  settingsToggle?: string;
  settingsContent?: string;
  
  // Export Options
  exportOptions?: string;
  exportButton?: string;
  exportDropdown?: string;
  
  // Keyboard Shortcuts
  keyboardShortcuts?: string;
  shortcutsList?: string;
  shortcutItem?: string;
  
  // Utility Classes
  button?: string;
  buttonPrimary?: string;
  buttonSecondary?: string;
  input?: string;
  select?: string;
  label?: string;
  tooltip?: string;
  modal?: string;
  modalOverlay?: string;
  modalContent?: string;
}

Theme Examples

Modern Dark Theme

const darkTheme = {
  container: 'bg-gray-900 text-white rounded-lg shadow-xl',
  header: 'bg-gray-800 border-b border-gray-700 p-4',
  headerTitle: 'text-xl font-bold text-white',
  button: 'bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md transition-colors',
  transcriptContent: 'bg-gray-800 p-6',
  transcriptText: 'text-gray-200 leading-relaxed',
  transcriptWord: 'hover:bg-blue-600 hover:text-white px-1 rounded cursor-pointer',
  transcriptWordCurrent: 'bg-blue-600 text-white px-1 rounded',
  mediaPlayer: 'bg-gray-800 border-t border-gray-700 p-4',
  settings: 'bg-gray-800 border border-gray-700 rounded-lg p-4',
  input: 'bg-gray-700 border border-gray-600 text-white px-3 py-2 rounded',
};

Professional Light Theme

const professionalTheme = {
  container: 'bg-white border border-gray-200 rounded-lg shadow-sm',
  header: 'bg-gray-50 border-b border-gray-200 p-4',
  headerTitle: 'text-lg font-semibold text-gray-900',
  button: 'bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium',
  transcriptContent: 'p-6 bg-white',
  transcriptText: 'text-gray-800 leading-relaxed',
  transcriptWord: 'hover:bg-blue-100 hover:text-blue-800 px-1 rounded cursor-pointer',
  transcriptWordCurrent: 'bg-blue-100 text-blue-800 px-1 rounded font-medium',
  mediaPlayer: 'bg-gray-50 border-t border-gray-200 p-4',
  settings: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
  input: 'border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500',
};

Minimalist Theme

const minimalistTheme = {
  container: 'bg-white',
  header: 'border-b border-gray-100 p-4',
  headerTitle: 'text-lg font-medium',
  button: 'text-blue-600 hover:text-blue-800 font-medium',
  transcriptContent: 'p-8',
  transcriptText: 'text-gray-900 leading-relaxed',
  transcriptWord: 'hover:bg-gray-100 px-1 rounded cursor-pointer',
  transcriptWordCurrent: 'bg-gray-100 px-1 rounded',
  mediaPlayer: 'border-t border-gray-100 p-4',
  settings: 'border border-gray-100 rounded p-4',
};

🌐 Framework Compatibility

Next.js 15+ (SSR/SSG)

// pages/transcript.tsx
import { TranscriptEditor } from 'pmacom-react-transcript-editor';

export default function TranscriptPage() {
  return (
    <TranscriptEditor
      mediaUrl="path/to/media.mp4"
      transcriptData={transcriptData}
      sttJsonType="draftjs"
      classNameOptions={darkTheme}
    />
  );
}

React 18/19 with TypeScript

import { TranscriptEditor, TranscriptEditorProps } from 'pmacom-react-transcript-editor';

const props: TranscriptEditorProps = {
  mediaUrl: "path/to/media.mp4",
  transcriptData: transcriptData,
  mediaType: 'video',
  sttJsonType: 'draftjs',
  spellCheck: true,
  classNameOptions: professionalTheme,
};

function App() {
  return <TranscriptEditor {...props} />;
}

Docker Containers

# Works perfectly in Docker containers
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install pmacom-react-transcript-editor
# ... rest of your Dockerfile

🎯 STT Engine Support

Supported Formats

• 'draftjs' - Draft.js format (default)
• 'bbckaldi' - BBC Kaldi format
• 'amazontranscribe' - AWS Transcribe
• 'google-stt' - Google Speech-to-Text
• 'speechmatics' - Speechmatics
• 'ibm' - IBM Watson
• 'autoedit2' - AutoEdit2
• 'digitalpaperedit' - Digital Paper Edit

Usage with Different STT Engines

// AWS Transcribe
<TranscriptEditor
  transcriptData={awsTranscriptData}
  sttJsonType="amazontranscribe"
  mediaUrl={mediaUrl}
/>

// Google Speech-to-Text
<TranscriptEditor
  transcriptData={googleTranscriptData}
  sttJsonType="google-stt"
  mediaUrl={mediaUrl}
/>

// BBC Kaldi
<TranscriptEditor
  transcriptData={bbcTranscriptData}
  sttJsonType="bbckaldi"
  mediaUrl={mediaUrl}
/>

🔧 Advanced Features

Auto-Save Functionality

<TranscriptEditor
  transcriptData={transcriptData}
  mediaUrl={mediaUrl}
  autoSaveContent={true}
  autoSaveInterval={30000} // 30 seconds
  autoSaveMethod="localStorageForEditors"
  handleAutoSaveChanges={(data) => {
    console.log('Auto-saved:', data);
    // Save to your backend
  }}
/>

Analytics Integration

<TranscriptEditor
  transcriptData={transcriptData}
  mediaUrl={mediaUrl}
  handleAnalyticsEvents={(event) => {
    // Send to your analytics service
    analytics.track(event.category, {
      action: event.action,
      name: event.name,
      value: event.value,
    });
  }}
/>

Custom Export Formats

import { exportAdapter } from 'pmacom-react-transcript-editor';

// Export to SRT
const srtData = exportAdapter(transcriptData, 'srt');

// Export to VTT
const vttData = exportAdapter(transcriptData, 'vtt');

// Export to Word document
const docxData = exportAdapter(transcriptData, 'docx');

📚 Documentation & Guides

• 📖 ClassName Injection Guide - Complete styling customization
• 🔧 STT Usage Guide - Troubleshooting STT engine issues
• 🎨 Tailwind Migration Guide - Migrating from other styling approaches
• 🔍 User Issues Review - Common issues and solutions

🚀 Performance & Compatibility

Bundle Size

• Main bundle: ~900KB (minified)
• CSS: ~24KB
• Tree-shaking supported
• Code splitting ready

Browser Support

• Chrome: 90+
• Firefox: 88+
• Safari: 14+
• Edge: 90+

React Compatibility

| React Version | Status | Notes | |---------------|--------|-------| | React 16.x | ✅ Supported | Legacy support | | React 17.x | ✅ Supported | Full compatibility | | React 18.x | ✅ Supported | Recommended | | React 19.x | ✅ Supported | Latest |

🛠 Development

# Install dependencies
pnpm install

# Start development server
pnpm start

# Run tests
pnpm test

# Build for production
pnpm run build

# Start Storybook
pnpm run storybook

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

This package is a modernized fork of the excellent @bbc/react-transcript-editor package. We've maintained all the original functionality while adding modern features and compatibility.

Made with ❤️ for the React community