├── .editorconfig
├── .eslintrc
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── node.js.yml
├── .gitignore
├── LICENSE
├── README.md
├── index.spec.ts
├── index.ts
├── jest.config.js
├── package-lock.json
├── package.json
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | insert_final_newline = true
10 | max_line_length = 80
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | max_line_length = 0
15 | trim_trailing_whitespace = false
16 | 
17 | [COMMIT_EDITMSG]
18 | max_line_length = 0
19 | 
20 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb",
 3 |   "rules": {
 4 |     "no-console": [
 5 |       "error",
 6 |       {
 7 |         "allow": [
 8 |           "warn",
 9 |           "error",
10 |           "info"
11 |         ]
12 |       }
13 |     ],
14 |     "prefer-promise-reject-errors":[
15 |       "off"
16 |     ],
17 |     "symbol-description": [
18 |       "off"
19 |     ],
20 |     "no-underscore-dangle": [
21 |       "off"
22 |     ],
23 |     "no-param-reassign": [
24 |       "off"
25 |     ],
26 |     "import/no-unresolved": [
27 |       "off"
28 |     ]
29 |   },
30 |   "env": {
31 |     "browser": true,
32 |     "node": true
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: [imshaikot]
4 | ko_fi: sahriar74587
5 | 


--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [ master ]
 9 |   pull_request:
10 |     branches: [ master ]
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 | 
17 |     strategy:
18 |       matrix:
19 |         node-version: [12.x, 14.x, 16.x]
20 |         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21 | 
22 |     steps:
23 |     - uses: actions/checkout@v2
24 |     - name: Use Node.js ${{ matrix.node-version }}
25 |       uses: actions/setup-node@v2
26 |       with:
27 |         node-version: ${{ matrix.node-version }}
28 |         cache: 'npm'
29 |     - run: npm ci
30 |     - run: npm run build --if-present
31 |     - run: npm test
32 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | /node_modules
 6 | 
 7 | # production
 8 | /build
 9 | 
10 | lib/
11 | umd/
12 | 
13 | # misc
14 | .DS_Store
15 | npm-debug.log*
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Shariar Shaikot
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h2 align="left"> Convert and generate URL of WebVTT from .srt subtitle file on the fly over Browser/HTML5 environment</h2>
 2 | 
 3 | HTMLMediaElement/Video doesn't support `.srt` (SubRip Track) format subtitle as its `<track>` source - in order to show captions of your video track either you have to convert the SRT file to WebVTT or write it on your own. Because `<track src="VALID URL SCHEME">` requires a valid URL of `.vtt` (Web Video Text Track) formated subtitle track.
 4 | This library will let you do this on the fly and will give you an URL to set the source of caption track.
 5 | 
 6 | <p align="center">
 7 |   <a href="https://www.npmjs.org/package/srt-webvtt"><img src="https://img.shields.io/npm/v/srt-webvtt.svg?style=flat-square" /></a>
 8 |   <img src="https://img.shields.io/npm/dm/srt-webvtt" />
 9 |   <a href="https://github.com/imshaikot/srt-webvtt/actions/workflows/node.js.yml"><img src="https://github.com/imshaikot/srt-webvtt/actions/workflows/node.js.yml/badge.svg" /></a>
10 |   <a href="https://github.com/imshaikot/srt-webvtt/blob/master/LICENSE">
11 |     <img src="https://img.shields.io/github/license/imshaikot/srt-webvtt.svg">
12 |   </a>
13 | </p>
14 | 
15 | ## Example
16 | 
17 | <a href="https://imshaikot.github.io/srt-webvtt/">https://imshaikot.github.io/srt-webvtt/</a>
18 | 
19 | ## Installation
20 | 
21 | ```bash
22 | $ npm install srt-webvtt --save
23 | ```
24 | 
25 | ## Getting Started
26 | 
27 | Using it very easy but a little tricky indeed.
28 | To getting started:
29 | 
30 | ```js
31 | // Using ES6 es-module
32 | import toWebVTT from "srt-webvtt"; // This is a default export, so you don't have to worry about the import name
33 | 
34 | // Not using ES6??
35 | var toWebVTT = require("srt-webvtt");
36 | ```
37 | 
38 | ## Example and API
39 | 
40 | When you're using `HTMLMediaElement` (example: `<video>`) and you want to show caption on your video player - there's a native HTML Element that will allow us to do that.
41 | See the official MDN article and tutorial of this `<track>` feature
42 | 
43 | <a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Adding captions and subtitles to HTML5 video</a>
44 | 
45 | But this feature is limited to WebVTT format and won't allow you to use SRT (very commonly used subtitle)
46 | 
47 | So, this tiny library will take your `.srt` subtitle file or a `Blob` object and will give you converted `.vtt` file's valid Object URL that you can set as `<track>`'s source.
48 | 
49 | <h4>See the Example below:</h4>
50 | 
51 | ```js
52 | import { default as toWebVTT } from "srt-webvtt";
53 | 
54 | try {
55 |   const textTrackUrl = await toWebVTT(input.files[0]); // this function accepts a parameer of SRT subtitle blob/file object
56 |   // It is a valid url that can be used as text track URL
57 |   var track = document.getElementById("my-sub-track"); // Track element (which is child of a video element)
58 |   var video = document.getElementById("my-video"); // Main video element
59 |   track.src = textTrackUrl; // Set the converted URL to track's source
60 |   video.textTracks[0].mode = "show"; // Start showing subtitle to your track
61 | } catch (e) {
62 |   console.error(e.message);
63 | }
64 | ```
65 | 
66 | <br />
67 | 
68 | `toWebVTT(file: Blob): Promise<string>` and this is it :)
69 | 
70 | ## LICENSE
71 | 
72 | MIT
73 | 


