wai-website-theme 1.2 → 1.3

data/assets/ableplayer/scripts/transcript.js

@@ -35,7 +35,6 @@
 
     languageSelectWrapper.append($('<label for="transcript-language-select">' + this.tt.language + ': </label>'), this.$transcriptLanguageSelect);
     this.$transcriptToolbar.append(languageSelectWrapper);
-
     this.$transcriptArea.append(this.$transcriptToolbar, this.$transcriptDiv);
 
     // If client has provided separate transcript location, put it there.
@@ -70,7 +69,7 @@
       thisObj.handleTranscriptLockToggle(thisObj.$autoScrollTranscriptCheckbox.prop('checked'));
     });
 
-    this.$transcriptDiv.bind('mousewheel DOMMouseScroll click scroll', function (event) {
+    this.$transcriptDiv.on('mousewheel DOMMouseScroll click scroll', function (e) {
       // Propagation is stopped in transcript click handler, so clicks are on the scrollbar
       // or outside of a clickable span.
       if (!thisObj.scrollingTranscript) {
@@ -82,10 +81,10 @@
 
     if (typeof this.$transcriptLanguageSelect !== 'undefined') {
 
-      this.$transcriptLanguageSelect.on('click mousedown',function (event) {
+      this.$transcriptLanguageSelect.on('click mousedown',function (e) {
         // execute default behavior
         // prevent propagation of mouse event to toolbar or window
-        event.stopPropagation();
+        e.stopPropagation();
       });
 
       this.$transcriptLanguageSelect.on('change',function () {
@@ -212,11 +211,21 @@
     // Pressing Enter on an element that is not natively clickable does NOT trigger click()
     // Keydown events are handled elsehwere, both globally (ableplayer-base.js) and locally (event.js)
     if (this.$transcriptArea.length > 0) {
-      this.$transcriptArea.find('span.able-transcript-seekpoint').click(function(event) {
+      this.$transcriptArea.find('span.able-transcript-seekpoint').click(function(e) {
+        thisObj.seekTrigger = 'transcript';
         var spanStart = parseFloat($(this).attr('data-start'));
         // Add a tiny amount so that we're inside the span.
         spanStart += .01;
-        thisObj.seekTo(spanStart);
+        // Each click within the transcript triggers two click events (not sure why)
+        // this.seekingFromTranscript is a stopgab to prevent two calls to SeekTo()
+        if (!thisObj.seekingFromTranscript) {
+          thisObj.seekingFromTranscript = true;
+          thisObj.seekTo(spanStart);
+        }
+        else {
+          // don't seek a second time, but do reset var
+          thisObj.seekingFromTranscript = false;
+        }
       });
     }
   };

data/assets/ableplayer/scripts/translation.js

@@ -2,42 +2,51 @@
   AblePlayer.prototype.getSupportedLangs = function() {
     // returns an array of languages for which AblePlayer has translation tables
     // Removing 'nl' as of 2.3.54, pending updates
-    var langs = ['ca','de','en','es','fr','it','ja'];
+    var langs = ['ca','de','en','es','fr','he','it','ja','nb','zh-tw'];
     return langs;
   };
 
   AblePlayer.prototype.getTranslationText = function() {
     // determine language, then get labels and prompts from corresponding translation var
     var deferred, thisObj, lang, thisObj, msg, translationFile;
-
     deferred = $.Deferred();
 
     thisObj = this;
 
+    // get language of the web page, if specified
+    if ($('body').attr('lang')) {
+      lang = $('body').attr('lang');
+    }
+    else if ($('html').attr('lang')) {
+      lang = $('html').attr('lang');
+    }
+    else {
+      lang = null;
+    }
+
     // override this.lang to language of the web page, if known and supported
     // otherwise this.lang will continue using default
     if (!this.forceLang) {
-      if ($('body').attr('lang')) {
-        lang = $('body').attr('lang');
-      }
-      else if ($('html').attr('lang')) {
-        lang = $('html').attr('lang');
-      }
-      if (lang !== this.lang) {
-        msg = 'Language of web page (' + lang +') ';
-        if ($.inArray(lang,this.getSupportedLangs()) !== -1) {
-          // this is a supported lang
-          msg += ' has a translation table available.';
-          this.lang = lang;
-        }
-        else {
-          msg += ' is not currently supported. Using default language (' + this.lang + ')';
-        }
-        if (this.debug) {
-          console.log(msg);
+      if (lang) {
+        if (lang !== this.lang) {
+          msg = 'Language of web page (' + lang +') ';
+          if ($.inArray(lang,this.getSupportedLangs()) !== -1) {
+            // this is a supported lang
+            msg += ' has a translation table available.';
+            this.lang = lang;
+          }
+          else {
+            msg += ' is not currently supported. Using default language (' + this.lang + ')';
+          }
+          if (this.debug) {
+            console.log(msg);
+          }
         }
       }
     }
+    if (!this.searchLang) {
+      this.searchLang = this.lang;
+    }
     translationFile = this.rootPath + 'translations/' + this.lang + '.js';
     this.importTranslationFile(translationFile).then(function(result) {
       thisObj.tt = eval(thisObj.lang);

data/assets/ableplayer/scripts/ttml2webvtt.js

@@ -0,0 +1,87 @@
+(function($) {
+  AblePlayer.prototype.computeEndTime = function(startTime, durationTime) {
+    var SECONDS = 0;
+    var MINUTES = 1;
+    var HOURS = 2;
+
+    var startParts = startTime
+      .split(':')
+      .reverse()
+      .map(function(value) {
+        return parseFloat(value);
+      });
+
+    var durationParts = durationTime
+      .split(':')
+      .reverse()
+      .map(function(value) {
+        return parseFloat(value);
+      });
+
+    var endTime = startParts
+      .reduce(function(acc, val, index) {
+        var sum = val + durationParts[index];
+
+        if (index === SECONDS) {
+          if (sum > 60) {
+            durationParts[index + 1] += 1;
+            sum -= 60;
+          }
+
+          sum = sum.toFixed(3);
+        }
+
+        if (index === MINUTES) {
+          if (sum > 60) {
+            durationParts[index + 1] += 1;
+            sum -= 60;
+          }
+        }
+
+        if (sum < 10) {
+          sum = '0' + sum;
+        }
+
+        acc.push(sum);
+
+        return acc;
+      }, [])
+      .reverse()
+      .join(':');
+
+    return endTime;
+  };
+
+  AblePlayer.prototype.ttml2webvtt = function(contents) {
+    var thisObj = this;
+
+    var xml = thisObj.convert.xml2json(contents, {
+      ignoreComment: true,
+      alwaysChildren: true,
+      compact: true,
+      spaces: 2
+    });
+
+    var vttHeader = 'WEBVTT\n\n\n';
+    var captions = JSON.parse(xml).tt.body.div.p;
+
+    var vttCaptions = captions.reduce(function(acc, value, index) {
+      var text = value._text;
+      var isArray = Array.isArray(text);
+      var attributes = value._attributes;
+      var endTime = thisObj.computeEndTime(attributes.begin, attributes.dur);
+
+      var caption =
+        thisObj.computeEndTime(attributes.begin, '00:00:0') +
+        ' --> ' +
+        thisObj.computeEndTime(attributes.begin, attributes.dur) +
+        '\n' +
+        (isArray ? text.join('\n') : text) +
+        '\n\n';
+
+      return acc + caption;
+    }, vttHeader);
+
+    return vttCaptions;
+  };
+})(jQuery);

data/assets/ableplayer/scripts/volume.js

@@ -22,11 +22,11 @@
       'id': volumeSliderId,
       'class': 'able-volume-slider',
       'aria-hidden': 'true'
-    });
+    }).hide();
     this.$volumeSliderTooltip = $('<div>',{
       'class': 'able-tooltip',
       'role': 'tooltip'
-    });
+    }).hide();
     this.$volumeSliderTrack = $('<div>',{
       'class': 'able-volume-track'
     });
@@ -63,42 +63,42 @@
     this.refreshVolumeSlider(this.volume);
 
     // add event listeners
-    this.$volumeSliderHead.on('mousedown',function (event) {
-      event.preventDefault(); // prevent text selection (implications?)
+    this.$volumeSliderHead.on('mousedown',function (e) {
+      e.preventDefault(); // prevent text selection (implications?)
       thisObj.draggingVolume = true;
       thisObj.volumeHeadPositionTop = $(this).offset().top;
     });
 
     // prevent dragging after mouseup as mouseup not detected over iframe (YouTube)
-    this.$mediaContainer.on('mouseover',function (event) {
+    this.$mediaContainer.on('mouseover',function (e) {
       if(thisObj.player == 'youtube'){
         thisObj.draggingVolume = false;
       }
     });
 
-    $(document).on('mouseup',function (event) {
+    $(document).on('mouseup',function (e) {
       thisObj.draggingVolume = false;
     });
 
-    $(document).on('mousemove',function (event) {
+    $(document).on('mousemove',function (e) {
       if (thisObj.draggingVolume) {
-        x = event.pageX;
-        y = event.pageY;
+        x = e.pageX;
+        y = e.pageY;
         thisObj.moveVolumeHead(y);
       }
     });
 
-    this.$volumeSliderHead.on('keydown',function (event) {
+    this.$volumeSliderHead.on('keydown',function (e) {
       // Left arrow or down arrow
-      if (event.which === 37 || event.which === 40) {
+      if (e.which === 37 || e.which === 40) {
         thisObj.handleVolume('down');
       }
       // Right arrow or up arrow
-      else if (event.which === 39 || event.which === 38) {
+      else if (e.which === 39 || e.which === 38) {
         thisObj.handleVolume('up');
       }
       // Escape key or Enter key
-      else if (event.which === 27 || event.which === 13) {
+      else if (e.which === 27 || e.which === 13) {
         // close popup
         if (thisObj.$volumeSlider.is(':visible')) {
           thisObj.hideVolumePopup();
@@ -110,7 +110,7 @@
       else {
         return;
       }
-      event.preventDefault();
+      e.preventDefault();
     });
   };
 
@@ -268,6 +268,7 @@
     this.closePopups();
     this.$tooltipDiv.hide();
     this.$volumeSlider.show().attr('aria-hidden','false');
+    this.$volumeButton.attr('aria-expanded','true');
     this.$volumeSliderHead.attr('tabindex','0').focus();
   };
 
@@ -275,7 +276,7 @@
 
     this.$volumeSlider.hide().attr('aria-hidden','true');
     this.$volumeSliderHead.attr('tabindex','-1');
-    this.$volumeButton.focus();
+    this.$volumeButton.attr('aria-expanded','false').focus();
   };
 
   AblePlayer.prototype.isMuted = function () {

data/assets/ableplayer/scripts/vts.js

@@ -0,0 +1,1093 @@
+/* Video Transcript Sorter (VTS)
+ * Used to synchronize time stamps from WebVTT resources
+ * so they appear in the proper sequence within an auto-generated interactive transcript
+*/
+
+(function ($) {
+  AblePlayer.prototype.injectVTS = function() {
+
+    // To add a transcript sorter to a web page:
+    // Add <div id="able-vts"></div> to the web page
+
+    // Define all variables
+    var thisObj, tracks, $heading;
+    var $instructions, $p1, $p2, $ul, $li1, $li2, $li3;
+    var $fieldset, $legend, i, $radioDiv, radioId, $label, $radio;
+    var $saveButton, $savedTable;
+
+    thisObj = this;
+
+    if ($('#able-vts').length) {
+      // Page includes a container for a VTS instance
+
+      // Are they qualifying tracks?
+      if (this.vtsTracks.length) {
+        // Yes - there are!
+
+        // Build an array of unique languages
+        this.langs = [];
+        this.getAllLangs(this.vtsTracks);
+
+        // Set the default VTS language
+        this.vtsLang = this.lang;
+
+        // Inject a heading
+        $heading = $('<h2>').text('Video Transcript Sorter'); // TODO: Localize; intelligently assign proper heading level
+        $('#able-vts').append($heading);
+
+        // Inject an empty div for writing messages
+        this.$vtsAlert = $('<div>',{
+          'id': 'able-vts-alert',
+          'aria-live': 'polite',
+          'aria-atomic': 'true'
+        })
+        $('#able-vts').append(this.$vtsAlert);
+
+        // Inject instructions (TODO: Localize)
+        $instructions = $('<div>',{
+          'id': 'able-vts-instructions'
+        });
+        $p1 = $('<p>').text('Use the Video Transcript Sorter to perform any of the following tasks:');
+        $ul = $('<ul>');
+        $li1 = $('<li>').text('Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player\'s auto-generated transcript.');
+        $li2 = $('<li>').text('Modify content or start/end times (all are directly editable within the table).');
+        $li3 = $('<li>').text('Insert new content, such as chapters or descriptions.');
+        $p2 = $('<p>').text('When finished editing, click the "Save Changes" button. This will auto-generate new content for all relevant timed text files (chapters, descriptions, captions, and/or subtitles), which can be copied and pasted into separate WebVTT files for use by Able Player.');
+        $ul.append($li1,$li2,$li3);
+        $instructions.append($p1,$ul,$p2);
+        $('#able-vts').append($instructions);
+
+        // Inject a fieldset with radio buttons for each language
+        $fieldset = $('<fieldset>');
+        $legend = $('<legend>').text('Select a language'); // TODO: Localize this
+        $fieldset.append($legend)
+        for (i in this.langs) {
+          radioId = 'vts-lang-radio-' + this.langs[i];
+          $radioDiv = $('<div>',{
+            // uncomment the following if label is native name
+            // 'lang': this.langs[i]
+          });
+          $radio = $('<input>', {
+            'type': 'radio',
+            'name': 'vts-lang',
+            'id': radioId,
+            'value': this.langs[i]
+          }).on('click',function() {
+            thisObj.vtsLang = $(this).val();
+            thisObj.showVtsAlert('Loading ' + thisObj.getLanguageName(thisObj.vtsLang) + ' tracks');
+            thisObj.injectVtsTable('update',thisObj.vtsLang);
+          });
+          if (this.langs[i] == this.lang) {
+            // this is the default language.
+            $radio.prop('checked',true);
+          }
+          $label = $('<label>', {
+            'for': radioId
+            // Two options for label:
+            // getLanguageNativeName() - returns native name; if using this be sure to add lang attr to <div> (see above)
+            // getLanguageName() - returns name in English; doesn't require lang attr on <label>
+          }).text(this.getLanguageName(this.langs[i]));
+          $radioDiv.append($radio,$label);
+          $fieldset.append($radioDiv);
+        }
+        $('#able-vts').append($fieldset);
+
+        // Inject a 'Save Changes' button
+        $saveButton = $('<button>',{
+          'type': 'button',
+          'id': 'able-vts-save',
+          'value': 'save'
+        }).text('Save Changes'); // TODO: Localize this
+        $('#able-vts').append($saveButton);
+
+        // Inject a table with one row for each cue in the default language
+        this.injectVtsTable('add',this.vtsLang);
+
+        // TODO: Add drag/drop functionality for mousers
+
+        // Add event listeners for contenteditable cells
+        var kindOptions, beforeEditing, editedCell, editedContent, i, closestKind;
+        kindOptions = ['captions','chapters','descriptions','subtitles'];
+        $('td[contenteditable="true"]').on('focus',function() {
+          beforeEditing = $(this).text();
+        }).on('blur',function() {
+          if (beforeEditing != $(this).text()) {
+            editedCell = $(this).index();
+            editedContent = $(this).text();
+            if (editedCell === 1) {
+              // do some simple spelling auto-correct
+              if ($.inArray(editedContent,kindOptions) === -1) {
+                // whatever user typed is not a valid kind
+                // assume they correctly typed the first character
+                if (editedContent.substr(0,1) === 's') {
+                  $(this).text('subtitles');
+                }
+                else if (editedContent.substr(0,1) === 'd') {
+                  $(this).text('descriptions');
+                }
+                else if (editedContent.substr(0,2) === 'ch') {
+                  $(this).text('chapters');
+                }
+                else {
+                  // whatever else they types, assume 'captions'
+                  $(this).text('captions');
+                }
+              }
+            }
+            else if (editedCell === 2 || editedCell === 3) {
+              // start or end time
+              // ensure proper formatting (with 3 decimal places)
+              $(this).text(thisObj.formatTimestamp(editedContent));
+            }
+          }
+        }).on('keydown',function(e) {
+          // don't allow keystrokes to trigger Able Player (or other) functions
+          // while user is editing
+          e.stopPropagation();
+        });
+
+        // handle click on the Save button
+
+        // handle click on the Save button
+        $('#able-vts-save').on('click',function(e) {
+          e.stopPropagation();
+          if ($(this).attr('value') == 'save') {
+            // replace table with WebVTT output in textarea fields (for copying/pasting)
+            $(this).attr('value','cancel').text('Return to Editor'); // TODO: Localize this
+            $savedTable = $('#able-vts table');
+            $('#able-vts-instructions').hide();
+            $('#able-vts > fieldset').hide();
+            $('#able-vts table').remove();
+            $('#able-vts-icon-credit').remove();
+            thisObj.parseVtsOutput($savedTable);
+          }
+          else {
+            // cancel saving, and restore the table using edited content
+            $(this).attr('value','save').text('Save Changes'); // TODO: Localize this
+            $('#able-vts-output').remove();
+            $('#able-vts-instructions').show();
+            $('#able-vts > fieldset').show();
+            $('#able-vts').append($savedTable);
+            $('#able-vts').append(thisObj.getIconCredit());
+            thisObj.showVtsAlert('Cancelling saving. Any edits you made have been restored in the VTS table.'); // TODO: Localize this
+          }
+        });
+      }
+    }
+  };
+
+  AblePlayer.prototype.setupVtsTracks = function(kind, lang, label, src, contents) {
+
+    // Called from tracks.js
+
+    var srcFile, vtsCues;
+
+    srcFile = this.getFilenameFromPath(src);
+    vtsCues = this.parseVtsTracks(contents);
+
+    this.vtsTracks.push({
+      'kind': kind,
+      'language': lang,
+      'label': label,
+      'srcFile': srcFile,
+      'cues': vtsCues
+    });
+  };
+
+  AblePlayer.prototype.getFilenameFromPath = function(path) {
+
+    var lastSlash;
+
+    lastSlash = path.lastIndexOf('/');
+    if (lastSlash === -1) {
+      // there are no slashes in path.
+      return path;
+    }
+    else {
+      return path.substr(lastSlash+1);
+    }
+  };
+
+  AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) {
+
+    for (var i=0; i<this.vtsTracks.length; i++) {
+      if (this.vtsTracks[i].kind === kind && this.vtsTracks[i].language === lang) {
+        // this is a matching track
+        // srcFile has already been converted to filename from path before saving to vtsTracks
+        return this.vtsTracks[i].srcFile;
+      }
+    }
+    // no matching track found
+    return false;
+  };
+
+  AblePlayer.prototype.parseVtsTracks = function(contents) {
+
+    var rows, timeParts, cues, i, j, thisRow, nextRow, content, blankRow;
+    rows = contents.split("\n");
+    cues = [];
+    i = 0;
+    while (i < rows.length) {
+      thisRow = rows[i];
+      if (thisRow.indexOf(' --> ') !== -1) {
+        // this is probably a time row
+        timeParts = thisRow.trim().split(' ');
+        if (this.isValidTimestamp(timeParts[0]) && this.isValidTimestamp(timeParts[2])) {
+          // both timestamps are valid. This is definitely a time row
+          content = '';
+          j = i+1;
+          blankRow = false;
+          while (j < rows.length && !blankRow) {
+            nextRow = rows[j].trim();
+            if (nextRow.length > 0) {
+              if (content.length > 0) {
+                // add back the EOL between rows of content
+                content += "\n" + nextRow;
+              }
+              else {
+                // this is the first row of content. No need for an EOL
+                content += nextRow;
+              }
+            }
+            else {
+              blankRow = true;
+            }
+            j++;
+          }
+          cues.push({
+            'start': timeParts[0],
+            'end': timeParts[2],
+            'content': content
+          });
+          i = j; //skip ahead
+        }
+      }
+      else {
+        i++;
+      }
+    }
+    return cues;
+  };
+
+  AblePlayer.prototype.isValidTimestamp = function(timestamp) {
+
+    // return true if timestamp contains only numbers or expected punctuation
+    if (/^[0-9:,.]*$/.test(timestamp)) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  };
+
+  AblePlayer.prototype.formatTimestamp = function(timestamp) {
+
+    // timestamp is a string in the form "HH:MM:SS.xxx"
+    // Take some simple steps to ensure edited timestamp values still adhere to expected format
+
+    var firstPart, lastPart;
+
+    var firstPart = timestamp.substr(0,timestamp.lastIndexOf('.')+1);
+    var lastPart = timestamp.substr(timestamp.lastIndexOf('.')+1);
+
+    // TODO: Be sure each component within firstPart has only exactly two digits
+    // Probably can't justify doing this automatically
+    // If users enters '5' for minutes, that could be either '05' or '50'
+    // This should trigger an error and prompt the user to correct the value before proceeding
+
+    // Be sure lastPart has exactly three digits
+    if (lastPart.length > 3) {
+      // chop off any extra digits
+      lastPart = lastPart.substr(0,3);
+    }
+    else if (lastPart.length < 3) {
+      // add trailing zeros
+      while (lastPart.length < 3) {
+        lastPart += '0';
+      }
+    }
+    return firstPart + lastPart;
+  };
+
+
+  AblePlayer.prototype.injectVtsTable = function(action,lang) {
+
+    // action is either 'add' (for a new table) or 'update' (if user has selected a new lang)
+
+    var $table, headers, i, $tr, $th, $td, rows, rowNum, rowId;
+
+    if (action === 'update') {
+      // remove existing table
+      $('#able-vts table').remove();
+      $('#able-vts-icon-credit').remove();
+    }
+
+    $table = $('<table>',{
+      'lang': lang
+    });
+    $tr = $('<tr>',{
+      'lang': 'en' // TEMP, until header row is localized
+    });
+    headers = ['Row #','Kind','Start','End','Content','Actions']; // TODO: Localize this
+    for (i=0; i < headers.length; i++) {
+      $th = $('<th>', {
+        'scope': 'col'
+      }).text(headers[i]);
+      if (headers[i] === 'Actions') {
+        $th.addClass('actions');
+      }
+      $tr.append($th);
+    }
+    $table.append($tr);
+
+    // Get all rows (sorted by start time), and inject them into table
+    rows = this.getAllRows(lang);
+    for (i=0; i < rows.length; i++) {
+      rowNum = i + 1;
+      rowId = 'able-vts-row-' + rowNum;
+      $tr = $('<tr>',{
+        'id': rowId,
+        'class': 'kind-' + rows[i].kind
+      });
+      // Row #
+      $td = $('<td>').text(rowNum);
+      $tr.append($td);
+
+      // Kind
+      $td = $('<td>',{
+        'contenteditable': 'true'
+      }).text(rows[i].kind);
+      $tr.append($td);
+
+      // Start
+      $td = $('<td>',{
+        'contenteditable': 'true'
+      }).text(rows[i].start);
+      $tr.append($td);
+
+      // End
+      $td = $('<td>',{
+        'contenteditable': 'true'
+      }).text(rows[i].end);
+      $tr.append($td);
+
+      // Content
+      $td = $('<td>',{
+        'contenteditable': 'true'
+      }).text(rows[i].content); // TODO: Preserve tags
+      $tr.append($td);
+
+          // Actions
+      $td = this.addVtsActionButtons(rowNum,rows.length);
+      $tr.append($td);
+
+      $table.append($tr);
+    }
+    $('#able-vts').append($table);
+
+    // Add credit for action button SVG icons
+    $('#able-vts').append(this.getIconCredit());
+
+  };
+
+  AblePlayer.prototype.addVtsActionButtons = function(rowNum,numRows) {
+
+    // rowNum is the number of the current table row (starting with 1)
+    // numRows is the total number of rows (excluding the header row)
+    // TODO: Position buttons so they're vertically aligned, even if missing an Up or Down button
+    var thisObj, $td, buttons, i, button, $button, $svg, $g, pathString, pathString2, $path, $path2;
+    thisObj = this;
+    $td = $('<td>');
+    buttons = ['up','down','insert','delete'];
+
+    for (i=0; i < buttons.length; i++) {
+      button = buttons[i];
+      if (button === 'up') {
+        if (rowNum > 1) {
+          $button = $('<button>',{
+            'id': 'able-vts-button-up-' + rowNum,
+            'title': 'Move up',
+            'aria-label': 'Move Row ' + rowNum + ' up'
+          }).on('click', function(el) {
+            thisObj.onClickVtsActionButton(el.currentTarget);
+          });
+          $svg = $('<svg>',{
+            'focusable': 'false',
+            'aria-hidden': 'true',
+            'x': '0px',
+            'y': '0px',
+            'width': '254.296px',
+            'height': '254.296px',
+            'viewBox': '0 0 254.296 254.296',
+            'style': 'enable-background:new 0 0 254.296 254.296'
+          });
+          pathString = 'M249.628,176.101L138.421,52.88c-6.198-6.929-16.241-6.929-22.407,0l-0.381,0.636L4.648,176.101'
+            + 'c-6.198,6.897-6.198,18.052,0,24.981l0.191,0.159c2.892,3.305,6.865,5.371,11.346,5.371h221.937c4.577,0,8.613-2.161,11.41-5.594'
+            + 'l0.064,0.064C255.857,194.153,255.857,182.998,249.628,176.101z';
+          $path = $('<path>',{
+            'd': pathString
+          });
+          $g = $('<g>').append($path);
+          $svg.append($g);
+          $button.append($svg);
+          // Refresh button in the DOM in order for browser to process & display the SVG
+          $button.html($button.html());
+          $td.append($button);
+        }
+      }
+      else if (button === 'down') {
+        if (rowNum < numRows) {
+          $button = $('<button>',{
+            'id': 'able-vts-button-down-' + rowNum,
+            'title': 'Move down',
+            'aria-label': 'Move Row ' + rowNum + ' down'
+          }).on('click', function(el) {
+            thisObj.onClickVtsActionButton(el.currentTarget);
+          });
+          $svg = $('<svg>',{
+            'focusable': 'false',
+            'aria-hidden': 'true',
+            'x': '0px',
+            'y': '0px',
+            'width': '292.362px',
+            'height': '292.362px',
+            'viewBox': '0 0 292.362 292.362',
+            'style': 'enable-background:new 0 0 292.362 292.362'
+          });
+          pathString = 'M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424'
+            + 'C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428'
+            + 's9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z';
+          $path = $('<path>',{
+            'd': pathString
+          });
+          $g = $('<g>').append($path);
+          $svg.append($g);
+          $button.append($svg);
+          // Refresh button in the DOM in order for browser to process & display the SVG
+          $button.html($button.html());
+          $td.append($button);
+        }
+      }
+      else if (button === 'insert') {
+        // Add Insert button to all rows
+        $button = $('<button>',{
+          'id': 'able-vts-button-insert-' + rowNum,
+          'title': 'Insert row below',
+          'aria-label': 'Insert row before Row ' + rowNum
+        }).on('click', function(el) {
+          thisObj.onClickVtsActionButton(el.currentTarget);
+        });
+        $svg = $('<svg>',{
+          'focusable': 'false',
+          'aria-hidden': 'true',
+          'x': '0px',
+          'y': '0px',
+          'width': '401.994px',
+          'height': '401.994px',
+          'viewBox': '0 0 401.994 401.994',
+          'style': 'enable-background:new 0 0 401.994 401.994'
+        });
+        pathString = 'M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811V27.406c0-7.611-2.666-14.084-7.994-19.414'
+          + 'C242.488,2.666,236.02,0,228.398,0h-54.812c-7.612,0-14.084,2.663-19.414,7.993c-5.33,5.33-7.994,11.803-7.994,19.414v118.775'
+          + 'H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589v54.819c0,7.618,2.662,14.086,7.992,19.411'
+          + 'c5.33,5.332,11.803,7.994,19.414,7.994h118.771V374.59c0,7.611,2.664,14.089,7.994,19.417c5.33,5.325,11.802,7.987,19.414,7.987'
+          + 'h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77'
+          + 'c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411v-54.819C401.991,165.973,399.332,159.502,394,154.175z';
+        $path = $('<path>',{
+          'd': pathString
+        });
+        $g = $('<g>').append($path);
+        $svg.append($g);
+        $button.append($svg);
+        // Refresh button in the DOM in order for browser to process & display the SVG
+        $button.html($button.html());
+        $td.append($button);
+      }
+      else if (button === 'delete') {
+        // Add Delete button to all rows
+        $button = $('<button>',{
+          'id': 'able-vts-button-delete-' + rowNum,
+          'title': 'Delete row ',
+          'aria-label': 'Delete Row ' + rowNum
+        }).on('click', function(el) {
+          thisObj.onClickVtsActionButton(el.currentTarget);
+        });
+        $svg = $('<svg>',{
+          'focusable': 'false',
+          'aria-hidden': 'true',
+          'x': '0px',
+          'y': '0px',
+          'width': '508.52px',
+          'height': '508.52px',
+          'viewBox': '0 0 508.52 508.52',
+          'style': 'enable-background:new 0 0 508.52 508.52'
+        });
+        pathString = 'M397.281,31.782h-63.565C333.716,14.239,319.478,0,301.934,0h-95.347'
+					+ 'c-17.544,0-31.782,14.239-31.782,31.782h-63.565c-17.544,0-31.782,14.239-31.782,31.782h349.607'
+					+ 'C429.063,46.021,414.825,31.782,397.281,31.782z';
+        $path = $('<path>',{
+          'd': pathString
+        });
+        pathString2 = 'M79.456,476.737c0,17.544,14.239,31.782,31.782,31.782h286.042'
+					+ 'c17.544,0,31.782-14.239,31.782-31.782V95.347H79.456V476.737z M333.716,174.804c0-8.772,7.151-15.891,15.891-15.891'
+					+ 'c8.74,0,15.891,7.119,15.891,15.891v254.26c0,8.74-7.151,15.891-15.891,15.891c-8.74,0-15.891-7.151-15.891-15.891V174.804z'
+					+ 'M238.369,174.804c0-8.772,7.119-15.891,15.891-15.891c8.74,0,15.891,7.119,15.891,15.891v254.26'
+					+ 'c0,8.74-7.151,15.891-15.891,15.891c-8.772,0-15.891-7.151-15.891-15.891V174.804z M143.021,174.804'
+					+ 'c0-8.772,7.119-15.891,15.891-15.891c8.772,0,15.891,7.119,15.891,15.891v254.26c0,8.74-7.119,15.891-15.891,15.891'
+					+ 'c-8.772,0-15.891-7.151-15.891-15.891V174.804z';
+        $path2 = $('<path>',{
+          'd': pathString2
+        });
+
+        $g = $('<g>').append($path,$path2);
+        $svg.append($g);
+        $button.append($svg);
+        // Refresh button in the DOM in order for browser to process & display the SVG
+        $button.html($button.html());
+        $td.append($button);
+      }
+    }
+    return $td;
+  };
+
+  AblePlayer.prototype.updateVtsActionButtons = function($buttons,nextRowNum) {
+
+    // TODO: Add some filters to this function to add or delete 'Up' and 'Down' buttons
+    // if row is moved to/from the first/last rows
+    var i, $thisButton, id, label, newId, newLabel;
+    for (i=0; i < $buttons.length; i++) {
+      $thisButton = $buttons.eq(i);
+      id = $thisButton.attr('id');
+      label = $thisButton.attr('aria-label');
+      // replace the integer (id) within each of the above strings
+      newId = id.replace(/[0-9]+/g, nextRowNum);
+      newLabel = label.replace(/[0-9]+/g, nextRowNum);
+      $thisButton.attr('id',newId);
+      $thisButton.attr('aria-label',newLabel);
+    }
+  }
+
+  AblePlayer.prototype.getIconCredit = function() {
+
+    var credit;
+    credit = '<div id="able-vts-icon-credit">'
+      + 'Action buttons made by <a href="https://www.flaticon.com/authors/elegant-themes">Elegant Themes</a> '
+      + 'from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> '
+      + 'are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" '
+      + 'target="_blank">CC 3.0 BY</a>'
+      + '</div>';
+      return credit;
+  };
+
+  AblePlayer.prototype.getAllLangs = function(tracks) {
+
+    // update this.langs with any unique languages found in tracks
+    var i;
+    for (i in tracks) {
+      if (tracks[i].hasOwnProperty('language')) {
+        if ($.inArray(tracks[i].language,this.langs) === -1) {
+          // this language is not already in the langs array. Add it.
+          this.langs[this.langs.length] = tracks[i].language;
+        }
+      }
+    }
+  };
+
+  AblePlayer.prototype.getAllRows = function(lang) {
+
+    // returns an array of data to be displayed in VTS table
+    // includes all cues for tracks of any type with matching lang
+    // cues are sorted by start time
+    var i, track, c, cues;
+    cues = [];
+    for (i=0; i < this.vtsTracks.length; i++) {
+      track = this.vtsTracks[i];
+      if (track.language == lang) {
+        // this track matches the language. Add its cues to array
+        for (c in track.cues) {
+          cues.push({
+            'kind': track.kind,
+            'lang': lang,
+            'id': track.cues[c].id,
+            'start': track.cues[c].start,
+            'end': track.cues[c].end,
+            'content': track.cues[c].content
+          });
+        }
+      }
+    }
+    // Now sort cues by start time
+    cues.sort(function(a,b) {
+      return a.start > b.start ? 1 : -1;
+    });
+    return cues;
+  };
+
+
+  AblePlayer.prototype.onClickVtsActionButton = function(el) {
+
+    // handle click on up, down, insert, or delete button
+    var idParts, action, rowNum;
+    idParts = $(el).attr('id').split('-');
+    action = idParts[3];
+    rowNum = idParts[4];
+    if (action == 'up') {
+      // move the row up
+      this.moveRow(rowNum,'up');
+    }
+    else if (action == 'down') {
+      // move the row down
+      this.moveRow(rowNum,'down');
+    }
+    else if (action == 'insert') {
+      // insert a row below
+      this.insertRow(rowNum);
+    }
+    else if (action == 'delete') {
+      // delete the row
+      this.deleteRow(rowNum);
+    }
+  };
+
+  AblePlayer.prototype.insertRow = function(rowNum) {
+
+    // Insert empty row below rowNum
+    var $table, $rows, numRows, newRowNum, newRowId, newTimes, $tr, $td;
+    var $select, options, i, $option, newKind, newClass, $parentRow;
+    var i, nextRowNum, $buttons;
+
+    $table = $('#able-vts table');
+    $rows = $table.find('tr');
+
+    numRows = $rows.length - 1; // exclude header row
+
+    newRowNum = parseInt(rowNum) + 1;
+    newRowId = 'able-vts-row-' + newRowNum;
+
+    // Create an empty row
+    $tr = $('<tr>',{
+      'id': newRowId
+    });
+
+    // Row #
+    $td = $('<td>').text(newRowNum);
+    $tr.append($td);
+
+    // Kind (add a select field for chosing a kind)
+    newKind = null;
+    $select = $('<select>',{
+      'id': 'able-vts-kind-' + newRowNum,
+      'aria-label': 'What kind of track is this?',
+      'placeholder': 'Select a kind'
+    }).on('change',function() {
+      newKind = $(this).val();
+      newClass = 'kind-' + newKind;
+      $parentRow = $(this).closest('tr');
+      // replace the select field with the chosen value as text
+      $(this).parent().text(newKind);
+      // add a class to the parent row
+      $parentRow.addClass(newClass);
+    });
+    options = ['','captions','chapters','descriptions','subtitles'];
+    for (i=0; i<options.length; i++) {
+      $option = $('<option>',{
+        'value': options[i]
+      }).text(options[i]);
+      $select.append($option);
+    }
+    $td = $('<td>').append($select);
+    $tr.append($td);
+
+    // Start
+    $td = $('<td>',{
+      'contenteditable': 'true'
+    }); // TODO; Intelligently assign a new start time (see getAdjustedTimes())
+    $tr.append($td);
+
+    // End
+    $td = $('<td>',{
+      'contenteditable': 'true'
+    }); // TODO; Intelligently assign a new end time (see getAdjustedTimes())
+    $tr.append($td);
+
+    // Content
+    $td = $('<td>',{
+      'contenteditable': 'true'
+    });
+    $tr.append($td);
+
+    // Actions
+    $td = this.addVtsActionButtons(newRowNum,numRows);
+    $tr.append($td);
+
+    // Now insert the new row
+    $table.find('tr').eq(rowNum).after($tr);
+
+    // Update row.id, Row # cell, & action items for all rows after the inserted one
+    for (i=newRowNum; i <= numRows; i++) {
+      nextRowNum = i + 1;
+      $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); // increment tr id
+      $rows.eq(i).find('td').eq(0).text(nextRowNum); // increment Row # as expressed in first td
+      $buttons = $rows.eq(i).find('button');
+      this.updateVtsActionButtons($buttons,nextRowNum);
+    }
+
+    // Auto-adjust times
+    this.adjustTimes(newRowNum);
+
+    // Announce the insertion
+    this.showVtsAlert('A new row ' + newRowNum + ' has been inserted'); // TODO: Localize this
+
+    // Place focus in new select field
+    $select.focus();
+
+  };
+
+  AblePlayer.prototype.deleteRow = function(rowNum) {
+
+    var $table, $rows, numRows, i, nextRowNum, $buttons;
+
+    $table = $('#able-vts table');
+    $table[0].deleteRow(rowNum);
+    $rows = $table.find('tr'); // this does not include the deleted row
+    numRows = $rows.length - 1; // exclude header row
+
+    // Update row.id, Row # cell, & action buttons for all rows after the deleted one
+    for (i=rowNum; i <= numRows; i++) {
+      nextRowNum = i;
+      $rows.eq(i).attr('id','able-vts-row-' + nextRowNum); // increment tr id
+      $rows.eq(i).find('td').eq(0).text(nextRowNum); // increment Row # as expressed in first td
+      $buttons = $rows.eq(i).find('button');
+      this.updateVtsActionButtons($buttons,nextRowNum);
+    }
+
+    // Announce the deletion
+    this.showVtsAlert('Row ' + rowNum + ' has been deleted'); // TODO: Localize this
+
+  };
+
+  AblePlayer.prototype.moveRow = function(rowNum,direction) {
+
+    // swap two rows
+    var $rows, $thisRow, otherRowNum, $otherRow, newTimes, msg;
+
+    $rows = $('#able-vts table').find('tr');
+    $thisRow = $('#able-vts table').find('tr').eq(rowNum);
+    if (direction == 'up') {
+      otherRowNum = parseInt(rowNum) - 1;
+      $otherRow = $('#able-vts table').find('tr').eq(otherRowNum);
+      $otherRow.before($thisRow);
+    }
+    else if (direction == 'down') {
+      otherRowNum = parseInt(rowNum) + 1;
+      $otherRow = $('#able-vts table').find('tr').eq(otherRowNum);
+      $otherRow.after($thisRow);
+    }
+    // Update row.id, Row # cell, & action buttons for the two swapped rows
+    $thisRow.attr('id','able-vts-row-' + otherRowNum);
+    $thisRow.find('td').eq(0).text(otherRowNum);
+    this.updateVtsActionButtons($thisRow.find('button'),otherRowNum);
+    $otherRow.attr('id','able-vts-row-' + rowNum);
+    $otherRow.find('td').eq(0).text(rowNum);
+    this.updateVtsActionButtons($otherRow.find('button'),rowNum);
+
+    // auto-adjust times
+    this.adjustTimes(otherRowNum);
+
+    // Announce the move (TODO: Localize this)
+    msg = 'Row ' + rowNum + ' has been moved ' + direction;
+    msg += ' and is now Row ' + otherRowNum;
+    this.showVtsAlert(msg);
+  };
+
+  AblePlayer.prototype.adjustTimes = function(rowNum) {
+
+    // Adjusts start and end times of the current, previous, and next rows in VTS table
+    // after a move or insert
+    // NOTE: Fully automating this process would be extraordinarily complicated
+    // The goal here is simply to make subtle tweaks to ensure rows appear
+    // in the new order within the Able Player transcript
+    // Additional tweaking will likely be required by the user
+
+    // HISTORY: Originally set minDuration to 2 seconds for captions and .500 for descriptions
+    // However, this can results in significant changes to existing caption timing,
+    // with not-so-positive results.
+    // As of 3.1.15, setting minDuration to .001 for all track kinds
+    // Users will have to make further adjustments manually if needed
+
+    // TODO: Add WebVTT validation on save, since tweaking times is risky
+
+    var  minDuration, $rows, prevRowNum, nextRowNum, $row, $prevRow, $nextRow,
+        kind, prevKind, nextKind,
+        start, prevStart, nextStart,
+        end, prevEnd, nextEnd;
+
+    // Define minimum duration (in seconds) for each kind of track
+    minDuration = [];
+    minDuration['captions'] = .001;
+    minDuration['descriptions'] = .001;
+    minDuration['chapters'] = .001;
+
+    // refresh rows object
+    $rows = $('#able-vts table').find('tr');
+
+    // Get kind, start, and end from current row
+    $row = $rows.eq(rowNum);
+    if ($row.is('[class^="kind-"]')) {
+      // row has a class that starts with "kind-"
+      // Extract kind from the class name
+      kind = this.getKindFromClass($row.attr('class'));
+    }
+    else {
+      // Kind has not been assigned (e.g., newly inserted row)
+      // Set as captions row by default
+      kind = 'captions';
+    }
+    start = this.getSecondsFromColonTime($row.find('td').eq(2).text());
+    end = this.getSecondsFromColonTime($row.find('td').eq(3).text());
+
+    // Get kind, start, and end from previous row
+    if (rowNum > 1) {
+      // this is not the first row. Include the previous row
+      prevRowNum = rowNum - 1;
+      $prevRow = $rows.eq(prevRowNum);
+      if ($prevRow.is('[class^="kind-"]')) {
+        // row has a class that starts with "kind-"
+        // Extract kind from the class name
+       prevKind = this.getKindFromClass($prevRow.attr('class'));
+      }
+      else {
+        // Kind has not been assigned (e.g., newly inserted row)
+        prevKind = null;
+      }
+      prevStart = this.getSecondsFromColonTime($prevRow.find('td').eq(2).text());
+      prevEnd = this.getSecondsFromColonTime($prevRow.find('td').eq(3).text());
+    }
+    else {
+      // this is the first row
+      prevRowNum = null;
+      $prevRow = null;
+      prevKind = null;
+      prevStart = null;
+      prevEnd = null;
+    }
+
+    // Get kind, start, and end from next row
+    if (rowNum < ($rows.length - 1)) {
+      // this is not the last row. Include the next row
+      nextRowNum = rowNum + 1;
+      $nextRow = $rows.eq(nextRowNum);
+      if ($nextRow.is('[class^="kind-"]')) {
+        // row has a class that starts with "kind-"
+        // Extract kind from the class name
+       nextKind = this.getKindFromClass($nextRow.attr('class'));
+      }
+      else {
+        // Kind has not been assigned (e.g., newly inserted row)
+        nextKind = null;
+      }
+      nextStart = this.getSecondsFromColonTime($nextRow.find('td').eq(2).text());
+      nextEnd = this.getSecondsFromColonTime($nextRow.find('td').eq(3).text());
+    }
+    else {
+      // this is the last row
+      nextRowNum = null;
+      $nextRow = null;
+      nextKind = null;
+      nextStart = null;
+      nextEnd = null;
+    }
+
+    if (isNaN(start)) {
+      if (prevKind == null) {
+        // The previous row was probably inserted, and user has not yet selected a kind
+        // automatically set it to captions
+        prevKind = 'captions';
+        $prevRow.attr('class','kind-captions');
+        $prevRow.find('td').eq(1).html('captions');
+      }
+      // Current row has no start time (i.e., it's an inserted row)
+      if (prevKind === 'captions') {
+        // start the new row immediately after the captions end
+        start = (parseFloat(prevEnd) + .001).toFixed(3);
+        if (nextStart) {
+          // end the new row immediately before the next row starts
+          end = (parseFloat(nextStart) - .001).toFixed(3);
+        }
+        else {
+          // this is the last row. Use minDuration to calculate end time.
+          end = (parseFloat(start) + minDuration[kind]).toFixed(3);
+        }
+      }
+      else if (prevKind === 'chapters') {
+        // start the new row immediately after the chapter start (not end)
+        start = (parseFloat(prevStart) + .001).toFixed(3);
+        if (nextStart) {
+          // end the new row immediately before the next row starts
+          end = (parseFloat(nextStart) - .001).toFixed(3);
+        }
+        else {
+          // this is the last row. Use minDuration to calculate end time.
+          end = (parseFloat(start) + minDurartion[kind]).toFixed(3);
+        }
+      }
+      else if (prevKind === 'descriptions') {
+        // start the new row minDuration['descriptions'] after the description starts
+        // this will theoretically allow at least a small cushion for the description to be read
+        start = (parseFloat(prevStart) + minDuration['descriptions']).toFixed(3);
+        end = (parseFloat(start) + minDuration['descriptions']).toFixed(3);
+      }
+    }
+    else {
+      // current row has a start time (i.e., an existing row has been moved))
+      if (prevStart) {
+        // this is not the first row.
+        if (prevStart < start) {
+          if (start < nextStart) {
+            // No change is necessary
+          }
+          else {
+            // nextStart needs to be incremented
+            nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3);
+            nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3);
+            // TODO: Ensure nextEnd does not exceed the following start (nextNextStart)
+            // Or... maybe this is getting too complicated and should be left up to the user
+          }
+        }
+        else {
+          // start needs to be incremented
+          start = (parseFloat(prevStart) + minDuration[prevKind]).toFixed(3);
+          end = (parseFloat(start) + minDuration[kind]).toFixed(3);
+        }
+      }
+      else {
+        // this is the first row
+        if (start < nextStart) {
+          // No change is necessary
+        }
+        else {
+          // nextStart needs to be incremented
+          nextStart = (parseFloat(start) + minDuration[kind]).toFixed(3);
+          nextEnd = (parseFloat(nextStart) + minDuration[nextKind]).toFixed(3);
+        }
+      }
+    }
+
+    // check to be sure there is sufficient duration between new start & end times
+    if (end - start < minDuration[kind]) {
+      // duration is too short. Change end time
+      end = (parseFloat(start) + minDuration[kind]).toFixed(3);
+      if (nextStart) {
+        // this is not the last row
+        // increase start time of next row
+        nextStart = (parseFloat(end) + .001).toFixed(3);
+      }
+    }
+
+    // Update all affected start/end times
+    $row.find('td').eq(2).text(this.formatSecondsAsColonTime(start,true));
+    $row.find('td').eq(3).text(this.formatSecondsAsColonTime(end,true));
+    if ($prevRow) {
+      $prevRow.find('td').eq(2).text(this.formatSecondsAsColonTime(prevStart,true));
+      $prevRow.find('td').eq(3).text(this.formatSecondsAsColonTime(prevEnd,true));
+    }
+    if ($nextRow) {
+      $nextRow.find('td').eq(2).text(this.formatSecondsAsColonTime(nextStart,true));
+      $nextRow.find('td').eq(3).text(this.formatSecondsAsColonTime(nextEnd,true));
+    }
+  };
+
+  AblePlayer.prototype.getKindFromClass = function(myclass) {
+
+    // This function is called when a class with prefix "kind-" is found in the class attribute
+    // TODO: Rewrite this using regular expressions
+    var kindStart, kindEnd, kindLength, kind;
+
+    kindStart = myclass.indexOf('kind-')+5;
+    kindEnd = myclass.indexOf(' ',kindStart);
+    if (kindEnd == -1) {
+      // no spaces found, "kind-" must be the only myclass
+      kindLength = myclass.length - kindStart;
+    }
+    else {
+      kindLength = kindEnd - kindStart;
+    }
+    kind = myclass.substr(kindStart,kindLength);
+    return kind;
+  };
+
+  AblePlayer.prototype.showVtsAlert = function(message) {
+
+    // this is distinct from greater Able Player showAlert()
+    // because it's positioning needs are unique
+    // For now, alertDiv is fixed at top left of screen
+    // but could ultimately be modified to appear near the point of action in the VTS table
+    this.$vtsAlert.text(message).show().delay(3000).fadeOut('slow');
+  };
+
+  AblePlayer.prototype.parseVtsOutput = function($table) {
+
+    // parse table into arrays, then into WebVTT content, for each kind
+    // Display the WebVTT content in textarea fields for users to copy and paste
+    var lang, i, kinds, kind, vtt, $rows, start, end, content, $output;
+
+    lang = $table.attr('lang');
+    kinds = ['captions','chapters','descriptions','subtitles'];
+    vtt = {};
+    for (i=0; i < kinds.length; i++) {
+      kind = kinds[i];
+      vtt[kind] = 'WEBVTT' + "\n\n";
+    }
+    $rows = $table.find('tr');
+    if ($rows.length > 0) {
+      for (i=0; i < $rows.length; i++) {
+        kind = $rows.eq(i).find('td').eq(1).text();
+        if ($.inArray(kind,kinds) !== -1) {
+          start = $rows.eq(i).find('td').eq(2).text();
+          end = $rows.eq(i).find('td').eq(3).text();
+          content = $rows.eq(i).find('td').eq(4).text();
+          if (start !== undefined && end !== undefined) {
+            vtt[kind] += start + ' --> ' + end + "\n";
+            if (content !== 'undefined') {
+              vtt[kind] += content;
+            }
+            vtt[kind] += "\n\n";
+          }
+        }
+      }
+    }
+    $output = $('<div>',{
+      'id': 'able-vts-output'
+    })
+    $('#able-vts').append($output);
+    for (i=0; i < kinds.length; i++) {
+      kind = kinds[i];
+      if (vtt[kind].length > 8) {
+        // some content has been added
+        this.showWebVttOutput(kind,vtt[kind],lang)
+      }
+    }
+  };
+
+  AblePlayer.prototype.showWebVttOutput = function(kind,vttString,lang) {
+
+    var $heading, filename, $p, pText, $textarea;
+
+    $heading = $('<h3>').text(kind.charAt(0).toUpperCase() + kind.slice(1));
+    filename = this.getFilenameFromTracks(kind,lang);
+    pText = 'If you made changes, copy/paste the following content ';
+    if (filename) {
+      pText += 'to replace the original content of your ' + this.getLanguageName(lang) + ' ';
+      pText += '<em>' + kind + '</em> WebVTT file (<strong>' + filename + '</strong>).';
+    }
+    else {
+      pText += 'into a new ' + this.getLanguageName(lang) + ' <em>' + kind + '</em> WebVTT file.';
+    }
+    $p = $('<p>',{
+      'class': 'able-vts-output-instructions'
+    }).html(pText);
+    $textarea = $('<textarea>').text(vttString);
+    $('#able-vts-output').append($heading,$p,$textarea);
+  };
+
+})(jQuery);