NekoCap

A browser extension for creating, uploading and viewing community created captions on video sharing sites such as YouTube, Vimeo and niconico.
Get the extension: Chrome / Edge
Website: NekoCap.com

Features

Extension

• Built in caption editor accessible directly from supported video sharing sites
  • Custom caption positioning
  • Support for hotkeys from various editing software
  • Caption file export (SRT)
  • More to come
• Caption file loading (SRT, VTT, SBV, SSA, ASS supported)
• Caption upload
• Caption viewing
• Advanced Substation Alpha (SSA/ASS) caption rendering
• Caption rating system

Website

• Captioned video search
• Captioner profiles
• Caption review page
• Captioner moderation tools (verify, reject)

Setup for local development

1. Run npm install
2. Copy the contents of .env.sample to .env and fill in the details.
   • Firebase variables are used for auth
3. Run npm run watch to start the webpack dev server for both the extension and the NekoCap website
4. Go to chrome://extensions in Chrome and load the unpacked extension from the dist/extension folder
5. Go to http://localhost:12341 to access the NekoCap website

Adding fonts to be hosted from the NekoCap site for SSA/ASS rendering

1. Create a folder called server-fonts in the project root. (Webpack is configured to copy fonts there to the website's output directory)
2. Add woff2 webfonts that you want to serve from the website into that folder
3. Modify src/common/substation-fonts.ts to assign font names to the corresponding woff2 files in that folder.

Creating a production build

1. Copy the contents of .env.sample to .env.prod and fill in the details.
   1. Add PRODUCTION=1 to the end of the file.
2. Run npm run build to build both the extension and the website
   • Run npm run build:ext to build just the extension
   • Run npm run build:web to build just the website
3. The output will be in dist/web and dist/extension 1.
   1. License information of utilized packages will be in *.licenses.txt next to the output javascript

If you want to build the NekoCap website Docker image

1. Follow step 1 in Creating a production build
2. Copy the contents of Dockerfile.sample to Dockerfile and change whatever is necessary.
3. Copy the nginx template docker/default.conf.template to docker/default.conf and change the configuration to suit your needs.
4. Run docker build with your desired options.

Special thanks

Many great packages helped to bring this to life but extra kudos go to these projects without which NekoCap would not have been the same:

• SubtitleOctopus - ASS rendering
• React Hotkeys - Easy to use hotkeys (use the latest Github build and not the outdated npm one)
• subtitle.js - SRT and VTT parsing
• ass-compiler - ASS parsing