fix: position, lineAlign, positionAlign (#36)

Also, increase backwards compatibility and compatibility with native vttcue implementations.

Author: gkatsev

lib/vtt.js

@@ -213,7 +213,9 @@ function parseCue(input, cue, regionList) {
     // Apply default values for any missing fields.
     cue.region = settings.get("region", null);
     cue.vertical = settings.get("vertical", "");
-    cue.line = settings.get("line", "auto");
+    try {
+      cue.line = settings.get("line", "auto");
+    } catch (e) {}
     cue.lineAlign = settings.get("lineAlign", "start");
     cue.snapToLines = settings.get("snapToLines", true);
     cue.size = settings.get("size", 100);
@@ -223,14 +225,20 @@ function parseCue(input, cue, regionList) {
     } catch (e) {
       cue.align = settings.get("align", "middle");
     }
-    cue.position = settings.get("position", {
-      start: 0,
-      left: 0,
-      center: 50,
-      middle: 50,
-      end: 100,
-      right: 100
-    }, cue.align);
+    try {
+      cue.position = settings.get("position", "auto");
+    } catch (e) {
+      cue.position = settings.get("position", {
+        start: 0,
+        left: 0,
+        center: 50,
+        middle: 50,
+        end: 100,
+        right: 100
+      }, cue.align);
+    }
+
+
     cue.positionAlign = settings.get("positionAlign", {
       start: "start",
       left: "start",

lib/vttcue.js

@@ -25,7 +25,10 @@ var alignSetting = {
   "center": 1,
   "end": 1,
   "left": 1,
-  "right": 1
+  "right": 1,
+  "auto": 1,
+  "line-left": 1,
+  "line-right": 1
 };
 
 function findDirectionSetting(value) {
@@ -70,9 +73,9 @@ function VTTCue(startTime, endTime, text) {
   var _snapToLines = true;
   var _line = "auto";
   var _lineAlign = "start";
-  var _position = 50;
-  var _positionAlign = "center";
-  var _size = 50;
+  var _position = "auto";
+  var _positionAlign = "auto";
+  var _size = 100;
   var _align = "center";
 
   Object.defineProperties(this, {
@@ -195,10 +198,11 @@ function VTTCue(startTime, endTime, text) {
       set: function(value) {
         var setting = findAlignSetting(value);
         if (!setting) {
-          throw new SyntaxError("lineAlign: an invalid or illegal alignment string was specified.");
+          console.warn("lineAlign: an invalid or illegal string was specified.");
+        } else {
+          _lineAlign = setting;
+          this.hasBeenReset = true;
         }
-        _lineAlign = setting;
-        this.hasBeenReset = true;
       }
     },
 
@@ -224,10 +228,11 @@ function VTTCue(startTime, endTime, text) {
       set: function(value) {
         var setting = findAlignSetting(value);
         if (!setting) {
-          throw new SyntaxError("positionAlign: An invalid or illegal alignment string was specified.");
+          console.warn("positionAlign: an invalid or illegal string was specified.");
+        } else {
+          _positionAlign = setting;
+          this.hasBeenReset = true;
         }
-        _positionAlign = setting;
-        this.hasBeenReset = true;
       }
     },
 
@@ -253,7 +258,7 @@ function VTTCue(startTime, endTime, text) {
       set: function(value) {
         var setting = findAlignSetting(value);
         if (!setting) {
-          throw new SyntaxError("align: An invalid or illegal alignment string was specified.");
+          throw new SyntaxError("align: an invalid or illegal alignment string was specified.");
         }
         _align = setting;
         this.hasBeenReset = true;