Fix encoding not passed to function

Author: codeit-ninja

assets/subtitle.srt

@@ -16,4 +16,6 @@ and what stays off.
 4
 00:00:10,144 --> 00:00:13,000
 This was a demo showing that we successfully 
-converted srt into WebVTT compatible subtitles
+converted srt into WebVTT compatible subtitles
+
+   

dist/main.es.js

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

dist/main.iife.js

@@ -24,7 +24,7 @@
  * @param {string} srtCue
  * @returns Cue
  */
-export function toVttCue(srtCue: string): Cue;
+export function toVttCue(srtCue: string): false | Cue;
 /**
  * Converts a VTT or SRT timing `string`
  * to a `number` in seconds + milliseconds

dist/src/helpers.d.ts

@@ -8,7 +8,7 @@
   <body>
     <div id="app">
         <video src="assets/pexels-cottonbro-5532773.mp4" width="100%" controls autoplay muted>
-            <track label="English" kind="subtitles" srclang="en" data-encoding="UTF-8" src="assets/subtitle.srt" default />
+            <track label="English" kind="subtitles" srclang="en" src="assets/subtitle.srt" default />
         </video>
     </div>
     <script type="module" src="main.js"></script>

dist/src/helpers.d.ts.map

@@ -1,6 +1,6 @@
 {
   "name": "srt-support-for-html5-videos",
-  "version": "2.2.8",
+  "version": "2.3.8",
   "repository": "https://github.com/codeit-ninja/SRT-Support-for-HTML5-videos",
   "type": "module",
   "main": "main.js",
@@ -12,15 +12,15 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "npm run build:iife && npm run build:esm && npm run build:source && tsc",
-    "build:source": "vite --config vite.config.js build",
+    "build": "npm run build:iife && npm run build:esm && tsc",
     "build:iife": "vite --config vite.config.iife.js build",
     "build:esm": "vite --config vite.config.esm.js build",
     "preview": "vite preview",
     "publish": "npm run build"
   },
   "devDependencies": {
     "rollup-plugin-cleanup": "^3.2.1",
+    "typescript": "^4.9.4",
     "vite": "^3.0.0"
   }
 }

index.html

@@ -27,16 +27,24 @@ import Cue from "./cue.js";
  * @returns Cue
  */
 export function toVttCue(srtCue) {
-    const convertedCue = {
-        number: parseInt(srtCue.match(/^\d+/g)[0]),
-        timing: {
-            start: srtCue.match(/(\d+:){2}\d+,\d+/g)[0].replace(',', '.'),
-            end: srtCue.match(/(\d+:){2}\d+,\d+/g)[1].replace(',', '.')
-        },
-        text: srtCue.split(/\r?\n/g).slice(2, srtCue.split(/\r?\n/g).length).join('\n')
+    try {
+        if( ! srtCue || srtCue === ' ' ) {
+            return false;
+        }
+    
+        const convertedCue = {
+            number: parseInt(srtCue.match(/^\d+/g)[0]),
+            timing: {
+                start: srtCue.match(/(\d+:){2}\d+,\d+/g)[0].replace(',', '.'),
+                end: srtCue.match(/(\d+:){2}\d+,\d+/g)[1].replace(',', '.')
+            },
+            text: srtCue.split(/\r?\n/g).slice(2, srtCue.split(/\r?\n/g).length).join('\n')
+        }
+    
+        return new Cue(convertedCue.number, hmsToSeconds(convertedCue.timing.start), hmsToSeconds(convertedCue.timing.end), convertedCue.text);
+    } catch(e) {
+        return false;
     }
-
-    return new Cue(convertedCue.number, hmsToSeconds(convertedCue.timing.start), hmsToSeconds(convertedCue.timing.end), convertedCue.text);
 }
 /**
  * Converts a VTT or SRT timing `string` 
@@ -74,6 +82,10 @@ export function hmsToSeconds(str) {
  * @returns Promise<string>
  */
 export async function fetchTrack(src, encoding = 'utf-8') {
+    if( ! encoding || encoding === '' ) {
+        encoding = 'utf-8';
+    }
+
     return fetch(src).then(r => r.arrayBuffer()).then(r => new TextDecoder(encoding).decode(r));
 }
 /**

package-lock.json

@@ -71,11 +71,11 @@ export default class Track {
         this.kind = track.kind;
         this.label = track.label;
         this.default = track.default;
-        this.needsTransform = !this.src.endsWith('.vtt');
+        this.needsTransform = !this.src.toLowerCase().endsWith('.vtt');
     }
 
     async parse() {
-        this.body = await fetchTrack(this.src);
-        this.cues = this.body.split(/\r?\n\r?\n/g).map(toVttCue);
+        this.body = await fetchTrack(this.src, this.encoding);
+        this.cues = this.body.split(/\r?\n\r?\n/g).map(toVttCue).filter(Boolean);
     }
 }