🎬 Subtitle Shifter

A modern web application to adjust SRT subtitle timings. Shift entire files or specific portions with an intuitive, privacy-focused interface, works on windows, linux and mac.

✨ Features

• 🚀 Full Shift - Adjust all subtitle timings at once
• 🎯 Partial Shift - Shift only subtitles within a specific time range
• 👁️ Live Preview - Compare original vs shifted timestamps before downloading
• 🌙 Dark/Light Mode - Beautiful UI with theme persistence
• 🔒 Privacy First - Files processed in-memory, never stored on server
• 📱 Responsive - Works on desktop, tablet, and mobile

🚀 Quick Start

Prerequisites

• Node.js 18.0 or higher
• npm (comes with Node.js)

Installation

# Clone the repository
git clone https://github.com/DevWael/subtitle-shifter.git

# Navigate to the project
cd subtitle-shifter

# Install dependencies
npm install

# Start the server
npm start

Open http://localhost:3000 in your browser.

# Start server with auto-reload
npm run dev:server

# In another terminal, watch for CSS changes
npm run css:watch

🐳 Docker

The easiest way to run the app - no Node.js required!

# Clone the repository
git clone https://github.com/DevWael/subtitle-shifter.git
cd subtitle-shifter

# Run with Docker Compose
docker compose up -d

# Or build and run manually
docker build -t subtitle-shifter .
docker run -p 3000:3000 subtitle-shifter

Open http://localhost:3000 in your browser.

To stop: docker compose down

🎮 Usage

1. Upload - Drag and drop an .srt file or click to browse
2. Choose Mode
   • Full Shift: Adjust all subtitles
   • Partial Shift: Set a time range (e.g., 00:10:00 to 00:20:00)
3. Set Offset - Enter milliseconds (positive = delay, negative = earlier)
4. Preview - Review the changes with side-by-side comparison
5. Download - Get your shifted subtitle file

Common Use Cases

Problem	Solution
Subtitles appear 2 seconds early	Set offset to +2000
Subtitles appear 500ms late	Set offset to -500
Only half the movie is out of sync	Use Partial Shift with time range

🛠️ Tech Stack

• Backend: Node.js, Express.js 4.x
• Frontend: Vanilla JavaScript (ES6+)
• Styling: Tailwind CSS 3.x
• SRT Parsing: subtitle npm package
• File Handling: Multer (memory storage)

📁 Project Structure

subtitle-shifter/
├── server.js              # Express entry point
├── src/
│   ├── routes/
│   │   └── api.js         # REST API endpoints
│   └── utils/
│       └── srt-shifter.js # SRT parsing & shifting logic
├── public/
│   ├── index.html         # Main page
│   ├── css/
│   │   ├── input.css      # Tailwind source
│   │   └── styles.css     # Compiled CSS
│   └── js/
│       └── app.js         # Frontend logic
└── test-files/
    └── sample.srt         # Sample file for testing

🔌 API Endpoints

Method	Endpoint	Description
POST	/api/upload	Upload and parse SRT file
POST	/api/shift	Shift subtitles and get preview
POST	/api/download	Generate shifted SRT file

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• subtitle - Excellent SRT parsing library
• Tailwind CSS - Utility-first CSS framework
• Express.js - Fast, unopinionated web framework

---

Made with ❤️ by Ahmad Wael