Fix some minor bugs

Author: codeit-ninja

README.md

@@ -4,12 +4,14 @@ Officially only VTT files are supported by the HTML5 track element.
 This package will convert your SRT subtitles on the fly to VTT subtitles.
 
 ### 👉 What's new in v2?
-
+- Updated code base to modern JavaScript
 - Added [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder?retiredLocale=nl) to support all kinds of encodings
     - SRT can be encoded in [multiple formats](https://en.wikipedia.org/wiki/SubRip#Text_encoding), while WebVTT should only be [encoded in UTF-8](https://www.w3.org/TR/webvtt1/#file-structure) format.
 - Does not break the TextTrack selection in video elements
   - The previous version broke the TextTrack selection in the captions' menu. So when you had multiple captions you could not switch between them.
 - Is available as a package (ES module) or as a ready to use script
+- No external dependencies
+- More functionality included
 
 ### Installation
 
@@ -19,13 +21,13 @@ As a NPM package, works both in the browser and NodeJS
 npm install srt-support-for-html5-videos
 ```
 
-CDN
+**CDN**
 - Ready to use script, just include it, and it will parse all video elements to convert the tracks
 ```text
 https://cdn.jsdelivr.net/gh/codeit-ninja/SRT-Support-for-HTML5-videos@master/dist/main.iife.js
 ```
 
-ES Module
+**ES Module**
 - Use as ES Module, see usage section
 ```text
 https://cdn.jsdelivr.net/gh/codeit-ninja/SRT-Support-for-HTML5-videos@master/dist/main.es.js
@@ -38,7 +40,7 @@ If you installed it as a package using NPM or as an ES Module using the CDN, you
 // If using NPM
 import { transformSrtTracks } from 'srt-support-for-html5-videos';
 // If using CDN
-import { transformSrtTracks } from 'https://cdn.jsdelivr.net/gh/codeit-ninja/SRT-Support-for-HTML5-videos/dist/main.es.js';
+import { transformSrtTracks } from 'https://cdn.jsdelivr.net/gh/codeit-ninja/srt-support-for-html5-videos/dist/main.es.js';
 
 // Single video element
 const video = document.getElementById('video');
@@ -60,8 +62,12 @@ If your SRT file is encoded in a different format than *UTF-8* you must specify
 </video>
 ```
 
+### Other functions
 Some more functions are exported, these are just helper functions, you can import and use them if you have any use for them.
 
+#### toVttCue
+Function is internally used to covert a srt cue into a WebVTT compatible cue.
+
 ```javascript
 /**
  * Converts a SRT cue into a VTT compatible cue
@@ -84,14 +90,41 @@ Some more functions are exported, these are just helper functions, you can impor
  *
  */
 import { toVttCue } from 'srt-support-for-html5-videos';
+```
+#### hmsToSeconds
+Converts a `HH:MM:SS.MS` string into a *number in seconds*
+
+```javascript
 /**
  * Converts a VTT or SRT timing `string` 
  * to a `number` in seconds + milliseconds
- * 
- * *Example*
- * const seconds = hmsToSeconds('00:00:02.827'); // 2.827
  */
 import { hmsToSeconds } from 'srt-support-for-html5-videos';
+
+const seconds = hmsToSeconds('00:00:02.827'); // 2.827
+```
+#### fetchTrack
+Fetches the contents of a track and returns the body.
+
+```javascript
+/**
+ * Fetches the contents of a track source
+ */
+import { fetchTrack } from 'srt-support-for-html5-videos';
+
+const content = await fetchTrack('https://example.com/path/my-subtitle.srt');
+```
+
+#### srt2vtt
+Convert SRT to VTT
+
+```javascript
+/**
+ * Converts SRT formatted string into a WebVTT formated string
+ */
+import { srt2vtt } from 'srt-support-for-html5-videos';
+
+const vtt = srt2vtt(srt);
 ```
 
 ### Support me

dist/main.es.js

@@ -1,17 +1,17 @@
-var o = Object.defineProperty;
-var c = (n, e, t) => e in n ? o(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var s = (n, e, t) => (c(n, typeof e != "symbol" ? e + "" : e, t), t);
-class d {
-  constructor(e, t, i, r) {
+var c = Object.defineProperty;
+var d = (n, t, e) => t in n ? c(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var s = (n, t, e) => (d(n, typeof t != "symbol" ? t + "" : t, e), e);
+class o {
+  constructor(t, e, r, i) {
     s(this, "number");
     s(this, "startTime");
     s(this, "endTime");
     s(this, "text");
-    this.number = e, this.startTime = t, this.endTime = i, this.text = r;
+    this.number = t, this.startTime = e, this.endTime = r, this.text = i;
   }
 }
 function l(n) {
-  const e = {
+  const t = {
     number: parseInt(n.match(/^\d+/g)[0]),
     timing: {
       start: n.match(/(\d+:){2}\d+,\d+/g)[0].replace(",", "."),
@@ -20,42 +20,54 @@ function l(n) {
     text: n.split(/\r?\n/g).slice(2, n.split(/\r?\n/g).length).join(`
 `)
   };
-  return new d(e.number, a(e.timing.start), a(e.timing.end), e.text);
+  return new o(t.number, a(t.timing.start), a(t.timing.end), t.text);
 }
 function a(n) {
-  for (var e = n.split(":"), t = 0, i = 1; e.length > 0; )
-    t += i * parseFloat(e.pop(), 10), i *= 60;
-  return t;
+  let t = n.split(":"), e = 0, r = 1;
+  for (; t.length > 0; )
+    e += r * parseFloat(t.pop(), 10), r *= 60;
+  return e;
 }
-class h {
-  constructor(e) {
+async function h(n, t = "utf-8") {
+  return fetch(n).then((e) => e.arrayBuffer()).then((e) => new TextDecoder(t).decode(e));
+}
+function f(n) {
+  return `WEBVTT
+
+` + n.split(/\n/g).map((t) => t.replace(/((\d+:){0,2}\d+),(\d+)/g, "$1.$3")).join(`
+`);
+}
+class m {
+  constructor(t) {
     s(this, "src");
     s(this, "encoding");
     s(this, "lang");
     s(this, "kind");
     s(this, "label");
     s(this, "default");
-    s(this, "content");
+    s(this, "body");
     s(this, "needsTransform");
     s(this, "cues", []);
-    this.src = e.src, this.encoding = e.dataset.encoding, this.lang = e.srclang, this.kind = e.kind, this.label = e.label, this.default = e.default, this.needsTransform = !0, this.src.endsWith(".vtt") && (this.needsTransform = !1);
+    this.src = t.src, this.encoding = t.dataset.encoding, this.lang = t.srclang, this.kind = t.kind, this.label = t.label, this.default = t.default, this.needsTransform = !this.src.endsWith(".vtt");
   }
   async parse() {
-    const e = new TextDecoder(this.encoding), i = await (await fetch(this.src)).arrayBuffer();
-    this.content = e.decode(i), this.cues = this.content.split(/\r?\n\r?\n/g).map(l);
+    this.body = await h(this.src), this.cues = this.body.split(/\r?\n\r?\n/g).map(l);
   }
 }
-async function f(n) {
-  [...n.querySelectorAll("track")].map((t) => new h(t)).forEach(async (t) => {
-    if (!t.needsTransform)
-      return;
-    await t.parse();
-    const i = n.addTextTrack(t.kind, t.label, t.lang);
-    t.cues.forEach((r) => i.addCue(new VTTCue(r.startTime, r.endTime, r.text))), t.default && (i.mode = "showing"), console.log(t);
-  });
+async function g(n) {
+  const t = [...n.querySelectorAll("track")].map((e) => new m(e));
+  for (const e of t) {
+    if (!e.needsTransform)
+      continue;
+    await e.parse();
+    const r = n.addTextTrack(e.kind, e.label, e.lang);
+    e.cues.forEach((i) => r.addCue(new VTTCue(i.startTime, i.endTime, i.text))), e.default && (r.mode = "showing");
+  }
 }
 export {
+  h as fetchTrack,
   a as hmsToSeconds,
+  f as srt2vtt,
   l as toVttCue,
-  f as transformSrtTracks
+  g as transformSrtTracks
 };

dist/main.iife.js

@@ -8,11 +8,13 @@
  *               _/ |    
  *              |__/    
  */
-import { hmsToSeconds, toVttCue } from './src/helpers.js';
+import { hmsToSeconds, toVttCue, srt2vtt, fetchTrack } from './src/helpers.js';
 import { transformSrtTracks } from './src/transformer.js';
 
 export {
     hmsToSeconds,
     toVttCue,
-    transformSrtTracks
-}
+    transformSrtTracks,
+    srt2vtt,
+    fetchTrack
+}