/* 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 */ import $ from 'jquery'; function addVtsFunctions(AblePlayer) { AblePlayer.prototype.injectVTS = function() { var thisObj, $heading, $instructions, $p1, $p2, $ul, $li1, $li2, $li3, $fieldset, $legend, i, $radioDiv, radioId, $label, $radio, $saveButton, $savedTable; thisObj = this; if ( null !== document.getElementById( 'able-vts' ) ) { // Are they qualifying tracks? if (this.vtsTracks.length) { // Build an array of unique languages this.langs = []; this.getAllLangs(this.vtsTracks); // Set the default VTS language this.vtsLang = this.lang; // Inject a heading let heading = this.translate( 'vtsHeading', 'Video Transcript Sorter' ); $heading = $('

').text( heading ); // TODO: intelligently assign proper heading level $('#able-vts').append($heading); // Inject an empty div for writing messages this.$vtsAlert = $('

',{ 'id': 'able-vts-alert', 'aria-live': 'polite', 'aria-atomic': 'true' }) $('#able-vts').append(this.$vtsAlert); // Inject instructions (TODO: Localize) $instructions = $('

',{ 'id': 'able-vts-instructions' }); $p1 = $('

').text( this.translate( 'vtsInstructions1', 'Use the Video Transcript Sorter to modify text tracks:' ) ); $ul = $('

'); $li1 = $('
• ').text( this.translate( 'vtsInstructions2', 'Reorder chapters, descriptions, captions, and/or subtitles so they appear in the proper sequence in Able Player\'s auto-generated transcript.' ) ); $li2 = $('
• ').text( this.translate( 'vtsInstructions3', 'Modify content or start/end times (all are directly editable within the table).' ) ); $li3 = $('
• ').text( this.translate( 'vtsInstructions4', 'Add new content, such as chapters or descriptions.' ) ); $p2 = $('

  ').text( this.translate( 'vtsInstructions5', 'After editing, click the "Save Changes" button to generate new content for all relevant timed text files. The new text can be copied and pasted into new WebVTT files.' ) ); $ul.append($li1,$li2,$li3); $instructions.append($p1,$ul,$p2); $('#able-vts').append($instructions); // Inject a fieldset with radio buttons for each language $fieldset = $('

  '); $legend = $('

  ').text( this.translate( 'vtsSelectLanguage', 'Select a language' ) ); $fieldset.append($legend); let $fieldWrapper = $( '

  ' ); for (i in this.langs) { radioId = 'vts-lang-radio-' + this.langs[i]; $radioDiv = $('

  '); $radio = $('', { '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 = $('', { 'for': radioId // Two options for label: // getLanguageName() - with second parameter "local" would return native name, otherwise returns English; // TODO: if using this be sure to add lang attr to

  (see above) }).text(this.getLanguageName(this.langs[i])); $radioDiv.append($radio,$label); $fieldWrapper.append($radioDiv); } $fieldset.append( $fieldWrapper ); $('#able-vts').append($fieldset); let vtsSave = this.translate( 'vtsSave', 'Generate new .vtt content' ); // Inject a button to generate new files. $saveButton = $('',{ 'type': 'button', 'id': 'able-vts-save', 'value': 'save' }).text( vtsSave ); $('#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; 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.substring(0,1) === 's') { $(this).text('subtitles'); } else if (editedContent.substring(0,1) === 'd') { $(this).text('descriptions'); } else if (editedContent.substring(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 $('#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( thisObj.translate( 'vtsReturn', 'Return to Editor' ) ); $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( vtsSave ); $('#able-vts-output').remove(); $('#able-vts-instructions').show(); $('#able-vts > fieldset').show(); $('#able-vts').append($savedTable); $('#able-vts').append(thisObj.getIconCredit()); thisObj.showVtsAlert( thisObj.translate( 'vtsCancel', 'Cancelling saving. Any edits you made have been restored in the VTS table.' ) ); } }); } } }; AblePlayer.prototype.setupVtsTracks = function(kind, lang, trackDesc, label, src, contents) { // TODO: Add support for trackDesc // (to destinguish between tracks for the decribed vs non-described versions) 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('/'); // fix slashes. return (lastSlash === -1) ? path : path.substring(lastSlash+1); }; AblePlayer.prototype.getFilenameFromTracks = function(kind,lang) { for (var i=0; i ') !== -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 return (/^[0-9:,.]*$/.test(timestamp)) ? true : 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; firstPart = timestamp.substring(0,timestamp.lastIndexOf('.')+1); lastPart = timestamp.substring(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.substring(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, $thead, headers, i, $tr, $th, $td, rows, rowNum, rowId; if (action === 'update') { // remove existing table $('#able-vts table').remove(); $('#able-vts-icon-credit').remove(); } $table = $('',{ 'lang': lang }); $thead = $( '' ); $tr = $( '' ); headers = [ this.translate( 'vtsRow', 'Row' ), this.translate( 'vtsKind', 'Kind' ), this.translate( 'vtsStart', 'Start' ), this.translate( 'vtsEnd', 'End' ), this.translate( 'vtsContent', 'Content' ), this.translate( 'vtsActions', 'Actions' ) ]; for (i=0; i < headers.length; i++) { $th = $('',{ 'id': rowId, 'class': 'kind-' + rows[i].kind }); // Row # $td = $('',{ 'id': newRowId }); // Row # $td = $('

  ', { 'scope': 'col' }).text(headers[i]); if (headers[i] === 'Actions') { $th.addClass('actions'); } $tr.append($th); } $thead.append($tr); $table.append($thead); // 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 = $('
  ').text(rowNum); $tr.append($td); // Kind $td = $('	',{ 'contenteditable': 'true' }).text(rows[i].kind); $tr.append($td); // Start $td = $('	',{ 'contenteditable': 'true' }).text(rows[i].start); $tr.append($td); // End $td = $('	',{ 'contenteditable': 'true' }).text(rows[i].end); $tr.append($td); // Content $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 = $('	'); buttons = ['up','down','insert','delete']; for (i=0; i < buttons.length; i++) { button = buttons[i]; if (button === 'up') { if (rowNum > 1) { $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 = $(' ' + credit + ' '; }; AblePlayer.prototype.getAllLangs = function(tracks) { // update this.langs with any unique languages found in tracks var i; for (i in tracks) { if (Object.hasOwn(tracks[i], '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, $tr, $td, $select, options, i, $option, newKind, newClass, $parentRow, 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 = $('
  ').text(newRowNum); $tr.append($td); // Kind (add a select field for chosing a kind) newKind = null; $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',{ 'value': options[i] }).text(options[i]); $select.append($option); } $td = $('	').append($select); $tr.append($td); // Start $td = $('	',{ 'contenteditable': 'true' }); // TODO; Intelligently assign a new start time (see getAdjustedTimes()) $tr.append($td); // End $td = $('	',{ 'contenteditable': 'true' }); // TODO; Intelligently assign a new end time (see getAdjustedTimes()) $tr.append($td); // Content $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 let newAlert = this.translate( 'vtsNewRow', 'A new row %1 has been inserted.', [ newRowNum ] ); this.showVtsAlert( newAlert ); // Place focus in new select field $select.trigger('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 let newAlert = this.translate( 'vtsDeletedRow', 'Row %1 has been deleted.', [ rowNum ] ); this.showVtsAlert( newAlert ); }; AblePlayer.prototype.moveRow = function(rowNum,direction) { // swap two rows var $thisRow, otherRowNum, $otherRow, msg; $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 msg = this.translate( 'vtsMovedRow', 'Row %1 has been moved %2 and is now Row %3.', [ rowNum, direction, 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); // row has a class that starts with "kind-" // Extract kind from the class name kind = ($row.is('[class^="kind-"]')) ? this.getKindFromClass($row.attr('class')) : '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); // row has a class that starts with "kind-" // Extract kind from the class name prevKind = ($prevRow.is('[class^="kind-"]')) ? this.getKindFromClass($prevRow.attr('class')) : 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 $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); // row has a class that starts with "kind-" // Extract kind from the class name nextKind = ($nextRow.is('[class^="kind-"]')) ? this.getKindFromClass($nextRow.attr('class')) : 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 $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); // end the new row immediately before the next row starts end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (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); // end the new row immediately before the next row starts end = (nextStart) ? (parseFloat(nextStart) - .001).toFixed(3) : (parseFloat(start) + minDuration[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 var kindStart, kindEnd; kindStart = myclass.indexOf('kind-')+5; kindEnd = myclass.indexOf(' ',kindStart); if (kindEnd == -1) { // no spaces found, "kind-" must be the only myclass return myclass.substring(kindStart); } else { // kind-* is one of multiple classes // the following will find it regardless of position of "kind-*" within the class string return myclass.substring(kindStart,kindEnd); } }; 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 const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); this.$vtsAlert.text(message).show(); delay(10000).then(() => { this.$vtsAlert.text(message).hide() }); }; 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)[0].innerText; if (start !== undefined && end !== undefined) { vtt[kind] += start + ' --> ' + end + "\n"; if (content !== 'undefined') { vtt[kind] += content; } vtt[kind] += "\n\n"; } } } } $output = $(' ',{ '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 = $(' ').text( this.capitalizeFirstLetter( kind ) ); 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 += '' + kind + ' WebVTT file (' + filename + ').'; } else { pText += 'into a new ' + this.getLanguageName(lang) + ' ' + kind + ' WebVTT file.'; } $p = $(' ',{ 'class': 'able-vts-output-instructions' }).html(pText); $textarea = $('').text(vttString); $('#able-vts-output').append($heading,$p,$textarea); }; } export default addVtsFunctions;