--------------------------------------------------------------------------------
/index.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TextDecoder } from 'util'
 2 | import { default as WebVTT, moduleName } from './index'
 3 | 
 4 | describe('WebVTT', () => {
 5 |     let file: Blob;
 6 | 
 7 |     beforeEach(() => {
 8 |         file = new Blob([new Uint8Array([])], { type: 'text/plain' });
 9 |         (global as any).TextDecoder = TextDecoder;
10 |         (global.URL as any).createObjectURL = jest.fn().mockImplementation((text) => 'blob:some-valid-url');
11 |     })
12 | 
13 |     it('should return a promise', () => {
14 |         expect(WebVTT(file)).toBeInstanceOf(Promise);
15 |     });
16 |     it('should return a valid return', async () => {
17 |         expect(await WebVTT(file)).toBe('blob:some-valid-url');
18 |     });
19 |     it('should throw if undefined or wrong resource provided', async () => {
20 |         try {
21 |             const webVtt = await WebVTT(undefined as any);
22 |         } catch (e: any) {
23 |             expect(e.message).toContain(moduleName);
24 |             expect(e.message).toContain('Blob');
25 |         }
26 |     });
27 |     it('should throw TextDecoder is not defined', async () => {
28 |         (global as any).TextDecoder = undefined;
29 |         try {
30 |             const webVtt = await WebVTT(file);
31 |         } catch (e: any) {
32 |             expect(e.message).toContain(moduleName);
33 |             expect(e.message).toContain('TextDecoder');
34 |         }
35 |     });
36 | });


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | export const moduleName = 'toWebVTT';
 2 | /**
 3 |  * @param blob 
 4 |  * @param readAs 
 5 |  * @returns Promise<ArrayBuffer>
 6 |  */
 7 | const blobToBufferOrString = (blob: Blob, readAs: 'string' | 'buffer'): Promise<Uint8Array | String> => 
 8 |   new Promise((resolve, reject) => {
 9 |     const reader = new FileReader();
10 |     /**
11 |      * @param event 
12 |      */
13 |     const loadedCb = (event: Event) => {
14 |       const buf = (event.target as any).result;
15 |       reader.removeEventListener('loadend', loadedCb);
16 |       resolve(readAs !== 'string' ? new Uint8Array(buf) : buf);
17 |     };
18 | 
19 |     const errorCb = () => {
20 |       reader.removeEventListener('error', errorCb);
21 |       reject(new Error(`${moduleName}: Error while reading the Blob object`));
22 |     };
23 | 
24 |     reader.addEventListener('loadend', loadedCb);
25 |     reader.addEventListener('error', errorCb);
26 |     if (readAs !== 'string') {
27 |       reader.readAsArrayBuffer(blob);
28 |     } else {
29 |       reader.readAsText(blob);
30 |     }
31 |   });
32 | /**
33 |  * @param text 
34 |  * @returns ObjectURL
35 |  */
36 | const blobToURL = (text: string): string => URL
37 |   .createObjectURL(new Blob([text], { type: 'text/vtt' }));
38 | /**
39 |  * @param utf8str 
40 |  * @returns string
41 |  */
42 | const toVTT = (utf8str: string) => utf8str
43 |   .replace(/\{\\([ibu])\}/g, '</$1>')
44 |   .replace(/\{\\([ibu])1\}/g, '<$1>')
45 |   .replace(/\{([ibu])\}/g, '<$1>')
46 |   .replace(/\{\/([ibu])\}/g, '</$1>')
47 |   .replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g, '$1.$2')
48 |   .concat('\r\n\r\n');
49 | /**
50 |  * @param resource 
51 |  * @returns Promise<string>
52 |  */
53 | const toWebVTT = async (resource: Blob): Promise<string> => {
54 |   if (!(FileReader)) {
55 |     throw (new Error(`${moduleName}: No FileReader constructor found`));
56 |   }
57 |   if (!TextDecoder) {
58 |     throw (new Error(`${moduleName}: No TextDecoder constructor found`));
59 |   }
60 |   if (!(resource instanceof Blob)) {
61 |     throw new Error(`${moduleName}: Expecting resource to be a Blob but something else found.`);
62 |   }
63 |   let text;
64 |   const vttString = 'WEBVTT FILE\r\n\r\n'; // leading text
65 |   try {
66 |     const buffer = await blobToBufferOrString(resource, 'string');
67 |     text = vttString.concat(toVTT(buffer as string));
68 |   } catch (e) {
69 |     const buffer = await blobToBufferOrString(resource, 'buffer');
70 |     const decode = new TextDecoder('utf-8').decode(buffer as Uint8Array);
71 |     text = vttString.concat(toVTT(decode));
72 |   }
73 |   return Promise.resolve(blobToURL(text));
74 | };
75 | 
76 | export default toWebVTT;
77 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: 'ts-jest',
3 |   testEnvironment: 'jsdom',
4 | };
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "srt-webvtt",
 3 |   "version": "1.3.2",
 4 |   "description": "Convert SRT format subtitle to WebVTT on the fly over HTML5 environment",
 5 |   "main": "lib/index.js",
 6 |   "files": [
 7 |     "lib/index.js",
 8 |     "lib/index.d.ts"
 9 |   ],
