Changed parser to ESM

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

README.md

@@ -1,35 +1,177 @@
-WebVTT parser and validator
+Non-official WebVTT parser and validator
 ===========================
+## This is a fork of the original `webvtt-parser` module ver.2.2.0 by Anne van Kesteren. The original author's details can be found in the `contributors` section of `package.json`.
 
-Relevant links:
+## Whats changed:
 
-* [Live WebVTT Validator](http://quuz.org/webvtt/).
+### This script is adaptation of original script ver.2.2.0 for using in ESM syntax.
+
+* All logic and work remain the same original.
+* Functions moved to classes with arrows methods.
+* Added options to the ```cue``` object that are not in the original script: ```startTimeStr```, ```endTimeStr``` and ```timeLine```:
+  <br>
+  Example of oblect ```cue```:
+  ```
+  Cue {
+    "id": "",
+    "startTime": 0,
+    "endTime": 5.15,
+
+    "startTimeStr": "00:00:00.000",
+    "endTimeStr": "00:00:05.150",
+    "timeLine": "00:00:00.000 --> 00:00:05.150",
+
+    "direction": "horizontal",
+    "snapToLines": true,
+    "linePosition": "auto",
+    "lineAlign": "start",
+    "textPosition": "auto",
+    "positionAlign": "auto",
+    "size": 100,
+    "alignment": "center",
+    "pauseOnExit": false,
+    "text": "Lorem ipsum dolor sit amet.",
+    "tree": {
+      "children": [
+        {
+          "type": "text",
+          "value": "Lorem ipsum dolor sit amet."
+        }
+      ]
+    }
+  }
+  ```
+* Now ```serializeTimestamp``` always return hours with leading zeros (00:00:01.000).
+* This version use more modern JS syntax ES6 than in original.
+* ```test/parser.js``` moved to ESM ```test/parser.mjs```
+* ```./parser.js``` moved to ESM ```./parser.mjs```
+
+<br><hr><br>
+
+Relevant links (Official):
+
+* [Live WebVTT Validator](http://quuz.org/webvtt/)
 * [WebVTT Specification](https://w3c.github.io/webvtt/)
 
 ## Install
 
-You can load the `parser.js` file into your HTML page and the API will become available on
-`window`. Alternatively you can install it using bower (`webvtt`) or npm (`npm install webvtt-parser`).
+You can load the `parser.mjs` file into your HTML page. Alternatively you can install it using npm (`npm install webvtt-parser-esm`).
+
+### How to load in HTML page:
+
+```
+<script type="module">
+  import { WebVTTParser, WebVTTSerializer } from './parser.mjs';  // public path to parser.mjs
+
+  /***
+  Working with  WebVTTParser, WebVTTSerializer ...
+  How to: See API
+  ***/
+</script>
+```
+
+### How to load in NodeJS runtime:
+
+If your project in CommonJS, you need to do something to imports ESM packages into CommonJS.
+
+If downloaded from GitHub:
+
+* For download from GitHub use ```gh repo clone BohdanVovkotrub/webvtt.js``` or ```git clone https://github.com/BohdanVovkotrub/webvtt.js.git``` or download then unzip .zip from url <https://github.com/BohdanVovkotrub/webvtt.js>
+* If downloaded package is will your main project folder, or you want to run tests, you must install required packages.
+<br>Go to the package folder (where is package.json) and run:
+  ```
+  npm install
+  ```
+  * That's will install all the required packages.
+
+  Then:
+  ```
+  import { WebVTTParser, WebVTTSerializer } from './parser.mjs';  // path to downloaded parser.mjs
+  ```
+
+If downloaded by NPM:
+
+* For download by NPM use 
+  ```
+  npm i webvtt-parser-esm
+  ```
+
+  ```
+  import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser-esm'; 
+  ```
+
 
 ## API
 
-This module exports classes to either through `window` or `require()`/`import`; the ones you are
+This module exports classes to either through `import`; the ones you are
 likely to need are `WebVTTParser` and `WebVTTSerializer`.
 
 To parse a WebVTT string:
 
 ```js
-import { WebVTTParser } from 'webvtt-parser';
+import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser-esm'; // ./parser.mjs
+
+const someVTT = `
+WEBVTT
+
+00:11.000 --> 00:13.000 vertical:rl
+<v Roger Bingham>We are in New York City
+
+00:13.000 --> 00:16.000
+<v Roger Bingham>We're actually at the Lucern Hotel, just down the street
+
+00:16.000 --> 00:18.000
+<v Roger Bingham>from the American Museum of Natural History
+
+00:18.000 --> 00:20.000
+<v Roger Bingham>And with me is Neil deGrasse Tyson
+
+00:20.000 --> 00:22.000
+<v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium
+`;
+
 const parser = new WebVTTParser();
-const tree = parser.parse(someVTT, 'metadata');
+const parsedVtt = parser.parse(someVTT, 'metadata');
 ```
 
 By default, the WebVTT parser only recognizes a small subset of named character entities. If you want the full spec-compliant behavior, pass the content of [[html-entities.json]] to the `WebVTTParser()` constructor.
 
 To serialize a WebVTT tree to string:
 
 ```js
-import { WebVTTSerializer } from 'webvtt-parser';
+import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser-esm'; // ./parser.mjs
 const seri = new WebVTTSerializer();
-const tree = seri.serialize(vttTree.cues)
+const serializedVtt = seri.serialize(parsedVtt.cues);
+
+// NOTE: In serialization the parameter tree of every Cue is used, not text!
+```
+
+
+## Tests
+
+After download this pakage you can run test before using to make sure everything is working.
+
+For to do it go to the package folder (where is package.json) and run:
+
+```
+npm run test
+```
+
+* You must install required packages before do it with ```npm install```
+
+After successfull testing you will see: ```70 passing (90ms)```
+
+<hr>
+
+## # parser.html example
+
+***parser.html*** - it's official example to usage this package, but is imported in ESM syntax.
+
+You can open ```parser.html``` in your WebBrowser.
+To do it you need to run this folder over HTTP webserver.
+For example to running simple HTTP server on this folder you can run
+(installed Python required):
+```
+python -m http.server 8080
 ```
+Open http://localhost:8080/parser.html

package.json

@@ -1,29 +1,42 @@
 {
-  "name": "webvtt-parser",
-  "version": "2.2.0",
-  "description": "WebVTT parser and validator",
-  "main": "parser.js",
-  "files": ["parser.js", "html-entities.json"],
+  "type": "module",
+  "name": "webvtt-parser-esm",
+  "version": "1.0.0",
+  "description": "Non-official WebVTT parser and validator. ESM compatible fork of original w3c/webvtt.js ver.2.2.0.",
+  "main": "parser.mjs",
+  "files": [
+    "parser.mjs",
+    "html-entities.json"
+  ],
   "scripts": {
     "test": "mocha"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/w3c/webvtt.js.git"
+    "url": "https://github.com/BohdanVovkotrub/webvtt.js.git"
   },
   "keywords": [
     "WebVTT"
   ],
   "author": "Anne van Kesteren <[email protected]>",
-  "contributors": [],
+  "maintainers": [
+    {
+      "name": "Bohdan Vovkotrub",
+      "email": "[email protected]",
+      "url": "https://github.com/BohdanVovkotrub/webvtt.js"
+    }
+  ],
+  "contributors": [
+    "Anne van Kesteren <[email protected]>",
+    "Bohdan Vovkotrub <[email protected]>"
+  ],
   "license": "CC0-1.0",
   "bugs": {
-    "url": "https://github.com/w3c/webvtt.js/issues"
+    "url": "https://github.com/BohdanVovkotrub/webvtt.js/issues"
   },
-  "homepage": "https://github.com/w3c/webvtt.js",
+  "homepage": "https://github.com/BohdanVovkotrub/webvtt.js",
   "devDependencies": {
     "chai": "^4.2.0",
     "mocha": "^8.0.1"
-  },
-  "dependencies": {}
+  }
 }

parser.html

@@ -2,14 +2,27 @@
 <meta charset=utf-8>
 <title>Live WebVTT Validator</title>
 <style>
- body { font:80% Helvetica Neue, sans-serif }
- h1 { font-size:1.2em }
- textarea { width:100%; height:30em }
- .copyright { font-size:.8em; color:grey }
+  body {
+    font: 80% Helvetica Neue, sans-serif
+  }
+
+  h1 {
+    font-size: 1.2em
+  }
+
+  textarea {
+    width: 100%;
+    height: 30em
+  }
+
+  .copyright {
+    font-size: .8em;
+    color: grey
+  }
 </style>
 <h1>Live <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a> Validator</h1>
-<script src=parser.js></script>
-<p><textarea oninput=test()>WEBVTT
+<!-- <script module src=parser.js></script> -->
+<p><textarea id="my-textarea">WEBVTT
 
 00:11.000 --> 00:13.000 vertical:rl
 <v Roger Bingham>We are in New York City
@@ -27,30 +40,37 @@ <h1>Live <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a> Validator</h1>
 <v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium
 
 </textarea>
-<p>Kind: <select id=kind onchange=test()><option>subtitles/captions/descriptions<option>metadata<option>chapters</select>
+<p>Kind: <select id=kind onchange=test()>
+    <option>subtitles/captions/descriptions
+    <option>metadata
+    <option>chapters
+  </select>
 <p id=status>You need JavaScript for this service.
 <ol></ol>
 <pre hidden></pre>
-<script>
+<script type="module">
+  import { WebVTTParser, WebVTTSerializer } from './parser.mjs';
+  const myTextarea = document.querySelector('#my-textarea');
+  myTextarea.addEventListener('input', test);
   function test() {
     var pa = new WebVTTParser(),
-        r = pa.parse(document.getElementsByTagName("textarea")[0].value, document.getElementById("kind").value)
+      r = pa.parse(document.getElementsByTagName("textarea")[0].value, document.getElementById("kind").value)
     var ol = document.getElementsByTagName("ol")[0],
-        p = document.getElementById("status"),
-        pre = document.getElementsByTagName("pre")[0]
+      p = document.getElementById("status"),
+      pre = document.getElementsByTagName("pre")[0]
     ol.textContent = ""
-    if(r.errors.length > 0) {
-      if(r.errors.length == 1)
+    if (r.errors.length > 0) {
+      if (r.errors.length == 1)
         p.textContent = "Almost there!"
-      else if(r.errors.length < 5)
+      else if (r.errors.length < 5)
         p.textContent = "Not bad, keep at it!"
       else
         p.textContent = "You are hopeless, RTFS."
-      for(var i = 0; i < r.errors.length; i++) {
+      for (var i = 0; i < r.errors.length; i++) {
         var error = r.errors[i],
-            message = "Line " + error.line,
-            li = document.createElement("li")
-        if(error.col)
+          message = "Line " + error.line,
+          li = document.createElement("li")
+        if (error.col)
           message += ", column " + error.col
         li.textContent = message + ": " + error.message
         ol.appendChild(li)
@@ -67,7 +87,8 @@ <h1>Live <a href="http://dev.w3.org/html5/webvtt/">WebVTT</a> Validator</h1>
     var hmm = url.slice(url.indexOf("#")) == "#debug"
     document.getElementsByTagName("pre")[0].hidden = hmm ? false : true
   }
-  onhashchange = function(e) { debug(e.newURL) }
+  onhashchange = function (e) { debug(e.newURL) }
   debug(location.href)
 </script>
-<p class=copyright><a href="https://github.com/annevk/webvtt">Source code</a> available under <a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
+<p class=copyright><a href="https://github.com/annevk/webvtt">Source code</a> available under <a
+    href="http://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.