10 |   "scripts": {
11 |     "test": "./node_modules/.bin/jest",
12 |     "lint": "./node_modules/.bin/eslint ./index.js",
13 |     "build": "rm -rf lib && tsc",
14 |     "minor": "npm version minor && npm publish",
15 |     "major": "npm version major && npm publish",
16 |     "patch": "npm version patch && npm publish"
17 |   },
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/imshaikot/srt-webvtt.git"
21 |   },
22 |   "keywords": [
23 |     "Subtitle",
24 |     "video",
25 |     "subtitle",
26 |     "track",
27 |     "element",
28 |     "srt-to-vtt",
29 |     "srt-to-webvtt",
30 |     "converter",
31 |     "html5",
32 |     "video",
33 |     "html5",
34 |     "video",
35 |     "track",
36 |     "html5",
37 |     "video",
38 |     "subtitle",
39 |     "str",
40 |     "support"
41 |   ],
42 |   "author": "Shariar Shaikot",
43 |   "license": "MIT",
44 |   "bugs": {
45 |     "url": "https://github.com/imshaikot/srt-webvtt/issues"
46 |   },
47 |   "homepage": "https://github.com/imshaikot/srt-webvtt#readme",
48 |   "devDependencies": {
49 |     "@types/jest": "^27.0.2",
50 |     "eslint": "^4.15.0",
51 |     "eslint-config-airbnb": "^16.1.0",
52 |     "eslint-plugin-import": "^2.8.0",
53 |     "eslint-plugin-jsx-a11y": "^6.0.3",
54 |     "eslint-plugin-react": "^7.5.1",
55 |     "jest": "^27.3.1",
56 |     "ts-jest": "^27.0.7",
57 |     "typescript": "^4.4.4"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |       "target": "es5",
 4 |       "module": "commonjs",
 5 |       "lib": ["es2017", "es7", "es6", "dom"],
 6 |       "declaration": true,
 7 |       "outDir": "lib",
 8 |       "strict": true,
 9 |       "esModuleInterop": true
10 |     },
11 |     "exclude": [
12 |       "node_modules",
13 |       "lib"
14 |     ]
15 |   }


--------------------------------------------------------------------------------